VSCode配合ESLint⾃动修复格式化
开发Vue或者React的项⽬的时候，我们经常⽤到ESLint进⾏代码的校验，当代码出现不符合规范的格式的时候，ESLint会在控制台提⽰相关的异常信息。
ESLint极⼤的提⾼了团队代码的⼀致性和规范性，接下来⽼马介绍⼀下我的VSCode的相关配置和插件实现保存代码的时候，根据ESLint的配置⾃动修复代码和格式化。
VSCode安装插件
配置VSCode的⽤户配置
{
...
"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)
"able": false,
"prettier.singleQuote": true,
// 点击保存时，根据 eslint 规则⾃定修复，同时集成 prettier 到 eslint 中
"prettier.eslintIntegration": true,
...
}
注意事项
如果需要启动ESLint的⾃动修复，需要在项⽬根⽬录下，或者package.json⽂件中配置ESLint的配置。
参考我的Vue项⽬的ESLint的校验规则：
// .eslintrc.js
// /docs/user-guide/configuring
root: true,
parserOptions: {
parser: 'babel-eslint'
},
env: {
browser: true
},
extends: [
// github/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',
// github/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': v.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的校验规则：
需要安装的插件
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 // .eslintrc.js
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',
vscode代码规范
{
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,
},
};

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。