Vue 项目中 ESlint 配置

前言

对于 ESlint 这一块一直存在一些疑问，今天看到一个文章内容挺好的，这里拿来了。

一、eslint 安装

1、全局安装

npm i -g eslint

全局安装的好处是，在任何项目我们都可以使用eslint的全局命令进行代码规则操作，但是这对我们的意义并不大，后续会详细介绍；
全局安装之后，要求相关的eslint插件页必须全局安装，这对多人开发项目来说会比项目安装更加繁琐。所以，我们这里采用在项目上安装eslint：

2、项目安装

npm i -D eslint

3、编辑器安装

二、eslint 定义规则

1、创建 .eslintrc.js 文件

可以使用 ./node_modules/.bin/eslint --init 创建文件
.eslintrc.* 文件支持 .js .yaml .yal .json等格式的配置文件，这里使用 .js文件
在 package.json 里创建一个 eslintConfig 属性，在那里，同样可以定义你的配置
如果 .eslintrc.js 和 package.json里的 eslintConfig 同时存在，则只读取 .eslintrc.js文件

2、eslint 选项说明

"root": true

默认情况下，ESLint 会在所有父级目录里寻找配置文件，一直到根目录。如果发现配置文件中有 “root”: true，它就会停止在父级目录中寻找。

parserOptions: {

parser: 'babel-eslint', // 解析器，默认使用Espree

ecmaVersion: 6, // 支持es6语法，但并不意味着同时支持新的 ES6 全局变量或类型（比如 Set 等新类型）

sourceType: 'module', // 指定来源的类型，"script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)

// 使用的额外的语言特性

ecmaFeatures: {

jsx: true, // 启用 JSX

globalReturn: true, // 允许在全局作用域下使用 return 语句

impliedStrict: true, // 启用全局 strict mode (如果 ecmaVersion 是 5 或更高)

experimentalObjectRestSpread: true, // 启用实验性的 object rest/spread properties 支持。(重要：这是一个实验性的功能,在未来可能会有明显改变。建议你写的规则不要依赖该功能，除非当它发生改变时你愿意承担维护成本。)

}

解析器选项可以在 parserOptions 属性设置。设置解析器选项能帮助 ESLint 确定什么是解析错误，所有语言选项默认都是 false。如上：

  env: {
    es6: true, // 启用 ES6 语法支持以及新的 ES6 全局变量或类型
    node: true, // Node.js 全局变量和 Node.js 作用域
    browser: true, // 浏览器全局变量
    jquery: true, // jQuery 全局变量
  }

使用 env 关键字指定你想启用的环境。如上：
更多环境设置请参考：https://cn.eslint.org/docs/user-guide/configuring#specifying-environments

  globals: {
    template: false, // false 不允许被重写
    _util: false,
  }

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告。如果你想在一个源文件里使用全局变量，推荐你在 ESLint 中定义这些全局变量，这样 ESLint 就不会发出警告了。如上：

  plugins: [
    'html', // 此插件用来识别.html 和 .vue文件中的js代码
  ]

ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。如：npm i -D eslint-plugin-html。在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。如上：

"extends": "eslint:recommended"

一个配置文件可以从基础配置中继承已启用的规则。如上，如果值为字符串数组则每个配置继承它前面的配置。值为 “eslint:recommended” 的 extends 属性启用了eslint默认的规则，请参考：https://cn.eslint.org/docs/rules/

  rules: {
    indent: [2, 4], // 强制使用一致的缩进
    eqeqeq: [2, 'always'], // 要求使用 === 和 !==
    semi: [2, 'never'], // 要求或禁止使用分号代替 ASI
    quotes: [2, 'single'], // 强制使用一致的反勾号、双引号或单引号
  }

ESLint 附带有大量的规则。你可以在rules选项中设置，设置的规则将覆盖上面继承的默认规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
 
“off” 或 0 - 关闭规则
“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

三、eslint 代码检测和修复

这里讲的是使用 eslint 命令行来操作，后续会讲到如何用编辑器提升代码效率

1、代码检测

项目根目录运行 eslint，检测指定文件，支持 glob 模式

./node_modules/.bin/eslint index.js

检测index.js文件，如下，有一个错误：多余的分号（基于semi规则）。并告诉我们此规则可以通过 --fix 命令修复。

指定文件后缀名

./node_modules/.bin/eslint --ext .js,.html src

目前，告诉 ESLint 哪个文件扩展名要检测的唯一方法是使用 --ext 命令行选项指定一个逗号分隔的扩展名列表。注意，该标记只在与目录一起使用时有效，如果使用文件名或 glob 模式，它将会被忽略。

2、代码修复

项目根目录运行：

./node_modules/.bin/eslint index.js --fix

会自动修复代码，当然不是所有的规则都能实现自动修复的，具体说明请参照：https://cn.eslint.org/docs/rules/

四、eslint更多配置方式

完整的配置层次结构，从最高优先级最低的优先级，如下：

1、行内配置

/*eslint-disable*/ 、 /*eslint-enable*/
/*global*/
/*eslint*/
/*eslint-env*/

2、命令行选项

--global
--rule
--env
-c、--config

3、项目级配置

与要检测的文件在同一目录下的 .eslintrc.\* 或 package.json 文件
继续在父级目录寻找 .eslintrc 或 package.json文件，直到根目录（包括根目录）或直到发现一个有"root": true的配置。

4、如果不是（1）到（3）中的任何一种情况，退回到 ~/.eslintrc 中自定义的默认配置。

五、.eslintignore 忽略文件

1、定义及作用

在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。

2、忽略规则

.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式表明哪些路径应该忽略检测。如：

/dist/
/*.js

eslint总是忽略 /node_modules/\* 和 /bower_components/\* 中的文件

3、用eslint命令检查忽略文件

./node_modules/.bin/eslint index.js

六、创建自己的规则风格文件

1、命名

eslint-config-* // 如：eslint-config-vui

2、上传

参照：发布一个自己的npm包

3、下载

npm i -D eslint-config-vui

4、使用

在继承规则 extends 属性中定义自己上传的规则名，可以忽略 eslint-config- 字符，如下：

extends: ['vui']

5、eslint-config-vui 规则源码地址

https://github.com/shiguang0116/eslint-config-vui

七、使用编辑器插件标识错误以及自动修复代码

为什么使用编辑器插件：上述讲到的使用 eslint 命令来检测和修复代码的操作显然非常繁琐，我们需要能够自动修复代码的工具，相关编辑器都提供了 eslint 插件。

参考：ESLint配置（二）：vscode配置eslint，实现错误代码标识以及自动修复

八、使用构建工具检测代码

为什么：以上方式，包括后续讲到的使用编辑器修复代码，都只是自我书写代码的规范意识而已，在多人开发时如何强制性的要求提交的代码是符合我们自定的规范呢？这就需要在构建工具做相应的配置。

参考：ESLint配置（三）：构建工具（webpack、gulp）配置eslint

转载自：ESLint 配置（这里有系列文章可看）