前端Vue项目配置ESLint规范检查

chaozhi
2,978 阅读19分钟

1. 背景

前端项目中为什么要使用eslint做代码规范检查？

如果你现在用的前端框架Vue2.x，则前端代码规范检查主要集中在vue文件、js文件 / ts文件。自然而然会选择ESLint做代码规范检查。

ESLint 是业界有名的前端代码规范检查工具，在ECMAScript/JavaScript代码中识别和报告模式匹配，它的目标是保证代码的一致性和避免基本的语法错误，从而最终达到前端项目代码规范化的目的。其不仅可以对js文件进行规范检查，还支持jsx文件和vue文件，具备高可扩展性。

通过设置ESLint规范检查作为第一道门槛消除不规范代码，带来的好处是：

1、有效降低前端代码打包编译后在浏览器端运行时报错率，提升系统可靠性。

2、节省代码mr时人工codeReview代码的时间成本。

2. 准备工作

注意：如果想直接实践配置ESLint规范检查，可跳到”3. 配置步骤“

2.1 ESLint配置参数说明

2.1.1 env（环境）配置

【必须】

  • browser - 浏览器环境中的全局变量。
  • node - Node.js 全局变量和 Node.js 作用域。如果vue项目需要用到process.env.NODE_ENV，就需要开启这一选项。
  • esxxx - 启用除了 modules 以外的所有 ECMAScript xxx 特性。具体如下所示。

以下esxxx配置任选一项：（与"parserOptions（解析器选项）配置"中的ecmaVersion必须对应，这里推荐使用es6至es2021均可以）

  • es6 - 启用除了 modules 以外的所有 ECMAScript 6 特性（该选项会自动设置 ecmaVersion 解析器选项为 6）。
  • es2016 - 添加所有ECMAScript 2016全局变量，以及自动设置 ecmaVersion 解析器选项为7。
  • es2017 - 添加所有ECMAScript 2017全局变量，以及自动设置 ecmaVersion 解析器选项为8。
  • es2018 - 添加所有ECMAScript 2018全局变量，以及自动设置 ecmaVersion 解析器选项为9。
  • es2019 - 添加所有ECMAScript 2019全局变量，以及自动设置 ecmaVersion 解析器选项为10。
  • es2020 - 添加所有ECMAScript 2020全局变量，以及自动设置 ecmaVersion 解析器选项为11。
  • es2021 - 添加所有ECMAScript 2021全局变量，以及自动设置 ecmaVersion 解析器选项为12。
  • es2022 - 添加所有ECMAScript 2022全局变量，以及自动设置 ecmaVersion 解析器选项为13。

【可选】

  • commonjs - CommonJS 全局变量和 CommonJS 作用域 (用于 Browserify/WebPack 打包的只在浏览器中运行的代码)。
  • shared-node-browser - Node.js 和 Browser 通用全局变量。
  • worker - Web Workers 全局变量。
  • amd - 将 require() 和 define() 定义为像 amd 一样的全局变量。
  • mocha - 添加所有的 Mocha 测试全局变量。
  • jasmine - 添加所有的 Jasmine 版本 1.3 和 2.0 的测试全局变量。
  • jest - Jest 全局变量。
  • phantomjs - PhantomJS 全局变量。
  • protractor - Protractor 全局变量。
  • qunit - QUnit 全局变量。
  • jquery - jQuery 全局变量。
  • prototypejs - Prototype.js 全局变量。
  • shelljs - ShellJS 全局变量。
  • meteor - Meteor 全局变量。
  • mongo - MongoDB 全局变量。
  • applescript - AppleScript 全局变量。
  • nashorn - Java 8 Nashorn 全局变量。
  • serviceworker - Service Worker 全局变量。
  • atomtest - Atom 测试全局变量。
  • embertest - Ember 测试全局变量。
  • webextensions - WebExtensions 全局变量。
  • greasemonkey - GreaseMonkey 全局变量。

使用方式

.eslintrc.js：

{ 
    env: { 
        browser: true, 
        node: true, 
        es2021: true
    }
}

注释方式：

/* eslint-env browser, node es2021 */

2.1.2 globals（全局变量）配置

如果不设置globals，在访问当前源文件内未定义的变量时，no-undef 规则（ "extends": "eslint:recommended" 属性启用了此规则，后面章节会有介绍）将发出警告。推荐在ESLint中定义全局变量，这样 ESLint 就不会发出警告了。

【可选】

对该选项不做强制，用户根据自身需要选择配置。

例如：在大多数ES2015及其以上版本的全局变量可用但 Promise 不可用的环境中，你可以使用以下配置：

.eslintrc.js：

{ 
    globals: { 
        Promise: 'off',
        var1: 'writable', 
        var2: 'readonly' 
    } 
}

注释方式：

/* global var1:writable, var2:readonly, Promise:off */

配置值解释：

  • writable - 允许重写变量。（注意：由于历史原因，布尔值 true 和字符串值 "writeable" 等价于 "writable"，不建议使用旧值。）
  • readonly - 变量只读，不允许重写。（注意：由于历史原因，布尔值 false 和字符串值 "readable" 等价于 "readonly"，不建议使用旧值。）
  • off - 禁用该全局变量。

注意：要启用no-global-assign规则来禁止对只读的全局变量进行修改。

2.1.3 parserOptions（解析器选项）配置

ESLint 允许指定你想要支持的 JavaScript 语言选项。默认情况下，**ESLint 支持 ECMAScript 5 语法。**你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

注意：支持 JSX 语法并不等同于支持 React。React 对 ESLint 无法识别的JSX语法应用特定的语义。如果你正在使用 React 并且想要 React 语义支持，建议使用 eslint-plugin-react。（这里项目以vue为准，暂时不对React展开）

【必须】

  • ecmaVersion - 默认是3, 5，取值规则如下：（与"env（环境）配置****"中的esxxx必须对应，这里推荐使用数字6至12均可以）
    • 数字：6, 7, 8, 9, 10, 11, 12, 13。
    • 年份：2015 (同 6), 2016 (同 7), 2017 (同 8), 2018 (同 9), 2019 (同 10), 2020 (同 11), 2021 (同 12), or 2022 (同 13) 。

推荐取值：6至12均可以，指定当前最新的ECMAScript 6版本到ECMAScript 2021版本。

  • sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ES Modules)。

**取值："module"，**可解析ES Modules。

  • parser - parserOptions中的解析器，与"parser（解析器）配置"可共同起作用，定义同"parser（解析器）配置"。

取值：

javascript下使用"babel-eslint"，一个对Babel解析器的包装，使其能够与ESLint兼容。

需安装依赖：（eslint推荐版本7.32.0；babel-eslint推荐版本10.1.0）

npm install eslint@7.32.0 babel-eslint@10.1.0 --save-dev

**typescript下使用"@typescript-eslint/parser"，**ESLint 专门解析 TypeScript 的解析器。

需安装依赖：（eslint推荐版本7.32.0；typescript推荐版本4.5.5；babel-eslint推荐版本5.12.0）

npm install eslint@7.32.0 typescript@4.5.5 @typescript-eslint/parser@5.12.0 --save-dev

【可选】

  • extraFileExtensions**（typescript中必需）** - 添加一个或多个额外的文件扩展名，这些扩展文件应该能够被typescript处理。默认值是undefined，可设置为数组，如：[".ts", ".tsx", ".js", ".jsx"]。

**取值：[".vue"]，**配置 extraFileExtensions 字段为.vue，可以让@typescript-eslint/parser将.vue后缀的文件视为 ts 代码文件进行检查，从而检查.vue 文件中的script标签。

  • ecmaFeatures - 这是个对象，表示想使用的额外的语言特性，取值如下（如无必要均设置为false或者不设置）：
    • globalReturn - 允许在全局作用域下使用 return 语句。
    • impliedStrict - 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)。
    • jsx - 启用 JSX，react才需要。

2.1.4 parser（解析器）配置

ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

  1. 它必须是一个 Node 模块，可以从它出现的配置文件中加载。通常，这意味着应该使用 npm 单独安装解析器包。
  2. 它必须符合 parser interface。

【必须】

  • vue-eslint-parser - 如果需要eslint对vue文件进行规范检查，就需要安装eslint-plugin-vue 插件，而eslint-plugin-vue 插件依赖于 vue-eslint-parser解析器。vue-eslint-parser解析器只负责解析和检测.vue 中template（html部分）标签内的内容。

需要安装依赖：（eslint-plugin-vue推荐版本8.5.0，vue-eslint-parser推荐版本8.3.0）

npm install --save-dev eslint-plugin-vue@8.5.0 vue-eslint-parser@8.3.0

【parserOptions + parser】使用方式

.eslintrc.js：

// javascript 
{ 
    parser: 'vue-eslint-parser', // 解析 .vue 文件 
    parserOptions: { 
        parser: 'babel-eslint', 
        ecmaVersion: 12, 
        sourceType: 'module', 
    }, 
} 
// typescript 
{    
    parser: 'vue-eslint-parser', // 解析 .vue 文件 
    parserOptions: { 
        parser: '@typescript-eslint/parser', // 解析 .ts 文件 
        ecmaVersion: 12, 
        sourceType: 'module', 
        extraFileExtensions: ['.vue'], // 提供@typescript-eslint/parser解析 .vue 文件中的<script> 
    }, 
}

Q：parserOptions.parser和parser有什么区别？

A：由于parser（解析器）配置只能配置1个，用了vue-eslint-parser就不能用babel-eslint（@typescript-eslint/parser），而我们既要对vue文件进行规范检查，又要对js文件（ts文件）进行检查，所以就采取【parser: "vue-eslint-parser" + parserOptions.parser: "babel-eslint" / "@typescript-eslint/parser"】配合使用的方式。

其中，vue-eslint-parser解析器只负责解析和检测.vue 中template（html部分）标签的内容，babel-eslint（@typescript-eslint/parser）解析器则负责解析和检测script标签中javascript（typescript）内容。

2.1.5 plugins（插件）配置

plugin插件主要是为eslint新增一些检查规则，ESLint 虽然可以定义很多的 rules（规则），只是检查js / ts 语法。如果需要检查 Vue 中的 template 就束手无策了。

引入插件的目的就是为了增强 ESLint 的检查能力和范围，简单的说像vue 这类框架会有自己的规则，这类规则需要去安装额外的插件。

plugins 关键字来存放插件名字的列表，插件名称可以省略 eslint-plugin- 前缀。

【必须】

  • "vue" - 安装并使用eslint-plugin-vue插件。

使用方式

.eslintrc.js：

{ plugins: [ 'vue', ], }

2.1.6 extends（继承）配置

从零开始配置eslint规则是一件麻烦的事，但是可以引用其他已经配置好的完整规则文件。extends就是继承引用其他规则文件的意思。

extends 配置按 js > ts > Vue > Prettier(可选) 的顺序，后配置的规则会覆盖先配置的。

比如：eslint-plugin-vue 除了新增了一些检查规则，也对如 camelcase 之类的通用规则有特殊的处理，如果将 js / ts 配置在 vue 之后就会把 vue 插件中的特定规则给覆盖了，prettier（可选）同理。

  • plugin:vue/xxx - vue文件必需的规范检查规则集，上述的eslint-config-tencent只能检查js / ts 语法，所以还需要检查vue的规则集。

以下plugin:vue/xxx配置任选一项：（开启"标准模式" - plugin:vue/essential；开启"严格模式" - plugin:vue/recommended）

  • plugin:vue/base - 基础的vue规则集。详见：eslint.vuejs.org/rules/ 中的"Base Rules"。
  • plugin:vue/essential - 预防错误（用于 Vue 2.x）的vue规则集。详见：eslint.vuejs.org/rules/ 中的"Base Rules"和"Priority A: Essential"。
  • plugin:vue/strongly-recommended - 强烈推荐，提高可读性（用于 Vue 2.x）的vue规则集。详见：eslint.vuejs.org/rules/ 中的"Base Rules"、"Priority A: Essential"和"Priority B: Strongly Recommended"。
  • plugin:vue/recommended - 推荐的，最小化任意选择和认知开销（用于 Vue 2.x）的vue规则集。详见：eslint.vuejs.org/rules/ 中的"Base Rules"、"Priority A: Essential"、"Priority B: Strongly Recommended"和"Priority C: Recommended"（涵盖以上3类规则集，是最全面的vue规范检查规则集）。

说明：线上测试vue规则集：ota-meshi.github.io/eslint-plug…

使用方式

.eslintrc.js：

// javascript 
{
    extends: [ 
        // 如果需要开启严格规范标准，可替换成 plugin:vue/recommended 
        'plugin:vue/essential', 
    ], 
}
// typescript 
{ 
    extends: [
        // 如果需要开启严格规范标准，可替换成 plugin:vue/recommended 
        'plugin:vue/essential', 
    ], 
}

2.1.7 rules（规则）配置

ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则值设置为以下3类之一：

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

rules中单独配置的规则会覆盖"extends（继承）配置"中规则集相应的规则。

【必须】

  • no-console - 禁用console.log。开启"标准模式"下设置为"warn" 或 1（警告提交代码时遗留console.log，但不影响提交）；开启"严格模式"下设置为"error" 或 2（禁止提交代码时遗留console.log）。
  • no-debugger - 禁用debugger。设置为"error" 或 2，使用错误级别的错误：error。禁止提交代码时遗留debugger。
  • no-alert - 禁用alert、confirm和prompt。设置为"error" 或 2，使用错误级别的错误：error。禁止提交代码时遗留alert、confirm和prompt。
  • vue/multi-word-component-names - vue中组件名称限制必须是多个单词。设置为"off" 或 0，关闭该规则，因为vue中部分组件名称可能是单个单词的。

【可选】

  • @typescript-eslint/no-explicit-any - typescript中需要，类型为any时告警。设置为"off" 或 0，关闭该规则，允许部分场景下设置any类型。

其他规则详见：eslint.org/docs/rules/ 视项目情况进行设置。

使用方式

.eslintrc.js：

{ 
    rules: { 
        'no-console': 1, 
        'no-debugger': 2, 
        'no-alert': 2, 
        // 关闭组件名称为多个单词的限制 
        'vue/multi-word-component-names': 0, 
        // typescript中才需要，关闭any类型的警告 
        '@typescript-eslint/no-explicit-any': 0, 
    }, 
}

注释方式：

/* eslint eqeqeq: "off", curly: "error" */ 
// 或者使用数字定义 
/* eslint eqeqeq: 0, curly: 2 */ 

// 如果一个规则有额外的选项，你可以使用数组字面量指定它们：这条注释为规则 quotes 指定了 “double”选项。数组的第一项总是规则的严重程度（数字或字符串） 
/* eslint quotes: ["error", "double"], curly: 2 */ 

// 该注释放在文件顶部，eslint不会检查整个文件 
/* eslint-disable */ 

// 重新启用eslint检查 
/* eslint-enable */
 
// 只禁止某一个或多个规则 
/* eslint-disable eqeqeq */ 

// 下一行禁止eslint检查 
/* eslint-disable-next-line */ 

// 当前行禁止eslint检查 
// eslint-disable-line

ESLint配置参数介绍完，下面介绍具体的配置步骤。

3. 配置步骤

如何进行eslint规范检查？

  • 初始化配置文件.eslintrc.js。
  • 配置ESLint规范检查模板与安装相关依赖。

如何进行eslint规范检查？

  • 配置eslint规范检查命令。
  • husky配置gitHooks的方式触发ESLint规范检查。

3.1 初始化配置文件.eslintrc.js

手动创建.eslintrc.js文件。

Q：为什么使用.eslintrc.js而不使用其他.eslintrc.*文件？

A：ESlint的配置文件前缀是.eslintrc.*，配置文件会自动被识别并依据配置内容进行代码检查。如果同时存在多种配置文件，他们从高到低的优先级以下述顺序依次覆盖：

.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

所以我们优先选择.eslintrc.js文件。

Q：如何在不同目录下采用不同的ESLint规则？

A：当使用.eslintrc.*和package.json文件的配置时，你可以利用层叠配置。例如，假如你有以下结构：

your-project
 ├── .eslintrc 
 ├── lib 
 │    └── source.js 
 └── tests 
     ├── .eslintrc 
     └── test.js

层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级，然后才是父目录里的配置文件，等等。当你在这个项目中允许 ESLint 时，lib/ 下面的所有文件将使用项目根目录里的 .eslintrc 文件作为它的配置文件。当 ESLint 遍历到 test/ 目录，your-project/.eslintrc 之外，它还会用到 your-project/tests/.eslintrc。所以 your-project/tests/test.js 是基于它的目录层次结构中的两个.eslintrc 文件的组合，并且离的最近的一个优先。通过这种方式，你可以有项目级 ESLint 设置，也有覆盖特定目录的 ESLint 设置。

如果同一目录下 .eslintrc 和 package.json 同时存在，.eslintrc 优先级高会被使用，package.json 文件将不会被使用。

如果你想让所有的目录都遵循一套ESLint规范检查，可以在你项目根目录下的package.json文件或者.eslintrc.*文件里的eslintConfig字段下设置**"root": true。ESLint一旦发现配置文件中有"root": true，它就会停止在父级目录中寻找**。

例如：projectA 的 lib/ 目录下的 .eslintrc 文件中设置了 "root": true。这种情况下，当检测 main.js 时，lib/ 下的配置将会被使用，projectA/ 下的 .eslintrc 将不会被使用。

home 
└── user 
     ├── .eslintrc <- Always skipped if other configs present 
     └── projectA 
        ├── .eslintrc <- Not used 
        └── lib 
        ├── .eslintrc <- { "root": true } 
        └── main.js

3.2 配置ESLint规范检查模板与安装相关依赖

注意：代码中切勿加：/* eslint-disable */ ，否则会忽略eslint规范检查。

如果部分代码需要忽略，使用方式如下：

/* eslint-disable */

需要忽略eslint规范检查的代码

......

/* eslint-enable */

3.2.1 javascript模板与安装依赖

module.exports = {  // 所有目录下文件统一遵循根目录下的.eslintrc.js  root: true,  // 环境  env: {    node: true,    browser: true,    // 与 ecmaVersion: 12 对应    es2021: true,  },  globals: {},  // 继承相关规则集  extends: [    '@tencent/eslint-config-tencent',    // 如果需要开启严格规范标准，可替换成 plugin:vue/recommended    'plugin:vue/essential',    // prettier美化代码；如果需要开启严格规范标准，可放开注释    // '@tencent/eslint-config-tencent/prettier',  ],  // 插件，vue项目默认填vue  plugins: [    'vue',  ],  // 规则  rules: {    // 如果需要开启严格规范标准，可替换成 2（触发gitHooks提交代码时如果遗留console.log会报错）    'no-console': 1,    // 触发gitHooks提交代码时如果遗留debugger会报错    'no-debugger': 2,    // 触发gitHooks提交代码时如果遗留alert/confirm/prompt会报错    'no-alert': 2,    // 关闭组件名称为多个单词的限制    'vue/multi-word-component-names': 0,  },  // 解析器  parser: 'vue-eslint-parser', // 解析 .vue 文件  // 解析器选项  parserOptions: {    parser: 'babel-eslint',    ecmaVersion: 12, // 与 es2021: true 对应    sourceType: 'module',  },};

npm install eslint@7.32.0 babel-eslint@10.1.0 eslint-plugin-vue@8.5.0 vue-eslint-parser@8.3.0 @tencent/eslint-config-tencent@0.16.1 eslint-plugin-import@2.25.4 --save-dev

3.2.2 typescript模板与安装依赖

module.exports = {  // 所有目录下文件统一遵循根目录下的.eslintrc.js  root: true,  // 环境  env: {    node: true,    browser: true,    // 与 ecmaVersion: 12 对应    es2021: true,  },  globals: {},  // 继承相关规则集  extends: [    '@tencent/eslint-config-tencent',    '@tencent/eslint-config-tencent/ts',    // 如果需要开启严格规范标准，可替换成 plugin:vue/recommended    'plugin:vue/essential',    // prettier美化代码；如果需要开启严格规范标准，可放开注释    // '@tencent/eslint-config-tencent/prettier',  ],  // 插件，vue项目默认填vue  plugins: [    'vue',  ],  // 规则  rules: {    // 如果需要开启严格规范标准，可替换成 2（触发gitHooks提交代码时如果遗留console.log会报错）    'no-console': 1,    // 触发gitHooks提交代码时如果遗留debugger会报错    'no-debugger': 2,    // 触发gitHooks提交代码时如果遗留alert/confirm/prompt会报错    'no-alert': 2,    // 关闭组件名称为多个单词的限制    'vue/multi-word-component-names': 0,    // 关闭any类型的警告    '@typescript-eslint/no-explicit-any': 0,  },  // 解析器  parser: 'vue-eslint-parser', // 解析 .vue 文件  // 解析器选项  parserOptions: {    parser: '@typescript-eslint/parser', // 解析 .ts 文件    ecmaVersion: 12,    sourceType: 'module',    extraFileExtensions: ['.vue'], // 提供@typescript-eslint/parser解析 .vue 文件中的<script>  },};

npm install eslint@7.32.0 typescript@4.5.5 @typescript-eslint/parser@5.12.0 eslint-plugin-vue@8.5.0 vue-eslint-parser@8.3.0 @tencent/eslint-config-tencent@0.16.1 eslint-plugin-import@2.25.4 @typescript-eslint/eslint-plugin@5.12.0 --save-dev

3.3 配置ESLint规范检查命令

3.3.1 vue-cli脚手架创建的项目

package.json的script中添加lint命令（仅检查src目录下的文件规范，并进行自动修复。如果需要检查其他目录，追加在后面）

npm set-script lint "vue-cli-service lint src"

注意：该命令会自动修复errors 和 warnings，如果不想自动修复，可以加上参数：--no-fix: 不会修复 errors 和 warnings。

3.3.2 其他项目

package.json的script中添加lint命令（仅检查src目录下的文件规范，并进行自动修复。如果需要检查其他目录，追加在后面）

3.4 husky配置gitHooks的方式触发ESLint规范检查

3.4.1 前端业界常用gitHooks方案选型对比

3.4.2 如何使用husky?（特指husky版本>=6.0.0）

安装husky

npm install husky@7.0.0 --save-dev

package.json的script中添加prepare命令并执行它

npm set-script prepare "husky install";tnpm run prepare

配置pre-commit git hooks，并指定其触发时执行 tnpm run lint

npx husky add .husky/pre-commit "#commit之前触发eslint规范检查";echo "tnpm run lint" >> .husky/pre-commit

配置commit-msg git hooks，并指定其触发时执行 npx --no-install commitlint --edit "$1"

npx husky add .husky/commit-msg "#校验commit时添加的备注信息是否符合规范;--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包";echo 'npx --no-install commitlint --edit "$1"' >> .husky/commit-msg

注意：这里添加了两个gitHooks，分别作用于commit前的代码检查 和 判断commit添加的备注信息是否合规。

常见错误：

1、执行git commit报错如下：

提示缺少commitlint.config.js文件，需要安装依赖并配置，步骤如下：

安装commitlint相关依赖：

npm install --save-dev @commitlint/cli @commitlint/config-conventional

commitlint.config.js

module.exports = {  extends: ["@commitlint/config-conventional"]};

这时再执行git commit就生效了。

2、执行git commit报错如下：.husky/pre-commit: Line 5 tnpm: command not found

         这是因为SourceTree找不到husky钩子中需要使用的命令。解决方法：

1）找到tnpm所在路径：

$ where tnpm 
/usr/local/bin/tnpm

2）自动创建文件并添加路径：

echo 'export PATH="/usr/local/bin/:$PATH"' >> ~/.huskyrc

4. 其他说明

4.1 使用.eslintignore文件过滤无需规范检查的目录或文件

对于一些公共的js / ts、测试脚本或者是特定目录下的文件习惯上是不需要校验的，因此可以在项目根目录通过创建一个.eslintignore文件来配置，告诉 ESLint 校验的时候忽略它们：

public/ 
src/main.js

除了 .eslintignore 中指定的文件或目录，ESLint 总是忽略 /node_modules/ 和 /bower_components/ 中的文件。

因此对于一些目前解决不了的规则报错，但是如果又急于打包上线，在不影响运行的情况下，我们就可以利用 .eslintignore 文件将其暂时忽略。

4.2 使用Prettier

参考文档：《ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验》- “让 Prettier 管控代码风格” 部分内容

4.2.1 Prettier是什么？

Prettier是一种代码格式化工具，支持格式有：

  • JavaScript（包括实验中的特性）
  • JSX
  • Vue
  • TypeScript
  • CSS、Less、SCSS
  • HTML
  • JSON
  • Markdown

以及还有一些其他类型的文件。

4.2.2 Prettier 对比 ESLint

ESLint 负责对代码的校验功能，并且主要提供 2 类规则：

  • 检查格式化的规则
  • 检查代码质量的规则

说到底 ESLint 就是通过一条条的规则去限制代码的规范，但是这些规则毕竟是有限的，而且更重要的是这些规则的重点并不在代码风格上，所以单凭 ESLint 并不能完全的统一代码风格。

所以就需要引入Prettier，Prettier只管代码格式化，不管代码质量。

4.2.3 如何配置 Prettier？

# 安装依赖包：（prettier推荐版本2.6.1，eslint-plugin-prettier推荐版本4.0.0）tnpm install prettier@2.6.1 eslint-plugin-prettier@4.0.0 --save-dev # 新建 .prettierrc.jsecho module.exports = {} > .prettierrc.js # 新建 .prettierignoreecho > .prettierignore # .eslintrc.js的extends增加prettier（注意prettier放在最后）extends: [   ...,   '@tencent/eslint-config-tencent/prettier',],

Prettier 支持可以配置参数不多，总共才 21 个，详见所有参数说明：prettier options。所有参数都有默认值，如果需要单独对某些配置进行设置，需要修改.prettierrc.js文件：

module.exports = {    printWidth: 80,                    //（默认值）单行代码超出 80 个字符自动换行    tabWidth: 2,                       //（默认值）一个 tab 键缩进相当于 2 个空格    useTabs: true,                     // 行缩进使用 tab 键代替空格    semi: false,                       //（默认值）语句的末尾加上分号    singleQuote: true,                 // 使用单引号    quoteProps: 'as-needed',           //（默认值）仅仅当必须的时候才会加上双引号    jsxSingleQuote: true,              // 在 JSX 中使用单引号    trailingComma: 'all',              // 不用在多行的逗号分隔的句法结构的最后一行的末尾加上逗号    bracketSpacing: true,              //（默认值）在括号和对象的文字之间加上一个空格    jsxBracketSameLine: true,          // 把 > 符号放在多行的 JSX 元素的最后一行    arrowParens: 'avoid',              // 当箭头函数中只有一个参数的时候可以忽略括弧    htmlWhitespaceSensitivity: 'ignore', // vue template 中的结束标签结尾尖括号掉到了下一行    vueIndentScriptAndStyle: false,    //（默认值）对于 .vue 文件，不缩进 <script> 和 <style> 里的内容    embeddedLanguageFormatting: 'auto', //（默认值）允许自动格式化内嵌的代码块};

如果有些文件不想被 Prettier 格式化，可以将其写入到 .prettierignore 里：

build/package.jsonpublic/test/*.*

配合eslint使用：执行tnpm run lint命令即可。

5. 参考文档

5.1 官方文档&规范

  1. ESLint官方文档（中文版）：cn.eslint.org/docs/user-g…
  2. ESLint官方文档：eslint.org/docs/user-g…
  3. eslint-plugin-vue官方文档：eslint.vuejs.org/user-guide/…
  4. 规范化标准 - ESLint：www.kancloud.cn/cyyspring/w…
  5. Vue CLI服务-Git Hook：cli.vuejs.org/zh/guide/cl…
  6. husky npm包：www.npmjs.com/package/hus…

5.2 文章

  1. 《手把手教你配置 Vue的eslint》：segmentfault.com/a/119000002…
  2. 《@tencent/eslint-config-tencent 配合 Vue3 的最佳配置？》：mk.woa.com/q/272814?AD…
  3. 《【vue系列】 vue2.x 项目配置 ESLint》：juejin.cn/post/684490…
  4. 《Vue + TypeScript 项目放弃 TSLint，拥抱 ESLint》：juejin.cn/post/684490…
  5. 《ESLint 开始，说透我如何在团队项目中基于 Vue 做代码校验》：juejin.cn/post/697422…
  6. 《为什么husky放弃了传统的js配置》：segmentfault.com/a/119000004…
avatar
文章
阅读
粉丝