Search code examples
javascripttypescripteslinttsx

How to lint JS and TS files with different eslint configs at the same time?


We're migrating from es6 to TSX. JS files are linted with .eslintrc that extends airbnb config, whereas TSX are linted with .eslintrc.js that extends react/recommended, @typescript-eslint/recommended, and prettier/recommended.

How can we set up eslint to apply JS rules to JS-only files and TS(X) rules to TS-only files?

I've searched on the net and some of the suggestions implied overriding, but I can't wrap my head around how to integrate plugins together.

.eslintrc for JS:


{   
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "airbnb",
    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }],
        "no-alert": "error",
        "no-debugger": "error",
        "no-console": "off",
        "no-shadow": "off",
        "no-plusplus": "off",
        "no-empty-pattern": "off",
        "no-underscore-dangle": "off",
        "no-case-declarations": "off",
        "no-else-return": "off",
        "padded-blocks": "off",
        "no-tabs": "off",
        "default-case": "error",
        "comma-dangle": "error",
        "no-nested-ternary": "off",
        "consistent-return": "off",
        "no-param-reassign": "off",
        "no-use-before-define": "off",
        "brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
        "import/prefer-default-export": "off",
        "max-len": ["error", { "code": 120 }],
        "object-curly-newline": ["error", { "multiline": true, "consistent": true }],
        "arrow-body-style": "off",
        "arrow-parens": ["error", "as-needed"],
        "quotes": ["error", "single"],
        "prefer-arrow-callback": "off",
        "no-new-object": "off"
    },
    "settings": {
        "import/resolver": "webpack"
      }
}

.eslintrc.js for TSX:

module.exports = {
    parser: '@typescript-eslint/parser',
    extends: [
        'plugin:react/recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:prettier/recommended'
    ],
    parserOptions: {
        ecmaversion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    settings: {
        react: {
            version: 'detect',
        },
    },
    rules: {
        '@typescript-eslint/no-explicit-any': 'off'
    }
}

Solution

  • You need to override ts, tsx files linteing in ".eslintrc.js" file. Try next params:

    module.exports = {
      //  parser: 'babel-eslint',
      //  "parserOptions": {
      //    "ecmaVersion": 6,
      //    "sourceType": "module",
      //    "ecmaFeatures": {
      //      "jsx": true,
      //      "experimentalObjectRestSpread": true
      //    }
      //  },
      "extends": "airbnb",
      "env": {
        "browser": true,
        "es6": true
      },
      "settings": {
        "import/resolver": "webpack"
      },
      "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }],
        "no-alert": "error",
        "no-debugger": "error",
        "no-console": "off",
        "no-shadow": "off",
        "no-plusplus": "off",
        "no-empty-pattern": "off",
        "no-underscore-dangle": "off",
        "no-case-declarations": "off",
        "no-else-return": "off",
        "padded-blocks": "off",
        "no-tabs": "off",
        "default-case": "error",
        "comma-dangle": "error",
        "no-nested-ternary": "off",
        "consistent-return": "off",
        "no-param-reassign": "off",
        "no-use-before-define": "off",
        "brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
        "import/prefer-default-export": "off",
        "max-len": ["error", { "code": 120 }],
        "object-curly-newline": ["error", { "multiline": true, "consistent": true }],
        "arrow-body-style": "off",
        "arrow-parens": ["error", "as-needed"],
        "quotes": ["error", "single"],
        "prefer-arrow-callback": "off",
        "no-new-object": "off"
      },
      overrides: [{
        files: ["*.ts", "*.tsx"],
        parser: "@typescript-eslint/parser",
        plugins: ["@typescript-eslint"],
        extends: [
          'plugin:react/recommended',
          'plugin:@typescript-eslint/recommended',
          'plugin:prettier/recommended'
        ],
        parserOptions: {
          ecmaversion: 2018,
          sourceType: 'module',
          ecmaFeatures: {
            jsx: true,
          },
        },
        settings: {
          react: {
            version: 'detect',
          },
        },
    
        /**
         * Typescript Rules
         */
        rules: {
          '@typescript-eslint/no-explicit-any': 'off'
        }
      }]
    }