VSCode配合ESLint自动修复格式化

开发Vue或者React的项目的时候，我们经常用到ESLint进行代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提示相关的异常信息。

ESLint极大的提高了团队代码的一致性和规范性，接下来老马介绍一下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置自动修复代码和格式化。

VSCode安装插件

• ESLint，VSCode代码中提示错误
• vuetur：Vue开发的神器，格式化、代码段等不用说了....
• Prettier - Code formatter,代码格式化插件，非常牛，可以自定义格式化的配置

配置VSCode的用户配置

[code]{
...
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatter.html": "js-beautify-html",
"eslint.validate": [
"javascript",
"javascriptreact",
{
"language": "html",
"autoFix": true
},
{
"language": "vue",
"autoFix": true
}
],
// 保存自动修复
"eslint.autoFixOnSave": true,
// jsx自动修复有问题，取消js的format
"editor.formatOnSave": false,
// Enable/disable default JavaScript formatter (For Prettier)
"javascript.format.enable": false,
"prettier.singleQuote": true,
// 点击保存时，根据 eslint 规则自定修复，同时集成 prettier 到 eslint 中
"prettier.eslintIntegration": true,
...
}

注意事项

如果需要启动ESLint的自动修复，需要在项目根目录下，或者package.json文件中配置ESLint的配置。

参考我的Vue项目的ESLint的校验规则：

[code]// .eslintrc.js
// https://eslint.org/docs/user-guide/configuring
module.exports = {
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevent
// ion consider switching to `plugin:vue/strongly-recommended` or
// `plugin:vue/recommended` for stricter rules.
'plugin:vue/essential',
// https://github.com/standard/standard/blob/master/docs/RULES-en.md
'standard'
],
// required to lint *.vue files
plugins: ['vue'],
globals: {
NODE_ENV: false
},
rules: {
// allow async-await
'generator-star-spacing': 'off',
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
// 添加，分号必须
semi: ['error', 'always'],
'no-unexpected-multiline': 'off',
'space-before-function-paren': ['error', 'never'],
// 'quotes': ["error", "double", { "avoidEscape": true }]
quotes: [
'error',
'single',
{
avoidEscape: true
}
]
}
};

参考我的React项目的ESLint的校验规则：

需要安装的插件

[code]npm i -D eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react babel-eslint prettier eslint-config-prettier eslint-config-react-app eslint-plugin-prettier

[code]// .eslintrc.js
module.exports = {
root: true,
parserOptions: {
// 检查 ES6 语法
parser: 'babel-eslint',
},
env: {
browser: true,
},
// extending airbnb config and config derived from eslint-config-prettier
// 这里是 vue
extends: ['react-app', 'prettier'],

// 选择 eslint 插件
plugins: ["react", "jsx-a11y", "import", 'prettier'],

// react
// extends: ['airbnb-base', 'prettier'],
// plugins: ['prettier', 'react'],

// 不需要框架
// extends: ['airbnb-base', 'prettier'],
// plugins: ['prettier'],

// 自定义 eslint 检查规则
rules: {
// 自定义 prettier 规则 (实际上，可配置项非常有限)
'prettier/prettier': [
'error',
{
singleQuote: true,
trailingComma: 'all',
},
],
camelcase: 'off', // 强制驼峰法命名
'no-new': 'off', // 禁止在使用new构造一个实例后不赋值
'space-before-function-paren': 'off', // 函数定义时括号前面不要有空格
'no-plusplus': 'off', // 禁止使用 ++， ——
'max-len': 'off', // 字符串最大长度
'func-names': 'off', // 函数表达式必须有名字
'no-param-reassign': 'off', // 不准给函数入参赋值

// react 如果在项目中文件名后缀是 .js 而不是 .jsx 避免报错
// "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
// react props validation 错误
// "react/prop-types": 0,
},
};

链接：https://www.jianshu.com/p/5df4ea081fcc