目录

ESLint是干什么的

安装ESLint

初始化ESLint

ESLint规则

在项目中使用ESLint

使用插件 

禁用ESLint规则校验

分享规则配置

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似。

ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。 

通俗的讲，ESlint是用来帮助你更规范的开发你的代码得， 它规定你应该以一个什么样的标准，语法，或者样式来书写你的代码，在团队开发（多人协作）中帮助大家统一语法及代码格式。

相比其他的代码格式化工具，ESLint更偏重对 javaScript 代码进行格式化。

而ESlint重点并不在于对代码的格式化，而在于语法规则的校验与修复。

先决条件

Node.js版本 >=6.14,        npm 版本 3+。

 安装指令

ESlint 作为一个代码格式化工具，当然只在开发过程中使用。

如果你已经有一个完整的项目结构，那么可以跳过此步骤

如果你是从零开始，那么建议你先初始化一个项目，生成package.json文件，用来管理项目的第三方依赖。

初始化项目，执行命令    npm init -y

生成一个package.json文件，如：

接下来生成ESLint的配置文件，用来便捷的管理你的ESLint规则，指令：

初始化生成配置文件时，需要选择很多东西，详情如下：

配置完成之后就会生成ESLint配置文件，.eslintrc.js文件，如下

 到这里，ESLint的初始化安装配置就已经完成，接下来就需要配置具体的规则了，如果你有什么不明白的，推荐你查阅ESLint官方的配置文档，了解详细配置。

或者你觉得看文档比较繁琐，那么推荐查看：ESlint配置文件eslintrc.js详解

eslint 提供了很多的规则，用于代码的格式化操作、错误处理等。如下：

规则值介绍： 

这三个错误级别可以允许你细粒度的控制 ESLint 是如何应用规则。

到这里你就可以在自己的项目中配置针对当前项目的具体的编码规则，ESLint官方提供了非常多的规则名称可供选择使用，大家可以参照上面的例子进行配置。

具体的规则名称详情，可以查看ESLint官方规则文档。ESLint使用的重点就在于规则的配置。

如果你不想自己配置，或者不知道怎么配置，可以官方提供的配置，具体使用如下：

这样，所有在 规则页面 被标记了  对钩  的规则将会默认开启，即当前配置文件会继承在基础配置中已启用的规则。

或者你也可以使用插件，详情请往下看。

当你配置好了这一切的东西，配置好了.eslintrc.js 文件，配置好了你想要的规则，那么怎么让你的代码按照自己配置的规则进行格式化呢，这里是重点:

第一种，配置命令行方式执行

在 package.json 文件中的 script 对象中添加如下命令：

eslint 官方提供了很多的配置选项，帮助你应付更多需求场景， 具体的配置规则及配置选项参见：

eslint 官方文档 命令行。

这种方式的使用需要执行你自己配置的 eslint 命令，开始代码格式化，你需要运行如下命令：

npm run 后面跟的是你配置的格式化命令的名称。 

第二种，配置vscode 保存自动格式化代码

首先应该在 vscode 应用商店搜索 eslint 插件，并安装，因为当前这种使用方式依赖于vscode 提供的 eslint 插件，详情请看 VS Code ESLint，如果你已经安装，请跳过。

接下来需要修改vscode 中 settings.json 文件配置，如下：

setting.json文件打开方式：vscode编辑器左下角设置  =》 settings（设置） =》 右上角第一个按钮（编辑器窗口放大缩小按钮下方）

配置完成，接下来当你 ctrl + s 保存代码的时候会自动按照你配置的规则来格式化代码。

如果你想了解更多关于 vscode编辑器的配置信息，请看：

VS Code 配置解析及保存代码格式化问题解决

1，eslint-plugin-vue插件

eslint-plugin-vue 是Vue.js 的官方 ESLint 插件，这个插件允许我们用 ESLint 检查 .Vue 文件的 和 内容，以及 .js 文件。该插件提供了一些预定义的配置，可以直接拿来使用。

具体安装使用参见：eslint-plugin-vue 插件官方文档。

该插件与 vscode 编辑器集成，当你使用 VSCode 编辑器进行代码开发，你可以安装 VSCode 相关 ESLint 的扩展插件 ESLint，该插件在VS Code中集成了ESLint，请在 vscode 扩展商店搜索 eslint 安装。

你必须配置 eslint.validate 扩展程序的选项来检查 .vue 文件，因为扩展程序默认仅针对 *.js 或*.jsx 文件。

在 vscode   settings.json 文件中设置：

 更多VS Code ESLint 扩展配置请看官方文档：VS Code ESLint 官方扩展配置。

如果您使用 vscode 编辑器开发 vue，因为 Vetur 是 vscode 的 vue 工具，如果你使用 ESLint 校验，请设置"vetur.validation.template": false ，避免默认 Vetur 模板验证，详情请参考：

关于 vetur 的设置：   Linting / Error Checking | Vetur。

2，配合prettier使用的插件

详情请看官方文档：

eslint-config-prettier

eslint-plugin-prettier

prettier-eslint

1，如果你不想使用eslint 工具，可以通过如下配置关闭

在 vscode 设置文件 settings.json 文件中添加如下设置：

2，如果你只是想关闭部分规则校验，或者部分文件的规则校验，如下： 

3，或者你是想禁用对某个特定文件的规则校验，那么在项目根目录新增 .eslintignore 文件，告诉 ESLint 去忽略特定的文件和目录，如下：

上面的所有方法同样适用于插件规则。

分享下可用的规则配置：