Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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'
    }
}
like image 449
stan.konnov Avatar asked Jan 26 '23 05:01

stan.konnov


1 Answers

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'
    }
  }]
}
like image 165
Александр Чернобай Avatar answered Jan 29 '23 21:01

Александр Чернобай