文韬·秘

write your own novel.

ESLint介绍

ESLint

ESLint，首先从字面上分析一下，这个词由两个名词组成“ES”和“Lint”，下面我们先了解一下什么是Lint.

什么是Lint

Lint也可以叫做Linter，是一种源代码分析工具，用于标记出源代码中的错误、潜在的bug及不推荐的编码风格等。

Lint的历史

Lint是在1978年贝尔实验室的一个计算机科学家在调试他为C语言写的一个编译器时提出的。Lint这个单词源于同名的英文单词 Lint，原义是衣服上的线头。我觉很这个词用得很形象，在衣服上找线头，是不是像极了Lint程序分析源代码找到问题的过程。

什么是Linting

Linting 就是使用Lint程序检查源代码中可能存在的错误的过程。 Linting 过程是对代码的静态分析，经常被用作发现代码中的容易导致问题的编码模式以及是否违背了某种特定的源代码书写规范或风格。

Linting对于JavaScript的重要性

JavaScript是动态弱类型编程语言，而且又是解释型语言，没有编译过程。不像编译型语言可以把Linting过程集成到编译过程中。所以使用JavaScrit编写的源代码中的语法错误或其他错误，通常要在源代码运行之后才能发现，这有两个缺点:一、为了验证代码的正确性需要不断重复的运行代码，比较费时；二、运行过程中没有执行到的分支代码中的错误可能会被遗漏。当然，上线之前还要跑测试用例，还有QA环节。但是如果能在这些环节前就能低成本的发现并解决问题是不是更好。Linting工具就是在不运行源代码的情况下，对代码进行静态代码分析，在代码运行之前发现错误，这能够提升开发效率和代码的可靠性。

什么是ESLint

ESLint是一个开源的JavaScript Linting工具，最初由Nicholas C. Zakas在2013年6月创作。“ESLint” 中 “ES”是指“EcmaScript”。

特点

环境要求

安装

局部安装

npm install eslint --save-dev

全局安装

npm install eslint --global

运行

ESLint提供了命令行接口，在配置之后，就可以直接在命令行运行ESLint，对指定的源代码进行检查。

eslint [options] [file|dir|glob]*

ESLint还提供了Node.js编程接口。工具和插件开发者可以直接通过此API进行开发。这让工具开发更加方便，所以现在ESLint的工具和插件非长的丰富。

根据不同需求，可以把ESLint集成到开发的任何一阶段，对于Atom，VSCode，Vim，IntelliJ IDEA等编辑器或IDE都有相应的ESLint插件。使用编辑器插件的方式可以让代码编写者得到最及时的问题反馈。 也可以把ESLint集成到:

等阶段，对于Vue，React等等前端开发框架，也有相应的规则插件。对于集成ESLint，具体可以查看以下文档。

https://eslint.org/docs/user-guide/integrations

我主要使用VS Code编写JS代码，在VS Code 中安装ESLint插件后，才感觉拥有了一个真正的JavaScript IDE，这在JavaScript代码实际运行之前，增加了一个Linting过程。它可以做到在你编写代码的同时，对代码进行静态分析，发现代码中的错误，并友好的进行提示，还可以自动修复ESLint指定为可以自动修复的错误。这可以大大提高开发效率。

设置

ESLint 命令行工具提供了一个交互式的命令行接口，通过“对话”的方式，让ESLint了解你的需求，最终生成配置文件。

在项目的根目录运行如下命令(局部安装的ESLint需要通过npx命令运行)

npx eslint --init

选择ESLint检查的维度：语法检查，常见问题检查，编码风格。

eslint-init

选择JavaScript的模块类型

ESLint init

选择JavaScript的运行环境

ESLint init

选择使用的前端JavaScript框架

ESLint init

选择是否开启编码风格的检查

ESLint init

选择生成的配置文件的文件类型

ESLint init

ESLint根据上面的选择，自动安装了需要的插件

ESLint init

最终会自动安装需要的插件，在项目的根目录下生成一个配置文件：.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "plugin:vue/essential",
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

在这个例子中，项目根目录下有一个 hello.js 文件，内容是：

const ok = 'test';

这时在项目的根目录下运行

npx eslint hello.js

ESLint 会在命令行，打印出检查的结果，

ESLint运行结果

其中包含信息有：

在VS Code中安装ESLint插件后，问题的提示和修复会更加方便。

eslint-vscode-plugin

插件地址：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

插件安装后，默认会自动启动，但是需要先配置好插件的ESLint配置文件的路径配置项，配置保存后通常会自动生效，不用重启插件。

"eslint.options": {
    "configFile": "./.eslintrc.json"
}

运行效果是这样式儿的。

vscode-eslint-feedback

可以看到，错误会直接在代码上标记，并有快捷操作菜单，在编辑器底部的“问题面板”中也会清晰的报告。

除了以上默认的配置，还可以配置保存文件时自动修复等等选项。

auto-fix

配置文件

通过上面生成的配置文件，来初步认识一下ESLint的具体配置。

parserOption

解析器配置，parser的一个功能就是语法检查，ESLint是不会默认开启任何rule的，但与rule不一样，语法检查是必须的。所以即使ESLint配置文件中没有任何配置，ESLint还是会对源代码进行语法检查，这个语法检查会根据配置文件中parserOption字段进行配置，其中包含三个字段：

其中 ecmaVersion不设置的情况下，ESLint默认会按照EcmaScript 5的语法进行检查，所以如果代码中使用了EcmaScript 6或者其他版本的语法特性的时候需要修改这项配置。例如，只有把此项配置的值设置为 2016以上时，ESLint才不会把spread(...)运算符报告为语法错误。

globals

用于定义全局变量， 当no-undef规则设置为“警告”或“错误”后，直接引用此项配置中未定义的变量，ESLint会提示“变量未定义”。

{
    "globals": {
        "var1": "writable",
        "var2": "readonly"
    }
}

env

此项配置可以认为是全局变量的预定义组，在开启设置browser:true后，window，history等等，浏览器环境内置的全局变量就自动定义了，不用再去globals中配置这些全局变量，在源代码中引用这些变量，ESLint也不会报错了。可以同时开启多种环境。

{
    "env": {
        "browser": true, //浏览器环境 
        "node": true     //Node.js 环境
    }
}

rules

规则的配置都以 "规则ID": "规则值" 的形式设置，

{
    "rules": {
        "eqeqeq": "off",
        "curly": 1,
        "quotes": ["error", "double"]
    }
}

规则值的取值：

ESLint不会默认开启任何规则。ESLint内置规则参考：https://eslint.org/docs/rules/

extends

配置文件通过 extends属性可以扩展已有配置文件中生效的规则，暂时把这些被extends的配置文件成为base。

其值是字符串或者一个字符串数组：字符串可以是一个配置文件的路径，也可以是“可共享”配置的名称。

eslint:recommended是其中一个“可共享”配置的名称。这个值会使ESLint内置规则的其中一部分规则生效，这些规则负责报告一些常见的问题。在ESLint内置规则的列表里这些规则前面都被打了个对勾。

ESLint-rules

在当前配置文件中也可以在rules字段中配置base中同名的规则，从而覆盖base中的规则值。

结语

ESLint的配置还是比较简单的，因为插件化，我们不但可以自己编写需要的插件，大多数时候其实是可以直接使用别人写好的插件，尤其是对于目前的前端框架，如Vue，React等都有相应的插件支持。这些插件大都在npm(https://www.npmjs.com/search?q=keywords:eslintplugin)上可以找到。

配置细节还是挺多的，很多本文都未提及，官方文档非常详尽，希望此文能让还没用过ESLint的小同学对ESLint有个大概的了解，能够熟悉ESLint的基本配置。不准确的地方欢迎指正。

参考