前言
前端代码规范如今已和eslint密不可分,尤其对于大型项目而言,代码统一规范显得尤为重要!本文主要讲述前端eslint常用配置(vue、react)及vscode自动代码格式化配置,欢迎各路大神评论指正!
正文
1 配置说明由浅入深
1.1 eslint生成配置文件
eslint官方网站以及提供了npm包自动生成不同项目的eslint配置,不论你的代码风格是vue、react还是js、ts都能实现,并且针对不同的选择提供了不同的父级规则模板供选择,这么便利的工具有什么理由不使用呢?盘它就对了!奉上eslint官网链接, :point_left: 快去学习一下吧!
执行
npm init @eslint/config
后按照傻瓜式指引即可
1.2 推荐公用校验规则
eslint官方以及模板提供的代码校验规则已经涵盖了大多数场景,但是仍不完善,如单双引号问题、单行最大字符数控制以及末尾分号控制等,需要编写独立校验规则覆盖已有规则,现奉献本人整理的常用规则如下:
js
const isDevelopment = true
// https://eslint.org/docs/latest/rules
const rules = {
// 允许单文件没有默认导出
// https://github.com/import-js/eslint-plugin-import/blob/v2.29.1/docs/rules/prefer-default-export.md
'import/prefer-default-export': [
'off', // 'off' | 'warn' | 'error'
{ target: 'any' }, // default is "single", 'single' | 'any'
],
// 换行符为windows
// https://eslint.org/docs/latest/rules/linebreak-style#options
'linebreak-style': ['off', 'windows'], // unix \n windows \n\r vscode 右下角 End of line sequece 可切换换行符
// 禁止结尾分号
// https://eslint.org/docs/latest/rules/semi#options
semi: ['error', 'never'],
// 不允许空代码块,允许空catch
// https://eslint.org/docs/latest/rules/no-empty
'no-empty': ['error', { allowEmptyCatch: true }],
// 开发模式下允许console生产不允许
// https://eslint.org/docs/latest/rules/no-console
'no-console': [isDevelopment ? 'off' : 'error'], // off / error { allow: ["warn", "error"] }
// 箭头函数单个参数可以没有括号
// https://eslint.org/docs/latest/rules/arrow-parens#rule-details
'arrow-parens': ['error', 'as-needed'],
// 单行不能超过80个字符
// https://eslint.org/docs/latest/rules/max-len#rule-details
'max-len': ['error', { code: 80 }],
}
module.exports = rules
1.3 添加ts校验规则
参照大神整理的
1.4 添加vue校验规则
安装相关依赖
npm install --save-dev eslint-plugin-vue
(1)vue2
json
// 在.eslintrc.js中加入
"extends": [
...
"plugin:vue/essential"
],
"plugins": [
"vue"
],
(1)vue3
json
// 在.eslintrc.js中加入
"extends": [
...
"plugin:vue/vue3-essential"
],
"plugins": [
"vue"
],
1.5 添加react校验规则
安装相关依赖
npm install --save-dev eslint-plugin-react
json
// 在.eslintrc.js中加入
"extends": [
...
"plugin:react/recommended"
],
"plugins": [
"react"
],
2 vscode保存格式化配置
以上对校验规则以及如何配置作了详细说明,本节介绍如何配置vscode按照改规则进行代码格式化。
(1)安装vscode指定插件 eslint
(2)修改vscode用户配置如下:
erlang
...
"eslint.format.enable": true,
"editor.defaultFormatter": "dbaeumer.vscode-eslint",
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.validate": [
"javascript",
"javescriptreact",
"vue",
"html"
]
...
(3)重启vscode应用配置,编写代码测试效果
注意:如果遇到eslint某些代码无法被格式化的情况,可采用其他格式化工具如vetur、prettier等进行格式化再保存。
3 设置程序开发模式下运行eslint校验
在开发模式下进行eslint校验,可以有效的规避大多数代码不规范问题。与git hook不同,开发模式下可实时对不规范的代码进行反馈,保证代码整体质量。以webpack4+vue2.x为例,需要修改配置文件如下:
js
// webpack.config.js
...
module: {
rules: [
{
test: /\.(js|vue)$/,
laoder: 'eslint-loader',
enforece: 'pre',
include: [path.resolve('src')],
options: [
formatter: require('eslint-friendly-formatter')
]
}
]
}
...
vue3采用eslint-plugin-vue,具体配置参照官方网站