Vue 项目eslint 配置编程风格（VScode）
Vue 项目eslint 配置编程风格（VScode）
观点：程序运行结果有对错，代码从可读性、扩展性、复用性的标准评判也可以读出来好坏，但是编程风格真的又对错吗？尤其是JS这门脚本语言，在不同领域都有应用，它先天性的原因编程风格有更多的发挥，到底谁写的对错呢，比如单引号还是双引号，加不加分号这种问题。我认为风格没有好坏，一个团队统一即可，保持代码简洁，漂亮，统一。
Vue 有关的格式化工具
1.ESLint（官网）
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外： ESLint 使用 Espree 解析 JavaScript。 ESLint 使用 AST 去分析代码中的模式 ESLint是完全插件化的。 每一个规则都是一个插件并且你可以在运行时添加更多的规则。
JS 做为一种动态语言，写起来可以随心所欲，bug 遍野，但是通过合适的规则来约束，能让我们的代码更健壮，工程更可靠。 ESLint 可以自动检测配置解决这些问题。
VSCode 保存修复配置
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}2.Vetur
最初装的时候是为了显示Vue高亮和代码提示，其实他还有强大的Format能力。
3.Prettier
Prettier的中文意思是“漂亮的、机灵的”，也是一个流行的代码格式化工具的名称，它能够解析代码，使用你自己设定的规则来重新打印出格式规范的代码。
Prettier具有以下几个有优点：
可配置化 支持多种语言 集成多数的编辑器 简洁的配置项
很多项目都会使用ESLint来提高代码的质量，有两种方式能够集成Prettier和ESLint，你也可以单独或同时使用它们。使用ESLint+Prettier主要是让ESLint使用Prettier规则.
**总结：**三种都可以格式化，但是又有互相没有的部分，所以可以一起共同使用。但是同时在VScode配置的时候注意冲突问题，保存自动格式化时候很容易冲突。解决冲突文章
Vue新项目配置ESLint
我们在使用Vue UI 创建项目得时候,选择Linter/Formatter的时候我们有如下选项：
- ESLint with error prevention only --仅错误预防
- ESLint + Airbnb config --Airbnb配置
- ESLint + Standard config --标准配置
- ESLint + Prettier --Prettier风格规则
Vue老项目配置ESLint
你可以使用 npm 安装 ESLint：
$ npm install eslint --save-dev紧接着你应该设置一个配置文件：
$ ./node_modules/.bin/eslint --init然后按照可选一步一步配置：
安装之后你就可以看到目录里面有eslint 的配置文件：
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:vue/essential',
'standard'
],
parserOptions: {
ecmaVersion: 12,
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}这里基本上eslint 就可以在项目里生效了，还需要自己风格配置和工具配置。
按照自己选项安装之后，可以发现安装了如下依赖：
+ eslint@7.12.1
+ eslint-plugin-node@11.1.0
+ eslint-config-standard@16.0.0 //对应配置项的extends：'standard'
+ eslint-plugin-import@2.22.1
+ eslint-plugin-vue@7.1.0 //对应配置项的extends：plugin:vue/essential
+ eslint-plugin-promise@4.2.1除了 eslint-config-standard@16.0.0还有一个eslint-plugin-vue@7.1.0，
添加这个插件可以检查.vue 文件的 template ，同时该插件提供多种规则标准集关于vue3和vue2。建议使用：Recommended，可以规范template 标签。
ESLint常用配置说明
一个环境定义了一组预定义的全局变量。
配置项 | 说明 |
|---|---|
env | 运行环境 |
一个配置文件可以被基础配置中的已启用的规则继承。
配置项 | 说明 |
|---|---|
extends | 继承规则，可继承规则集合 |
ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器
配置项 | 说明 |
|---|---|
parserOptions | 配置制定解析器 |
ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
配置项 | 说明 |
|---|---|
plugins | 插件 |
一个环境定义了一组预定义的全局变量。
配置项 | 说明 |
|---|---|
Processor | 插件可以提供处理器 |
ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
“off” 或 0 - 关闭规则 “warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出) “error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
配置项 | 说明 |
|---|---|
Rules | 规则 |
当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
配置项 | 说明 |
|---|---|
globals | 全局变量 |
ESLint 规则说明
我们可以根据规则配置，除了extends 规则集之外的规则补充。
具体规则描述查看官网
Rules配置最佳实践：
/*
* @Description:
* @Autor: ZY
* @Date: 2020-09-22 11:09:46
* @LastEditors: ZY
* @LastEditTime: 2020-10-24 18:14:07
*/
module.exports = {
root: true,
env: {
browser: true,
node: true
},
'extends': [
'plugin:vue/strongly-recommended', //vue 插件推荐规则
'@vue/standard'
],
rules: {
'eqeqeq':0,
'no-console': 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'generator-star-spacing': 'off',//强制 generator 函数中 * 号周围使用一致的空格
'no-mixed-operators': 0,//禁止混合使用不同的操作符
'vue/max-attributes-per-line': [ //属性换行，和单行多行最大个数
2,
{
'singleline': 5,
'multiline': {
'max': 1,
'allowFirstLine': false
}
}
],
'vue/attribute-hyphenation': 0, //属性推荐-间隔，避免驼峰
'vue/html-self-closing': 0,
'vue/component-name-in-template-casing': 0,
'vue/html-closing-bracket-spacing': 0,
'vue/singleline-html-element-content-newline': 0,
'vue/no-unused-components': 0,
'vue/multiline-html-element-content-newline': 0,
'vue/no-use-v-if-with-v-for': 0,
'vue/html-closing-bracket-newline': 0,
'vue/no-parsing-error': 0,
'no-tabs': 0,
'quotes': [
2,
'single',
{
'avoidEscape': true,
'allowTemplateLiterals': true
}
],
'semi': [
2,
'never',
{
'beforeStatementContinuationChars': 'never'
}
],
'no-delete-var': 2,
'prefer-const': [
2,
{
'ignoreReadBeforeAssign': false
}
]
},
parserOptions: {
parser: 'babel-eslint'
},
overrides: [
{
files: [
'**/__tests__/*.{j,t}s?(x)',
'**/tests/unit/**/*.spec.{j,t}s?(x)'
],
env: {
jest: true
}
}
]
}我们可以使用overrides 去禁止一些规则，特定处理一些文件。
忽略规则
/* eslint-disable */
代码块
/* eslint-enable */一行代码 // eslint-disable-line// eslint-disable-next-line
下一行的代码添加 .eslintignore 文件，在里面配置忽略路径即可。
腾讯云开发者
