ESLint简介

ESLint简介

查找并修复JavaScript代码中问题。

• 发现问题
• 自动修复
• 按需定制

安装和使用

使用npm安装ESLint：

npm install eslint --save-dev

• 本地安装ESLint之后，我们必须要来到node_modules/.bin/目录下，才能使用 eslint命令，这样比较麻烦，我们怎么解决这个问题呢？

• 在package.json文件的scripts字段中配置脚本命令，间接地执行eslint命令。

• npm 5.x 之后的版本中提供了一个npx命令，它可以直接执行node_modules/.bin/目录下的可执行程序，因此我们可以通过它来使用eslint命名。

然后初始化配置文件：

npx eslint --init

该命令会向我们提几个问题，然后根据我们的回答生成配置文件。问题如下：

1. 您想如何使用ESLint？此处选择第三项

• 选项一：只检查语法
• 选项二：检查语法并找到问题
• 选项三：检查语法，发现问题并强制代码风格

2. 你的项目使用了哪种类型模块化规范？

• 选项一：JavaScript模块化规范
• 选项二：CommonJS模块化规范
• 选项三：未使用任何模块化规范

3. 你的项目使用了哪个框架？

• 选项一：React
• 选项二：Vue.js
• 选项三：未使用任何框架

4. 你的项目使用TypeScript了吗？

5. 你的代码运行在什么环境中？此处我们选择Node，也可以多选。
   【空格】选择/取消单个选项，【a】选择所有/取消所有，【i】取反（取消已选择的，选择未选择的）

6. 你想要怎样定制项目的代码风格？

7. 选择目前比较流行的代码风格
   Airbnb（爱彼迎），Standard（JavaScript标准风格https://standardjs.com/），Google（谷歌）

8. 你想要什么格式的配置文件？

9. 你选择配置需要安装下面列出的依赖，你现在就想使用npm安装它们吗？此处选择 Y

10. 依赖安装成功以及配置文件创建成功之后的提示信息

最后生成了一个.eslintrc.json配置文件，当我们执行 eslint命令时，会自动读取该配置文件中的内容。

{
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
    }
}

配置ESLint

有两种主要的方式来配置ESLint：

• 使用注释配置
• 将配置信息以注释的形式嵌入JavaScript文件中
• 使用配置文件
• 在.eslintrc.js文件中指定配置信息
• 在.eslintrc.json文件中指定配置信息
• 在.eslintrc.yml文件中指定配置信息
• 在package.json文件的eslintConfig字段中指定配置信息

指定解析器选项

ecmaVersion-设置为3、5（默认），6、7、8、9、10或11，以指定要使用的ECMAScript语法的版本。你还可以将年份作为版本号：2015（等于6），2016（等于7），2017（等于8），2018（等于9），2019（等于10）或2020（等于11）。

• sourceType-设置为"script"（默认），或者"module"代码在ECMAScript模块中。
• ecmaFeatures -一个对象，指示您要使用哪些其他语言功能：
• globalReturn-允许return在全球范围内发表声明
• impliedStrict-启用全局严格模式（如果ecmaVersion大于等于5）
• jsx-启用JSX

下面是一个.eslintrc.json示例文件：

{
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "globalReturn": false,
		     "impliedStrct": false,
             "jsx": false
        }
    }
}

设置解析器选项可以帮助ESLint确定什么是解析错误。默认情况下，所有ecmaFeatures选项都是false。

全局变量

当我们访问当前源文件未定义的变量时，no-undef规则会发出警告。我们可以ESLint的配置文件中定义这些全局变量，这样ESLint 就不会发出警告。例如，下面的配置文件添加了两个全局变量。

    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "students": "writable",
        "teachers": "readonly"
    },

readonly（false/readable）表示只能读取变量的值，不能修改；writable（true/writeable）表示可读可写。

除此之外，还可以在源文件中配置全局变量，students是可读可写的，teachers是只读的。

/* global students:writable, teachers */
students.forEach(function (student) {
    console.log(student.name);
});

students = [
    {
        name: '杨柯'
    }
];

console.log(teachers);

配置规则

ESLint为我们提供大量的语法规则。我们可以使用注释或配置文件修改项目中要使用的语法规则。要改变规则，可以使用如下几个值：

• “off”或0 – 关闭规则
• “warn”或1 – 开启规则，一旦违反规则，则抛出警告（不会导致程序退出）
• “error”或2 – 开启规则，一旦违反规则，则抛出错误（会导致程序退出）

使用注释修改规则
例如，下面的注释关闭了 semi 规则，开启了 no-console 规则，一旦违反规则，则抛出错误

/* eslint semi: "off", no-console: "error" */
var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  console.log(color)
})

如果一个规则有额外的选项，我们可以使用数组字面量设置它们

/* eslint semi: "off", no-console: ["error", {allow: ["error", "warn"]}] */
var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  // 不会报错
  console.warn(color)
  // 会报错
  console.dir(color)
})

使用配置文件
在配置文件中关闭 semi 规则，开启 no-console 规则，并且只允许使用console对象的error方法，否则会抛出警告。

{
    "rules": {
        "semi": 0,
        "no-console": ["warn", {"allow": ["error"]}]
    }
}

例如，下面代码中的console对象只能使用error()方法，不能使用其他的方法，否则会报错。

var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  console.log(color)
})

将 /* eslint-disable */ 放到源文件的最顶部，即可禁止ESLint对整个文件的所有规则的检查

/* eslint-disable */
var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  console.log(color)
})

整个文件中的 no-console 都不要帮我检查，其他的规则继续检查。

/* eslint-disable no-console */
var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  console.log(color)
})

临时禁止对某一段代码进行规则检查

var colors = ['red', 'green', 'blue']

/* eslint-disable */
colors.forEach(function (color) {
  console.log(color)
})
/* eslint-enable */

禁止检查某段代码的 no-console 规则，只检查 semi（分号）规则

var colors = ['red', 'green', 'blue']

/* eslint-disable no-console */
colors.forEach(function (color) {
  console.log(color)
})
/* eslint-enable no-console */

禁止检查下一行代码的所有规则

var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  /* eslint-disable-next-line */
  console.log(color)
})

禁止检查下一行代码的no-console规则，其他规则接着检查

var colors = ['red', 'green', 'blue']

colors.forEach(function (color) {
  /* eslint-disable-next-line no-console */
  console.log(color)
})