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/remended, @typescript-eslint/remended, and prettier/remended.

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",
        "ma-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/remended',
        'plugin:@typescript-eslint/remended',
        'plugin:prettier/remended'
    ],
    parserOptions: {
        ecmaversion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    settings: {
        react: {
            version: 'detect',
        },
    },
    rules: {
        '@typescript-eslint/no-explicit-any': 'off'
    }
}

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/remended, @typescript-eslint/remended, and prettier/remended.

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",
        "ma-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/remended',
        'plugin:@typescript-eslint/remended',
        'plugin:prettier/remended'
    ],
    parserOptions: {
        ecmaversion: 2018,
        sourceType: 'module',
        ecmaFeatures: {
            jsx: true,
        },
    },
    settings: {
        react: {
            version: 'detect',
        },
    },
    rules: {
        '@typescript-eslint/no-explicit-any': 'off'
    }
}

• javascript
• typescript
• eslint
• tsx

1 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",
    "ma-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/remended',
      'plugin:@typescript-eslint/remended',
      'plugin:prettier/remended'
    ],
    parserOptions: {
      ecmaversion: 2018,
      sourceType: 'module',
      ecmaFeatures: {
        jsx: true,
      },
    },
    settings: {
      react: {
        version: 'detect',
      },
    },

    /**
     * Typescript Rules
     */
    rules: {
      '@typescript-eslint/no-explicit-any': 'off'
    }
  }]
}