1.安装插件
在终端安装eslint相关开发依赖，例如：
npm install --save-dev eslint-plugin-prettier eslint-plugin-jsx-a11y
package.json文件安装的运行依赖和开发依赖如下：
"dependencies": {
"@babel/runtime": "^7.7.7",
"@tarojs/components": "3.0.18",
"@tarojs/react": "3.0.18",
"@tarojs/runtime": "3.0.18",
"@tarojs/taro": "3.0.18",
"react": "^16.10.0",
"react-dom": "^16.10.0",
"stook": "^0.5.0",
"taro-ui": "^3.0.0-alpha.3"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.0.18",
"@tarojs/webpack-runner": "3.0.18",
"@types/react": "^16.0.0",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^2.x",
"@typescript-eslint/parser": "^2.x",
"babel-preset-taro": "3.0.18",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.2.1",
"eslint-config-prettier": "^7.2.0",
"eslint-config-taro": "3.0.18",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^1.6.1",
"postcss-jsx": "^0.36.4",
"postcss-pxtransform": "^3.0.25",
"postcss-syntax": "^0.36.2",
"prettier": "^2.2.1",
"stylelint": "9.3.0",
"stylelint-config-prettier": "^8.0.2",
"stylelint-order": "^4.1.0",
"stylelint-scss": "^3.18.0",
"typescript": "^3.7.0"
}
2.配置.eslintrc.js文件
Taro init生成的项目eslintrc文件名默认是.eslintrc，改成.eslintrc.js，把文件内容写成module.exports = { }
rules中的代码规则可根据编写习惯自行开启或关闭
module.exports = {
extends: ['taro/react', 'airbnb', 'airbnb/hooks', 'prettier'],
parser: '@typescript-eslint/parser', // ESLint 默认使用 esprima 作为其解析器，也可以在配置文件中指定一个不同的解析器（它必须是一个 Node 模块，且它必须符合 parser interface）
env: {
// 要在配置文件里指定环境，使用 env 关键字指定你想启用的环境，并设置它们为 true
browser: true,
node: true,
mocha: true,
es6: true,
commonjs: true
},
globals: {
// 要在配置文件中配置全局变量, 对于每个全局变量键，将对应的值设置为 "writable" 以允许重写变量，或 "readonly" 不允许重写变量
// "Babel": "writable",
// "React": "writable"
},
plugins: [
// 在配置文件里配置插件时, 可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
'react',
'jsx-a11y',
'react-hooks',
'import',
'prettier'
],
rules: {
// 可以使用 rules 连同错误级别和任何你想使用的选项，在配置文件中进行对airbnb规则的修改
'jsx-quotes': ['error', 'prefer-single'],
'class-methods-use-this': 'off',
'no-unused-expressions': 'off',
'linebreak-style': ['error', 'windows'],
'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
'no-use-before-define': ['off', { functions: false }],
'no-unused-vars': 'off',
indent: ['error', 4, { SwitchCase: 1 }],
semi: ['error', 'always', { omitLastInOneLineBlock: true }],
camelcase: 0, // 关闭必须驼峰命名
// react rules
'react/jsx-indent': ['error', 4],
'react/jsx-indent-props': ['error', 4],
'react/static-property-placement': 'off',
'react/jsx-props-no-spreading': 'off',
'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
// import rules
'import/extensions': 'off',
'import/no-unresolved': 'off',
// prettier rules
'prettier/prettier': 'error'
}
};
3.新建.eslintignore文件，配置eslint不检测的文件
# .eslintignore
/.git/
/.vscode/
node_modules/
dist/
src/index.html
4.新建.prettierrc.js文件
module.exports = {
tabWidth: 4,
singleQuote: true,
jsxSingleQuote: true,
printWidth: 140,
endOfLine: 'auto',
};
5.修改编辑器的配置文件.editorconfig
.editorconfig 文件用于 统一不同编辑器的代码风格的配置。比如我们要控制一个多人维护的项目缩进统一用4个空格：indent_size = 4
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 4
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
end_of_line = crlf
[*.md]
trim_trailing_whitespace = false
6.修改vscode编辑器的setting.json文件
加入如下配置：
// jsx自动修复
"editor.formatOnSave": true,
// 保存自动修复
"eslint.autoFixOnSave": true,
"eslint.run": "onSave",
"javascript.format.enable": false,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnPaste": false,
"editor.formatOnType": true,
"files.autoSave": "onFocusChange",
"eslint.nodePath": "",
"files.trimTrailingWhitespace": true,
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "react",
"autoFix": true
}
]
参考网址：
【Delete ␍eslint(prettier/prettier)错误】
https://blog.csdn.net/qq_27674439/article/details/111408453
【EditorConfig使用介绍】：
https://segmentfault.com/a/1190000007599845
