因为项目是ts + react,所以需要额外安装ts和react的扩展,依赖的npm包如下。
"eslint": "^8.41.0",
"eslint-config-prettier": "^8.8.0",
"eslint-plugin-import": "^2.27.5",
"eslint-plugin-prettier": "^4.2.1",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"@typescript-eslint/eslint-plugin": "^5.59.8",
"@typescript-eslint/parser": "^5.59.8",
"eslint-webpack-plugin": "^4.0.1",
没碰到特定版本的需求,目前安装的都是最新版本。
Eslint
在文件根目录创建 .eslintrc.js 为配置文件,用来编辑相关检查规则及引用扩展。
eslint-config-prettier
因为本身eslint就有自己的格式化设置,所以会有很多与prettier冲突的配置,所以需要此依赖,用来解决这些冲突。
eslint-plugin-import
eslint的import扩展,用于在 .eslintrc.js 中定义文件的import规则,定义import的引入顺序及排序规则。
eslint-plugin-prettier
与eslint-config-prettier功能类似,提供了一种更方便的方式,可以直接将prettier配置作为扩展在 .eslintrc.js 中进行注册,而无需创建.prettierrc.json文件。
eslint-plugin-react
eslint的react规则扩展,用于检查react语法。
eslint-plugin-react-hooks
eslint的react hooks规则扩展,用于检查react hooks语法。
@typescript-eslint/eslint-plugin
eslint的ts规则扩展,用于检查ts语法。
@typescript-eslint/parser
eslint配置的ts解析器,需要先配置上解析器,eslint才能正确对ts语法进行检查,需要先按照上解析器,@typescript-eslint/eslint-plugin才能使用。
eslint-webpack-plugin
webpack的eslint插件,在webpack.config.js中注入该插件扩展,可以在webpack进行编译前,先进行eslint语法检查,将eslint的错误输出到终端,不会影响到webpack编译结果。
.eslintrc.js配置如下:
module.exports = {
root: true,
env: {
browser: true,
es2021: true,
node: true,
},
parser: '@typescript-eslint/parser',
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended',
],
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 13,
sourceType: 'module',
},
plugins: ['import', 'react', 'react-hooks', '@typescript-eslint'],
settings: {
react: {
version: 'detect',
},
},
rules: {
// ---------------------------- 代码执行方式 start ↓ -----------------------------
// // 禁用 'semi' 规则
// semi: "error",
// // 使用 '@typescript-eslint/no-extra-semi' 规则 (强制单行结束必须要有分号结尾)
// "@typescript-eslint/no-extra-semi": "off",
// 对已声明未使用的变量报错
'@typescript-eslint/no-unused-vars': 'error',
'no-unused-vars': 'off',
// 不允许if 和 else if判断相同
'no-dupe-else-if': 'error',
// 强制变量必须小驼峰命名规则
camelcase: 'error',
// 强制必须使用完全比较
eqeqeq: 'error',
// 禁止else语句中只包含 if语句,应该修改为 else if
'no-lonely-if': 'error',
// 允许ts指定类型为any
'@typescript-eslint/no-explicit-any': 'off',
// 允许对非null进行断言
'@typescript-eslint/no-non-null-assertion': 'off',
// 允许定义空接口
'@typescript-eslint/no-empty-interface': 'off',
// 禁止在函数中进行无意义的返回
'no-useless-return': 'error',
// 对于字符串拼接,限制只能使用字符串模板的方式 `hello ${name}`
'prefer-template': 'error',
// 限制模块导入不可重复
'no-duplicate-imports': 'error',
// 允许使用require引入模块
'@typescript-eslint/no-var-requires': 'off',
// 忽略提示react弃用方法
'react/no-deprecated': 'off',
// 暂时先关闭未使用setState更新的错误报警,后面统一处理
'react/no-direct-mutation-state': 'off',
// 重新配置 react-hooks 相关内容
'react-hooks/rules-of-hooks': 'error',
// ---------------------------- 代码执行方式 end ↑ -----------------------------
// ---------------------------- 代码外观 start ↓ -----------------------------
// 配置import模块进行分组
'import/order': [
'error',
{
groups: [
['builtin', 'external'],
'internal',
'parent',
'sibling',
'index',
],
'newlines-between': 'always',
pathGroups: [
{
pattern: '../**',
group: 'parent',
position: 'after',
},
{
pattern: './*.scss',
group: 'sibling',
position: 'after',
},
],
alphabetize: {
order: 'asc',
caseInsensitive: true,
},
},
],
'prettier/prettier': [
'error',
{
endOfLine: 'auto',
semi: true,
singleQuote: true,
tabWidth: 2,
trailingComma: 'es5',
},
],
// ---------------------------- 代码外观 end ↑ -----------------------------
},
};
配置完成后,可以在当前目录执行命令对指定文件或目录进行eslint语法检查。
npx eslint ./src/ --ext .js,.jsx,.ts,.tsx --max-warnings 1000
可以使用以下命令对指定文件目录进行自动修复。
npx eslint --fix .\src\
使用以下命令对指定文件目录执行prettier格式化。
npx prettier --write .\src\
在webpack.config.js的plugins进行注册,注意只需要在开发环境注册。
plugins: [
isDevelopment &&
new ESLintPlugin({
// 指定 ESLint 配置文件的路径
context: 'src',
extensions: ['.js', '.jsx', '.ts', '.tsx'],
exclude: ['node_modules'],
// fix: true, // 如果可能,自动修复 ESLint 错误
}),
].filter(Boolean),
在vscode编译器中安装eslint和prettier eslint扩展,这样在编辑器中就可以看到相关标红的错误提示。
修改当前项目的工作区配置,对应.vscode>serttings.json文件。
{
"editor.defaultFormatter": "rvest.vs-code-prettier-eslint",
"editor.formatOnPaste": false, // required
"editor.formatOnType": false, // required
// "editor.formatOnSave": true, // optional
// "editor.formatOnSaveMode": "file", // required to format on save
// "files.autoSave": "onFocusChange", // optional but recommended
"vs-code-prettier-eslint.prettierLast": false // set as "true" to run 'prettier' last not first
}
指定当前工作区格式化扩展为prettier,代码中注释的三行为自动保存后自动格式化的相关配置。