Vue项目中的ESlint配置

一、eslint安装

1.全局安装

npm i -g eslint

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

2.项目安装

npm i -D eslint

3.编辑器安装

二、eslint定义规则

1.创建 .eslint.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关键字指定你想启用的环境。如上：

更多环境设置请参考：Configuring ESLint - ESLint中文

plugins: {
  'html',  //次插件用来识别 .html 和 .vue 文件中的 js 代码
}

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

"extends": "eslint: recommonded"

一个配置文件可以从基础配置继承已启用的规则。如上，如果值为字符串数组则每个配置继承它前面的配置。值为"eslint: recommonded"的 extended 属性启用了 eslint 默认的规则，请参考：List of available rules - ESLint中文

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

检测indedx.js文件，如下，有一个错误：多余的分号（基于smi规则）。并告诉我们此规则可以通过 --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 插件。

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

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