6

I am getting some parsing errors after introducing ESLint into an existing Typescript codebase.

I have fixed most of the lint errors but babel-eslint as a parser throws quite a few errors like this:

  23:32  error  Parsing error: Unexpected token, expected ","

  21 |       return state.set(
  22 |         'callsInProgress',
> 23 |         (state.callsInProgress as any).filter(i => i !== action.payload)
     |                                ^
  24 |       );
  25 |     }
  26 |     case actions.API_RESET: {

I assume this is because babel does not understand the typecasting as any.

How do i get this through the parser?

My babel config is as follows:

module.exports = {
  presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
  plugins: ['@babel/plugin-proposal-class-properties', '@babel/plugin-transform-runtime', '@babel/plugin-transform-typescript']
};
1
  • 1
    Side note: It's a type assertion, not a cast. Assertions aren't quite the same thing as casts. Jun 23, 2020 at 13:19

2 Answers 2

18

Having a project that is using babel, eslint and typescript myself.

I recommend you to stop using eslint-babel and use @typescript-eslint instead/

typescript-eslint is a project that has been started by the developers of Tslint (now deprecated). It lint typescript code perfectly.

Here is an example of my eslint installed npm packages:

"@typescript-eslint/eslint-plugin": "^2.34.0",
"@typescript-eslint/parser": "^2.34.0",
"eslint": "^5.16.0",
"eslint-plugin-import": "^2.21.2",
"eslint-plugin-jsx-a11y": "^6.3.0",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-react": "^7.20.0",

Example of my .eslintrc:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',

  plugins: [
    '@typescript-eslint',
    'eslint-plugin-node',
  ],

  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],

  parserOptions: {
    "ecmaVersion": 2020
  },

  rules: {
    "comma-dangle": ["error", {
      "arrays": "always-multiline",
      "objects": "always-multiline",
      "imports": "always-multiline",
      "exports": "always-multiline",
      "functions": "always-multiline",
    }],
  },

  env: {
    es6: true,
    browser: true,
    node: true,
  },

  parserOptions: {
    project: './tsconfig.json',
    tsconfigRootDir: __dirname,
  },

  globals: {
    "global": false,
    "Promise": false,
  },
};

NOTE: I don't know if eslint-babel could be compatible with @typescript-eslint, maybe it does and you can use both.

2
  • 1
    Thanks. This is currently where I going to as I find babel and it's ecosystem much harder to work with in comparison to just TypeScript.
    – RyanP13
    Jun 23, 2020 at 13:33
  • 1
    Is parserOptions supposed to be in there twice?
    – sallf
    Mar 16, 2022 at 18:07
15

I finally agree with the accepted answer, after experienced the upgrade from JavaScript to TypeScript. Post this answer to provide some additional key point.

  1. @babel/eslint-parser (previously babel-eslint) can parse TS and let ESLint to work on TS.

@babel/eslint-parser is a parser that allows ESLint to run on source code that is transformed by Babel.

  1. @babel/eslint-parser can't and won't be able to check type issue on TypeScript

since @typescript-eslint uses TypeScript under the hood, its rules can be made type-aware, which is something Babel doesn't have the ability to do. This I think is a must-have feature on TS.

See doc: https://github.com/babel/babel/tree/main/eslint/babel-eslint-parser#typescript

So basically, if your project is a pure TS project, just use @typescript-eslint

{
  "plugins": ["@typescript-eslint"],
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ]
}

If your project has both TS and JS, you can use @babel/eslint-parser as well

{
  "parser": "@babel/eslint-parser",
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true
  },
  "settings": {
    "import/resolver": {
      "node": {
        "extensions": [".js", ".jsx", ".ts", ".tsx"]
      }
    }
  },
  "rules": {
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  },
  "overrides": [
    {
      "files": ["*.{ts,tsx}"],
      "parser": "@typescript-eslint/parser",
      "plugins": ["@typescript-eslint"],
      "extends": ["plugin:@typescript-eslint/recommended"]
    }
  ]
}

Just understand that using @babel/eslint-parser instead of the default parser esprima is because babel can lint on some experimental features (not much)

1
  • Thanks for this. We have a hybrid JS/TS codebase too (migrating everything slowly to TS) and would have never thought to override the parser for TS files.
    – Justin
    Jan 20, 2022 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.