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'
}
}
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'
}
}]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With