目录

ESLint是干什么的

安装ESLint

初始化ESLint

ESLint规则

在项目中使用ESLint

使用插件 

禁用ESLint规则校验

分享规则配置

---

ESLint是干什么的

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

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

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

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

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

安装ESLint

先决条件

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

 安装指令

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

// npm
npm install eslint --save-dev
// yarn
yarn add -D eslint

初始化ESLint

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

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

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

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

{
  "name": "eslint",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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

./node_modules/.bin/eslint --init
// 或者你也可以这样，使用npx命令，更便捷
npx eslint --init

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

// 空格键 选中/取消   Enter键确认选择

? How would you like to use ESLint? (Use arrow keys) //您想如何使用ESLint
  To check syntax only // 只检查语法
> To check syntax and find problems // 检查语法和发现问题
  To check syntax, find problems, and enforce code style // 检查语法、发现问题并实施代码样式

? What type of modules does your project use? (Use arrow keys) //您的项目使用什么类型的模块
> JavaScript modules (import/export) // JavaScript模块
  CommonJS (require/exports) // CommonJS
  None of these // 其他

? Which framework does your project use? (Use arrow keys) //您的项目使用哪个框架(根据情况选择)
> React
  Vue.js
  None of these

? Does your project use TypeScript? (y/N) 
//项目是否使用TypeScript,后面括号中大写字母表示默认选项，如果不想使用，直接回车

? Where does your code run? (Press <space> to select, <a> to toggle all, <i> to invert sel
ection) //您的代码在哪里运行
>(*) Browser // 浏览器
 (*) Node // node

? What format do you want your config file to be in? (Use arrow keys) //您希望生成的配置文件是什么格式的
> JavaScript
  YAML
  JSON

The config that you've selected requires the following dependencies: //您选择的配置需要以下依赖，

eslint-plugin-vue@latest
? Would you like to install them now with npm? (Y/n) //您想现在安装它吗,默认yes，安装的话直接回车，不安装输入n

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

module.exports = {
    // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    // 扩展配置文件（设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard））
    // 一个配置文件一旦扩展，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）、并修改所有选项
    "extends": [
        "eslint:recommended",// 使用ESLint推荐的规则
        "plugin:vue/essential"
    ],
    "globals": { //  脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    // 解析器选项。sourceType用来指定js导入的方式，默认是script，此处设置为module，指某块导入方式
    "parserOptions": { 
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // 使用的插件，插件名称省略了eslint-plugin-
    "plugins": [
        "vue"
    ],
    // 启用的规则及其各自的错误级别(在这里配置规则)
    "rules": {
    }
};

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

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

ESLint规则

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

// .eslintrc.js 文件
rules: {
        // 每一项都是一个eslint规则，off，0等为当前规则值
        'no-console': 'off',
        'no-debugger': 'off',
        'no-redeclare':0,
        "no-useless-escape": 0,
        "no-mixed-spaces-and-tabs": 0,
        "valid-v-for":0
    },

规则值介绍： 

• "off" or 0 - 关闭规则，不启用该规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为1)

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

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

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

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

// 在.eslintrc.js 文件中配置
 "extends": "eslint:recommended"

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

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

在项目中使用ESLint

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

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

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

"eslint": "eslint --ext .js,.vue src --fix",

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

eslint 官方文档 命令行。

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

npm run eslint

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

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

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

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

// 保存时修复来自所有插件的所有可自动修复的ESlint错误（重点其实只有这一个）
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
// 在快速修复菜单中显示打开的 lint 规则文档网页
"eslint.codeAction.showDocumentation": {
  "enable": true
},

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

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

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

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

使用插件 

1，eslint-plugin-vue插件

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

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

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

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

在 vscode   settings.json 文件中设置：

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue"
  ]
}

 更多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

禁用ESLint规则校验

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

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

// 是否开启 eslint 校验（默认是开启的）
"eslint.enable": false,

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

// 块注释  禁用开始和结束之间代码的规则校验
/* eslint-disable */

alert('foo');

/* eslint-enable */

// 对指定的规则启用或禁用警告
/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */

// 禁用整个文件的规则校验
// 将 /* eslint-disable */ 块注释放在文件顶部
/* eslint-disable */

alert('foo');

// 禁用某一行上的所有规则
alert('foo'); // eslint-disable-line

// 禁用某一行上的所有规则
/* eslint-disable-next-line */
alert('foo');

// 禁用某一行上的特定规则或者多个规则
alert('foo'); // eslint-disable-line no-alert, quotes, semi

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

/node_modules
/dist
commitlint.config.js
README.md
jsconfig.json
babel.config.js

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

分享规则配置

分享下可用的规则配置：

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 1 : 0, // 开发可用console和debugger，生产不可用
    'no-debugger': process.env.NODE_ENV === 'production' ? 1 : 0,
    'no-template-curly-in-string': 0, // 禁止在常规字符串中出现模板字面量占位符语法
    'spaced-comment': ['error', 'always'], // 强制在注释中 // 或 /* 使用一致的空格 never/后没有空格  always/后总有一个空格
    semi: ['error', 'never'], // 关闭无效分号
    indent: ['off', 2, { SwitchCase: 1 }], // 缩进两个，警告
    'no-useless-escape': 0, // 特殊字符可以使用
    'no-unused-vars': 1, // 声明没使用关闭
    'vue/no-side-effects-in-computed-properties': 'off', // 计算属性可以有副作用
    'no-empty': 'off', // 允许空块语句
    'no-undef': 'error', // 变量和参数拼写错误报错
    'comma-style': [2, 'last'], // 逗号在行尾
    'no-extra-semi': 'off',
    eqeqeq: [
      // 只能使用 ===
      'error',
      'always'
    ],
    quotes: [1, 'single'], // 单引号
    'comma-dangle': 'off',
    'no-multiple-empty-lines': 'error', // 禁止空行
    'no-proto': 2, // 禁用 __proto__ 属性
    'default-case': 2, // switch 语句强制 default 分支
    'no-loop-func': 1, // 禁止在循环中出现 function 声明和表达式
    'no-delete-var': 2, // 禁止删除变量
    'no-catch-shadow': 2, // 禁止catch子句参数与外部作用域变量同名
    'no-class-assign': 2, // 禁止给类赋值
    'no-const-assign': 2, // 禁止修改const声明的变量
    'no-dupe-keys': 2, // 在创建对象字面量时不允许键重复 {a:1,a:1}
    'no-var': 1, // 禁用var，用let和const代替
    'arrow-parens': 0, // 关闭箭头函数用小括号括起来
    camelcase: 0, // 强制驼峰法命名
    'valid-typeof': 2, // 必须使用合法的typeof的值
    'space-after-keywords': [0, 'always'], // 关闭关键字后面是否要空一格
    'space-before-blocks': [0, 'always'], // 关闭不以新行开始的块{前面要不要有空格
    'space-before-function-paren': [0, 'always'], // 关闭函数定义时括号前面要不要有空格
    'space-in-parens': [0, 'never'], // 关闭小括号里面要不要有空格
    'space-infix-ops': 1, // 开启中缀操作符周围要不要有空格,+—*/前后都要有空格
    'constructor-super': 0, // 非派生类不能调用super，派生类必须调用super
    'newline-after-var': 0, // 变量声明后是否需要空一行
    'no-new-wrappers': 2, // 禁止使用new创建包装实例，new String new Boolean new Number
    'keyword-spacing': 2, // 关键字前后的空格,如if
    'no-constant-condition': 0, // 条件语句的条件中不允许出现恒定不变的量
    'sort-vars': 0, // 变量声明时排序
    'no-cond-assign': 0,
    'no-plusplus': 0, // 不允许使用++ --运算符,
    'no-multi-spaces': 0,
    'key-spacing': 0,
    'no-trailing-spaces': 0,
    'object-curly-spacing': 0,
    'vue/require-valid-default-prop': 0,
    'no-unused-expressions': 0,
    'vue/no-v-html': 'off',
    'no-new': 0,
    'no-useless-constructor': 0,
    'vue/return-in-computed-property': 0,
    'no-irregular-whitespace': ['error', { skipComments: true }],
    'vue/multi-word-component-names': ['off', {}], // 组件名不能是单个单词
    'no-prototype-builtins': 'off'
  }