Eslint格式化方案
vue通用的Eslint配置
该配置只支持检查语法与修复，不会在编译时控制台抛警告
pnpm i -D eslint eslint-plugin-vueEslint校验的规则，会覆盖extends里的配置. 也可以在此配置plugin的特有规则. 内置规则列表
规则级别：0/off: 关闭规则 1/warn: 警告 2/error：错误
// 规则参见：https://cn.eslint.org/docs/rules/
module.exports = {
root: true,
env: {
browser: true,
node: true
},
parser: 'vue-eslint-parser',
extends: [
'eslint:recommended', // Eslint全部默认规则
'plugin:vue/strongly-recommended'
],
rules: {
'vue/max-attributes-per-line': ['error', {
singleline: {
max: 3
},
multiline: {
max: 1
}
}],
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'template-curly-spacing': ['error', 'always'], // 模板字符串空格
'default-case': 0,
indent: ['error', 2, { SwitchCase: 1 }], // 缩进：2
quotes: ['error', 'single'], // 引号：single单引 double双引
semi: ['error', 'never'], // 结尾分号：never禁止 always必须
'comma-dangle': ['error', 'never'], // 对象拖尾逗号
'no-redeclare': ['error', { builtinGlobals: true }], // 禁止重复对象声明
'no-multi-assign': 0,
'no-restricted-globals': 0,
'space-before-function-paren': 0, // 函数定义时括号前面空格
'one-var': 0, // 允许连续声明
// 'no-undef': 0, // 允许未定义的变量【会使env配置无效】
'linebreak-style': 0, // 检测CRLF/LF检测【默认LF】
'no-extra-boolean-cast': 0, // 允许意外的Boolean值转换
'no-constant-condition': 0, // if语句中禁止常量表达式
'no-prototype-builtins': 0, // 允许使用Object.prototypes内置对象(如：xxx.hasOwnProperty)
'no-regex-spaces': 0, // 允许正则匹配多个空格
'no-unexpected-multiline': 0, // 允许多行表达式
'no-fallthrough': 0, // 允许switch穿透
'no-delete-var': 0, // 允许 delete 删除对象属性
'no-mixed-spaces-and-tabs': 0, // 允许空格tab混用
'no-class-assign': 0, // 允许修改class类型
'no-param-reassign': 0, // 允许对函数params赋值
'max-len': 0, // 允许长行
'func-names': 0, // 允许命名函数
'import/no-unresolved': 0, // 不检测模块not fund
'import/prefer-default-export': 0, // 允许单个导出
'no-const-assign': 1, // 警告：修改const命名的变量
'no-unused-vars': 1, // 警告：已声明未使用
'no-unsafe-negation': 1, // 警告：使用 in / instanceof 关系运算符时，左边表达式请勿使用 ! 否定操作符
'use-isnan': 1, // 警告：使用 isNaN() 检查 NaN
'no-var': 2, // 禁止使用var声明
'no-empty-pattern': 2, // 空解构赋值
eqeqeq: 2, // 必须使用 全等=== 或 非全等 !==
'no-cond-assign': 2, // if语句中禁止赋值
'no-dupe-args': 2, // 禁止function重复参数
'no-dupe-keys': 2, // 禁止object重复key
'no-duplicate-case': 2,
'no-empty': 2, // 禁止空语句块
'no-func-assign': 2, // 禁止重复声明函数
'no-inner-declarations': 2, // 禁止在嵌套的语句块中出现变量或 function 声明
'no-sparse-arrays': 2, // 禁止稀缺数组
'no-unreachable': 2, // 禁止非条件return、throw、continue 和 break 语句后出现代码
'no-unsafe-finally': 2, // 禁止finally出现控制流语句，如：return、throw等，因为这会导致try...catch捕获不到
'valid-typeof': 2, // 强制 typeof 表达式与有效的字符串进行比较
// auto format options
'prefer-const': 0, // 禁用声明自动化
'no-extra-parens': 0, // 允许函数周围出现不明括号
'no-extra-semi': 2, // 禁止不必要的分号
// curly: ['error', 'multi'], // if、else、for、while 语句单行代码时不使用大括号
'dot-notation': 0, // 允许使用点号或方括号来访问对象属性
'dot-location': ['error', 'property'], // 点操作符位置，要求跟随下一行
'no-else-return': 2, // 禁止if中有return后又else
'no-implicit-coercion': [2, { allow: ['!!', '~', '+'] }], // 禁止隐式转换，allow字段内符号允许
'no-trailing-spaces': 1, // 一行结束后面不要有空格
'no-multiple-empty-lines': [1, { max: 1 }], // 空行最多不能超过1行
'no-useless-return': 2,
'wrap-iife': 0, // 允许自调用函数
yoda: 0, // 允许yoda语句
strict: 0, // 允许strict
'no-undef-init': 0, // 允许将变量初始化为undefined
'prefer-promise-reject-errors': 0, // 允许使用非 Error 对象作为 Promise 拒绝的原因
'consistent-return': 0, // 允许函数不使用return
'no-new': 0, // 允许单独new
'no-restricted-syntax': 0, // 允许特定的语法
'no-plusplus': 0,
'import/extensions': 0, // 忽略扩展名
'global-require': 0,
'no-return-assign': 0
}
}vue-cli eslint配置相关依赖
eslint-plugin-vue & vue-eslint-parser
配置列表：https://eslint.vuejs.org/rules/
eslint-plugin-vue: 支持vue文件template和script的代码校验. 定义一系列template的规则，部分规则需依赖vue-eslint-parser解析器解析的特殊AST, 两者搭配使用
vue-eslint-parser: 只解析vue文件中的template内容，不会检测<script>中的js
注意：eslint-plugin-vue本身会下载vue-eslint-parser包，所以不用在项目里再安装
WARNING
由于解析器只有一个, 用了「vue-eslint-parser」就不能用「babel-eslint」. 所以「vue-eslint-parser」的做法是,在解析器选项中,再传入一个解析器选项parser. 从而在内部处理「babel-eslint」, 检测<script>中的js代码. 官方说明
@vue/cli-plugin-eslint
- 给vue-cli-service 提供lint功能
- 在vue.config.js中配置lintOnSave: true(默认). 在开发时保存代码后输出Eslint警告/错误提示在终端. 设置为false则不会提示
// package.json
"scripts": {
"lint": "vue-cli-service lint"
}
// vue.config.js
lintOnSave: true,配置字段说明
parser & parserOptions
parser
将代码转换为ESTree(本质上还是AST)，ESLint会对ESTree进行规则校验
默认parser
ESLint默认的parser(espree)只转换js, 支持ECMAScript高版本需通过parserOptions配置.参见
WARNING
Eslint默认parser只支持已加入ES标准的语法。对于还处在实验性阶段的特性(例如装饰器)需要Bable提供的parser(@babel/eslint-parser)解决
parserOptions配置
该配置会传递给parser. 参见官方
parserOptions: {
parser: 'espree', // 默认parser
ecmaVersion: 2020, // 支持语法
sourceType: 'module', // 支持export、import
ecmaFeatures: {
"jsx": true // 支持jsx语法
}
}babel-eslint&@babel/eslint-parser
Eslint默认解析只支持标准语法，实验性阶段的语法不支持校验.
何时使用?
babel-parser会先转换新特性语法再给Eslint检测. 因此不使用到新特性一般不需要使用该parser(使用该依赖需配置bable)
env
一组预设的全局变量. 参见官方
WARNING
Eslint rules：no-undef(忽略不存在的全局变量)会使env中的配置无效.
'window' is not defined.eslint(no-undef)
extends
提供eslint现有规则的一系列预设. 存在相同规则配置后者覆盖前者
plugins
提供除eslint规定之外额外的规则. 例如eslint-plugin-react就会对react项目做了一些定制的eslint规则
plugins与rules结合是eslint基础能力，extends可以看做是去集成一个个配置方案的最佳实践
// .eslintrc.js
module.exports = {
plugins: [
'eslint-plugin-react'
],
rules: {
'eslint-plugin-react/jsx-boolean-value': 2 // 对于dom标签使用boolean时是否省略
}
}