如何开始
https://typescript-eslint.io/docs/linting/
插件
- eslint-plugin-import
- eslint-plugin-react
类似的插件都是特定 eslint 规则，直接安装配置使用即可。
配置例子
使用 overrides 对 js 和 ts 进行分别配置，使用不同的 parser。
module.exports = {
root: true,
ignorePatterns: ['**/node_modules', '**/.cache', 'build', '.next'],
settings: {
react: {
version: 'detect',
},
'import/core-modules': ['@fqht/utils', '@fqht/constants', '@ant-design/icons'],
'import/resolver': {
typescript: {},
},
},
env: {
es6: true,
node: true,
browser: true,
},
overrides: [
{
files: ['*.js', '*.jsx'],
extends: ['plugin:react/recommended', 'plugin:import/recommended', 'plugin:import/errors', 'plugin:import/warnings'],
parser: '@babel/eslint-parser',
plugins: ['react', 'react-hooks', 'import'],
},
{
files: ['*.ts', '*.tsx'],
excludedFiles: ['content/**'],
extends: ['airbnb-base', 'plugin:@typescript-eslint/recommended', 'plugin:import/typescript', 'prettier', 'plugin:react/recommended'],
parser: '@typescript-eslint/parser',
parserOptions: {
project: ['tsconfig.json'],
},
plugins: ['react', 'react-hooks', 'import', '@typescript-eslint', 'prettier'],
rules: {
'prettier/prettier': 'error',
'no-useless-escape': 'off',
'no-useless-concat': 'off',
indent: 'off',
'@typescript-eslint/indent': 'off',
'react/display-name': [
'error',
{
ignoreTranspilerName: false,
},
],
'import/no-webpack-loader-syntax': 'off',
'no-empty-function': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['off'],
'no-useless-constructor': 'off',
'class-methods-use-this': 'off',
'import/prefer-default-export': 'off',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: false,
},
],
'no-bitwise': 'off',
'no-underscore-dangle': 'off',
'max-len': 'off',
'react/prop-types': 'off',
'no-dupe-class-members': 'off',
'prefer-destructuring': 'off',
'no-unused-expressions': 'off',
'linebreak-style': 'off',
'no-param-reassign': 'off',
'prefer-const': 'off',
'func-names': 'off',
'no-console': 'off',
'no-plusplus': 'off',
'no-continue': 'off',
'no-shadow': 'off',
'@typescript-eslint/no-shadow': ['off'],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
},
},
],
};
更复杂的配置例子
module.exports = {
root: true,
settings: {
react: {
version: 'detect',
},
'import/core-modules': ['react', 'react-dom', 'classnames'],
'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
'import/parsers': {
'@typescript-eslint/parser': ['.ts', '.tsx', '.svg'],
},
'import/resolver': {
node: {
extensions: ['.js', '.jsx', '.ts', '.tsx'],
moduleDirectory: ['src', 'node_modules'],
},
typescript: {},
},
},
env: {
browser: true,
es6: true,
jest: true,
es2020: true,
},
extends: ['airbnb-base', 'eslint:recommended', 'plugin:react/recommended', 'prettier', 'plugin:import/typescript'],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
sourceType: 'module',
project: [],
tsconfigRootDir: './',
ecmaVersion: 2020,
},
plugins: ['@typescript-eslint', 'react', 'import', 'prettier'],
rules: {
'prettier/prettier': 'error',
'no-useless-escape': 'off',
'no-useless-concat': 'off',
indent: 'off',
'@typescript-eslint/indent': 'off',
'react/display-name': [
'error',
{
ignoreTranspilerName: false,
},
],
'import/no-webpack-loader-syntax': 'off',
'no-empty-function': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'no-use-before-define': 'off',
'@typescript-eslint/no-use-before-define': ['off'],
'no-useless-constructor': 'off',
'class-methods-use-this': 'off',
'import/prefer-default-export': 'off',
'no-unused-vars': 'off',
'@typescript-eslint/no-unused-vars': [
'warn',
{
vars: 'all',
args: 'after-used',
ignoreRestSiblings: false,
},
],
'no-bitwise': 'off',
'no-underscore-dangle': 'off',
'max-len': 'off',
'react/prop-types': 'off',
'no-dupe-class-members': 'off',
'prefer-destructuring': 'off',
'no-unused-expressions': 'off',
'linebreak-style': 'off',
'no-param-reassign': 'off',
'prefer-const': 'off',
'func-names': 'off',
'no-console': 'off',
'no-plusplus': 'off',
'no-continue': 'off',
'no-shadow': 'off',
'@typescript-eslint/no-shadow': ['off'],
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never',
},
],
},
};
in monorepo
为 preset 创建一个 package。
// package.json
{
"name": "@my-workspace/eslint-config-react",
"main": "index.js",
"dependencies": {
"eslint": "7.32.0",
"eslint-config-next": "11.1.3",
"eslint-config-prettier": "8.3.0",
"next": "11.1.3",
"typescript": "4.4.4"
}
}
然后每个 package 去 extends。
// eslintrc.js
module.exports = {
extends: ['@my-workspace/eslint-config-react'],
};
忽略下一行
使用 eslint-disable-next-line
<div
// eslint-disable-next-line no-nested-ternary
className={classNames(styles.tag, activityIds.includes(item.activityId) ? styles.active : item.status && !originActivityIds.includes(item.activityId) ? styles.disabled : '')}
onClick={() => checkActivity(item.activityId)}
key={item.activityId}
>
{item.activityName}
</div>
常见错误
ESLint couldn't determine the plugin "react" uniquely.
因为你有多个 eslint 的配置文件，删掉子项目的配置文件即可。
https://github.com/eslint/eslint/issues/13385
Unable to resolve path to module import/no-unresolved
安装eslint-import-resolver-typescript
settings: {
'import/resolver': {
typescript: {},
},
}
https://stackoverflow.com/questions/57032522/eslint-complains-about-typescripts-path-aliasing
参考
https://stackoverflow.com/questions/68629014/monorepo-yarn-workspaces-shared-eslint-and-prettier-configs