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 文件，在里面配置忽略路径即可。