Search code examples
typescriptbabeljseslintbabel-eslint

Typescript casting with babel eslint parsing


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']
};

Solution

  • 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.