"VSCode constantly showing 'ESLINT: Unexpected token export' in a React/TypeScript project"

Viewed 744

I am working on a React/TypeScript project in VSCode. A while ago my ESLint was working fine, and then one day when I fired up VSCode every time I clicked on a file, the error "ESLint: Unexpected token export. Please see the 'ESLint' output channel for details." began popping up.

I've tried updating my tsconfig.json and eslintrc.js files and uninstalling the ESLint plugin. I've copied setups that people have online, but it still keeps popping up.

Here are some of my current configurations.

tsconfig.json

{
  "compilerOptions": {
    "target": "es2019",
    "jsx": "preserve",
    "module": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "noImplicitAny": false,
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "src"
  ],
}

.eslintrc.js

module.exports =  {
  parser:  '@typescript-eslint/parser',  // Specifies the ESLint parser
  extends:  [
    'plugin:@typescript-eslint/recommended',  // Uses the recommended rules from the @typescript-eslint/eslint-plugin
    'prettier/@typescript-eslint',  // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended',  // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  parserOptions:  {
    ecmaVersion:  2018,  // Allows for the parsing of modern ECMAScript features
    sourceType:  'module',  // Allows for the use of imports
  },
  plugins: ['@typescript-eslint', 'react'],
  "rules": {
    "react/prop-types": 0
  },
  settings: {
    react: {
        version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
    },
  },
};

VSCode settings.json

{
  "editor.tabSize": 2,
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
    }
  },
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ],
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false,
  },
  "[javascriptreact]": {
    "editor.formatOnSave": false,
  },
  "[typescript]": {
    "editor.formatOnSave": false,
  },
  "[typescriptreact]": {
    "editor.formatOnSave": false,
  },
  "terminal.integrated.fontFamily": "Menlo for Powerline",
  "sync.gist": "hidden",
  "sync.host": "",
  "sync.pathPrefix": "",
  "sync.quietSync": false,
  "sync.askGistName": false,
  "sync.removeExtensions": true,
  "sync.syncExtensions": true,
  "sync.autoDownload": false,
  "sync.autoUpload": false,
  "sync.lastUpload": "2018-05-03T23:26:14.806Z",
  "sync.lastDownload": "",
  "sync.forceDownload": false,
  "explorer.confirmDragAndDrop": false,
  "window.zoomLevel": 1,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "files.trimTrailingWhitespace": true,
  "typescript.validate.enable": true,
  "workbench.colorTheme": "Material Theme"
}

If someone has any suggestions I'd greatly appreciate it. While the problem isn't show stopping, the constant error popping up is slowly eroding my sanity. Thanks in advance.

0 Answers
Related