Eslint

Eslint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具,使用它可以避免低级错误和统一代码的风格。

编码规范：
每个程序员都有自己的编码习惯。

lint含义：
. 提供编码规范；
. 提供自动检验代码的程序，并打印检验结果：告诉你哪一个文件哪一行代码不符合哪一条编码规范，方便你去修改代码;

Eslint含义：
Lint 是检验代码格式工具的一个统称，具体的工具有 Jslint 、 Eslint 、Tslint等等；
我们可以形象地将 Lint 看成是电商行业，而电商行业具体表现有淘宝（Eslint）、京东（Jslint）等；

使用Eslint：
确保你的电脑安装了 node 和 npm 环境。

创建项目：
npm init 指令会在项目根目录下生成package.json文件。

安装依赖包：
npm install eslint --save-dev 会把 eslint 安装到 package.json 文件中的 devDependencies 属性中，意思是只是开发阶段用到这个包，上线时就不需要这个包了。

设置package.json文件：
打开package.json文件，修改script如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src",
    "lint:create": "eslint --init"
}

. script 属性的意思是脚本，使用方法是在 cmd 窗口中输入 npm run 指令 的形式，如：npm run lint:create；
. “lint:create”: “eslint --init” 这个脚本是为了生成 .eslintrc.js 文件，在介绍 Lint 的时候说到 Lint 应该提供编码规范，规范写在哪里，就写在这个文件，所以我们需要创建它；
. “lint”: “eslint src” 在介绍 Lint 的时候也说到 Lint 应该提供自动校验代码的程序，这个脚本是让 Lint 自动检验 src 目录下所有的 .js 文件。

创建eslint.js文件：
npm run lint:create 创建完成后出现.eslintrc.js文件。

创建index.js文件：
在根目录下创建 src/index.js 文件，内容如下，接下来就使用 Eslint 来检验这个 .js 文件是否符合编码规范。

const lint = 'eslint'

此时的目录结构应该为：

- test-eslint
    + .eslintrc.js
    + package.json
    - src
        + index.js

效验代码：
当我们熟悉了编码规范之后，只需进行响应的修改就可以使代码形成统一的风格。刚开始如果对编码规范具体某一条规则不了解的话，可以在 eslint规则表 查看用法。（不建议去背规则表，而是用到什么查什么，把它当成字典来用，不那么累）

设置–fix参数：
打开package…json文件，修改script属性如下：

"scripts": {
    "test": "react-scripts test --env=jsdom",
    "lint": "eslint src --fix",
    "lint:create": "eslint --init"
}

说明：这里给 “lint”: “eslint src --fix”, 加上 --fix 参数，是 Eslint 提供的自动修复基础错误的功能。 --fix 只能修复基础的不影响代码逻辑的错误，像 no-unused-vars 这种错误只能手动修改。

配置文件：
按照上述操作，会生成默认 .eslintrc.js 配置文件，内容如下：

// .eslintrc.js 
module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            "tab"
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
}

该文件导出一个对象，对象包含属性 env、extends、parserOptions、plugins、rules 五个属性:。
。env、parserOptions、plugins这三个放在一起将是因为你只需要知道它们是干嘛的：程序里要用到 ES6 、React 、JSX 语法，这几个属性就是让 Eslint 能够检验到这些语法的。
。extends 值为 “eslint:recommended” 的 extends 属性启用一系列核心规则，这些规则是经过前人验证的最佳实践（所谓最佳实践，就是大家伙都觉得应该遵循的编码规范）。
。rules 通过设置rules来定义我们自己的代码规范。

ESLint附带有大量的规则，修改规则应遵循如下要求：
。“off” 或 0 - 关闭规则
。“warn” 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
。“error” 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
有的规则没有属性，只需控制是开启还是关闭，像这样：“eqeqeq”: “off”，有的规则有自己的属性，使用起来像这样：“quotes”: [“error”, “double”]，具体有没有自带属性，可查看 eslint规则表。
修改 .eslintrc.js 文件中的 rules 属性：

"rules": {
    "indent": [
        "error",
        "tab"
    ],
    "linebreak-style": [
        "error",
        "windows"
    ],
    "quotes": [
        "error",
        "single"        // 改成字符串必须由单引号括起来而不是双引号，'string'不报错，"string"报错
    ],
    "semi": [
        "error",
        "never"         // 改成代码结尾不再加分号，加了分号报错，不加分号不报错
    ],
    "no-unused-vars": 0 // 0 相当于 off，表示关闭规则，相当于不再校验这条规则：变量定义了必须使用
}

此时再使用 npm run lint 进行代码校验，没有报错就说明校验通过，代码符合统一编码规范。

全局变量配置：
如使用 window 对象，默认情况下会报 no-undef 的错误，需要在 .eslintrc 中进行相应配置。

{
    "rules": {
        // ...
    },
    "globals": {
        "window": true
    }
}

单行跳过lint验证：
在实际编码时，可能会出现以下代码：

const apple = "apple";
const balana = "balana";

module.exports = {
    fruit: balana ;
}

在最上面定义了两个变量，在底部的配置文件中只可能用到其中一个变量，另一个用不到的在 eslint 校验时就会报错 no-unused-vars 的错误，意思是变量定义了但是没有被用到。
其中一种解决方案是在 .eslintrc 文件中配置 rules no-unused-vars: 0，意思是项目中不检验变量定义未使用这条规则。强烈不建议这样做，这个规则十分有用，可以规避编写代码时遗漏的变量。
另一种解决方案就是使用行内注释跳过对 apple 和 balana 两个变量跳过 eslint 校验，只影响这两个变量，不影响外部。

const apple = "apple";  // eslint-disable-line
const balana = "balana";  // eslint-disable-line
  
module.exports = {
    fruit: balana ;
}

此时使用 eslint 校验时就不会再报错了。

常见规则含义解释：
。object-shorthand 设置该规则，表示对象属性要简写。

var foo = {x: x};    // 会报错
var bar = {a: function () {}};  // 会报错
var foo = {x};    // 不会报错
var bar = {a () {}};    // 不会报错

。prefer-arrow-callback 要求回调函数使用箭头函数。

// 回调函数，函数的参数是个函数，这个参数函数就是回调函数
funciton bar () {}      // 不是回调函数，不会报错
// setTimeout 的第一个参数就是回调函数，不用箭头函数会报错
setTimeout(() => {
    // .......
}, 1000)

。no-param-reassign 禁止对函数的参数重新赋值。

function bar ({ data = {} }) {
    data.num = 12;      // 会报错
}
/* 
虽然报错，又不想要将该校验关闭，如果代码中只有 data 这个属性有这种情形，
可以在 .eslintrc.js 中的 rules 属性中添加配置（可忽略 data 属性做此校验）：
'no-param-reassign': ['error', { 'props': true, 'ignorePropertyModificationsFor': ['data'] }],
'no-param-reassign': 0,  // 关闭该属性校验
*/

。no-trailing-spaces 禁止行尾空格。
。no-shadow 禁止变量声明与外层作用域的变量同名。

function sum (num) {
  let num = 2;    // 报错，因为 num 变量作为参数已经申明过了
}

常用的几个规则：

"quotes": [1, "single"],            # 单引号
"quote-props":[2, "as-needed"],     # 双引号自动变单引号
"semi": [2, "never"],               # 一行结尾不要写分号
"comma-dangle": [1,"always-multiline"]  # 对象或数组多行写法时，最后一个值加逗号