title: ESLint: Why is Symbol not defined (no-undef rule)?
body: <p>In a Typescript project that I've recently setup, I've gotten Babel to compile my Typescript code. I'm also using <code>@typescript-eslint</code> as my linter. So far, it has been working well until recently when I tried to use <code>Symbol</code> in my code.</p>
  
  <p><a href="https://i.stack.imgur.com/eqo16.png" rel="noreferrer"><img src="https://i.stack.imgur.com/eqo16.png" alt=""></a>
  For some reason, Typescript (or Babel) is unable to recognise <code>Symbol</code> and is giving me an error that <code>Symbol is not defined</code>. </p>
  
  <p>Here's how my eslintrc looks:</p>
  
  <pre><code>{
    "parser": "@typescript-eslint/parser",
    "extends": [
      "eslint:recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
    ],
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint/eslint-plugin"
    ]
  }
  </code></pre>
  
  <p>And in my babelrc, I've the following:</p>
  
  <pre><code>{
    "presets": [
      [
        "@babel/preset-env"
      ],
      ["@babel/preset-typescript"]
    ],
    "plugins": [
      "@babel/plugin-transform-modules-commonjs",
      [
        "@babel/plugin-transform-runtime",
        {
          "corejs": 2
        }
      ]
    ]
  }
  </code></pre>
  
  <p>Why is this happening and how can I fix this issue?</p>