ESLint入门 安装 使用 详解

首先，ESLint是什么东西呐，看官网的介绍：

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

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

通俗点讲就是ESLint其实就是一个代码格式化检测工具，它规定你应该以一个什么样的标准，或者规范来开发你的项目，书写你的代码。在团队开发（多人协作）中帮助大家统一代码书写格式。

 

那么，使用ESLint有什么先决条件（要求）吗？

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

 使用前必须先安装ESLint，你可以使用npm安装（或者yarn）：

// npm
npm install eslint --save-dev
// yarn
yarn add -D 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  to select,  to toggle all,  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": { // 指定脚本的运行环境， env 关键字指定你想启用的环境，并设置它们为 true
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [ // 设置当前ESLint默认继承的规则（或者你也可以使用标准规则：standard）
        "eslint:recommended",// 使用ESLint推荐的规则
        "plugin:vue/essential"
    ],
    "globals": { //  脚本在执行期间访问的额外的全局变量
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": { // 解析器选项
        "ecmaVersion": 2018,
        "sourceType": "module" // 类型为module，因为代码使用了使用了ECMAScript模块
    },
    "plugins": [ // 使用的插件
        "vue"
    ],
    "rules": { // 启用的规则及其各自的错误级别(在这里配置规则)
    }
};

到这里，ESLint的安装配置就已经完成，接下来就可以使用了，如果你有什么不明白的，推荐你查阅ESLint官方的配置文档，了解详细配置。

要使用ESLint，那么你必须明白ESLint是如何使用的，首先，ESLint官方提供了很多的规则，供大家使用，要配置规则你可以在项目生成的ESLint配置文件（.eslintrc.js）中的 rules 选项中进行配置

就像这样：

rules: {
        'no-console': 'off',
        'no-debugger': 'off',
        'no-redeclare':0,
        "no-useless-escape": 0,
        "no-mixed-spaces-and-tabs": 0,
        "valid-v-for":0
    },

"no-console" 和 "no-debugger"等 是 ESLint 中 规则 的名称，可以使下面的值之一：

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

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

 当你书写的代码有关于ESLint规则错误的时候你就可以进行相应的配置，或者关闭这个规则（值为 oof 或 0），或者将规则视为一个警告（值为 warn 或 1），或者将规则视为一个错误（值为 error 或 2）

比如''no-console''规则，当值为0或off时，代码中出现console不会出现报错，

                                      当值为1或warn时，代码中出现console会提示一条警告，

                                      当值为2或error时，代码中出现console会出现一个错误。

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

具体的规则名称详情，可以查看ESLint官方规则文档，就像这样的：

		for-direction	强制 “for” 循环中更新子句的计数器朝着正确的方向移动
		getter-return	强制 getter 函数中出现 return 语句
		no-async-promise-executor	禁止使用异步函数作为 Promise executor
		no-await-in-loop	禁止在循环中出现 await
		no-compare-neg-zero	禁止与 -0 进行比较
		no-cond-assign	禁止条件表达式中出现赋值操作符
		no-console	禁用 console
		no-constant-condition	禁止在条件中使用常量表达式
		no-control-regex	禁止在正则表达式中使用控制字符
		no-debugger	禁用 debugger
		no-dupe-args	禁止 function 定义中出现重名参数
		no-dupe-keys	禁止对象字面量中出现重复的 key
		no-duplicate-case	禁止出现重复的 case 标签
		no-empty	禁止出现空语句块
		no-empty-character-class	禁止在正则表达式中使用空字符集
		no-ex-assign	禁止对 catch 子句的参数重新赋值
		no-extra-boolean-cast	禁止不必要的布尔转换
		no-extra-parens	禁止不必要的括号
		no-extra-semi	禁止不必要的分号
		no-func-assign	禁止对 function 声明重新赋值
		no-inner-declarations	禁止在嵌套的块中出现变量声明或 function 声明
		no-invalid-regexp	禁止 RegExp 构造函数中存在无效的正则表达式字符串
		no-irregular-whitespace	禁止不规则的空白
		no-misleading-character-class	不允许在字符类语法中出现由多个代码点组成的字符
		no-obj-calls	禁止把全局对象作为函数调用
		no-prototype-builtins	禁止直接调用 Object.prototypes 的内置属性
		no-regex-spaces	禁止正则表达式字面量中出现多个空格
		no-sparse-arrays	禁用稀疏数组
		no-template-curly-in-string	禁止在常规字符串中出现模板字面量占位符语法
		no-unexpected-multiline	禁止出现令人困惑的多行表达式
		no-unreachable	禁止在 return、throw、continue 和 break 语句之后出现不可达代码
		no-unsafe-finally	禁止在 finally 语句块中出现控制流语句
		no-unsafe-negation	禁止对关系运算符的左操作数使用否定操作符
		require-atomic-updates	禁止由于 await 或 yield的使用而可能导致出现竞态条件的赋值
		use-isnan	要求使用 isNaN() 检查 NaN
		valid-typeof	强制 typeof 表达式与有效的字符串进行比较

更多规则请查看官方文档，这里不做赘述。