如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?
Posted
技术标签:
【中文标题】如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?【英文标题】:How to lint JS and TS files with different eslint configs at the same time? 【发布时间】:2020-07-01 13:02:34 【问题描述】:我们正在从 es6 迁移到 TSX。 JS 文件使用扩展airbnb config
的.eslintrc
进行linted,而TSX 使用扩展react/recommended
、@typescript-eslint/recommended
和prettier/recommended
的.eslintrc.js
进行linted。
我们如何设置 eslint 将 JS 规则应用于 JS-only 文件和 TS(X) 规则应用于 TS-only 文件?
我在网上搜索过,一些建议暗示了覆盖,但我无法理解如何将插件集成在一起。
.eslintrc 用于 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 用于 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'
【问题讨论】:
【参考方案1】:您需要覆盖“.eslintrc.js”文件中的 ts、tsx 文件。尝试下一个参数:
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'
]
【讨论】:
您为什么在此答案中包含已评论的babel-eslint
?我正在使用 babel,想知道是否应该取消注释?以上是关于如何同时使用不同的 eslint 配置 lint JS 和 TS 文件?的主要内容,如果未能解决你的问题,请参考以下文章
设置Jenkins使用Karma和Eslint进行单元测试和Lint检查
如何配置 package.json 在 js 和 jsx 文件上运行 eslint
使用eslint+prettier+husky+lint-staged+commitlint+stylelint规范项目格式