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

Question

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

Ketosis

Answer 1

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

Gilud

Why did you include the commented babel-eslint in this answer? I am using babel and wonder if I should uncomment? – Jori