ESLint 的配置及使用

2020-07-01 17:11:49 浏览数 (1)

JavaScript是一门神奇的动态语言，它在带给我们编程的灵活性的同时也悄悄埋下了一些地雷。除了基本的语法错误能在程序一启动的时候被检测到之外，很多隐含的错误都是在运行的时候才突然地蹦出来。除非你的程序有着100%的测试覆盖率，否则说不定哪天就会因为一个xxx is undefined而导致程序崩溃，而为了避免这样的错误可能你只需要在提交代码的时候用工具静态分析一下，仅此而已。

ESLint是一个插件化的javascript代码检测工具，它可以用于检查常见的JavaScript代码错误，也可以进行代码风格检查，这样我们就可以根据自己的喜好指定一套ESLint配置，然后应用到所编写的项目上，从而实现辅助编码规范的执行，有效控制项目代码的质量。

简单试用

先来使用一个代码片段来说明一下效果。首先我们需要安装eslint，在这里我们采用的是全局安装的方式。

代码语言：javascript复制

npm install -g eslint

再来看一下需要测试的代码,我们新建一个src目录，在目录中新建一个test.js

代码语言：javascript复制

function test () {
  var ret = {};
  for (var i in arguments) {
var m = arguments[i];
    for (var j in m) ret[j] = m[j]
  }
  return ret;
}
console.log(test({a: 123}, {b: 456}));

然后执行node test.js确保它是可以正确运行的（输出结果为{ a: 123, b: 456 }）接着我们执行以下命令来使用 ESLint 检查：

代码语言：javascript复制

eslint test.js

可以看到，没有任何输出结果。这是因为我们没有指定任何的配置，除非这个文件是有语法错误，否则应该是不会有任何提示的。接下来我们开始进行一系列的配置

eslint配置

在写配置文件前我们需要介绍一下，eslint官方提供了3种预安装包，为我们提供了一些规则的标准：

1.eslint-config-google

Google标准

执行安装：

代码语言：javascript复制

npm install eslint eslint-config-google -g

2.eslint-config-airbnb

Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件，并且对各个插件的版本有所要求。

你可以执行以下命令查看所依赖的各个版本：

代码语言：javascript复制

npm info "eslint-config-airbnb@latest" peerDependencies

你会看到以下输出信息，包含每个了每个plugins的版本要求

知道了每个plugins的版本要求后，代入以下命令执行安装即可使用：

代码语言：javascript复制

npm install eslint-config-airbnb eslint@^#.#.# eslint-plugin-jsx-a11y@^#.#.# eslint-plugin-import@^#.#.# eslint-plugin-react@^#.#.# -g

3.eslint-config-standard

Standard标准，它是一些前端工程师自定的标准。

执行安装：

代码语言：javascript复制

npm install eslint-config-standard eslint-plugin-standard eslint-plugin-promise -g

在这里我们采用standard标准来实现。在src目录外新建.eslintrc.js，内容为：

代码语言：javascript复制

module.exports = {
 parser: 'babel-eslint', //解析器
  extends: [
      'standard'
  ],
  env: {
     browser: true
  },
  rules: {
    'no-console': 'off'
  },
};

然后新建一个package.json，内容为：

代码语言：javascript复制

{
  "name": "my-package",
  "version": "5.4.0",
  "scripts":{
    "lint": "eslint --ext .js src"
  }
}

如果你的项目结构包含package.json文件的话，可以直接在里面写，当然你也可以将上面的安装放到该目录的node_module中。此时运行npm run lint即可查看到检查之后的结果

先来简单介绍一下各错误分别是什么

1.第一行的错误有四个，原因就是因为多余的分号，在standerd标准中，尽量不用分号的地方就不用

2.第二行的错误时，在第四行的位置应该有四个空格的，但是没有留

3.最后一个错误是，应该在这发现一行的，但是没有发现。原因是他认为分号后面必然有内容。

看着这些错有时候很是无语。但是如果整个项目的代码都严格按照标准来写，那么后续读起来会很容易。

先不说这些问题如何一步步处理，先简单介绍一下配置文件的意义。先从eslintrc来说，parser是指使用的是什么解析器，这个不再多说。

extends指的是执行标准库，我们这里采用的是standerd标准。

env表示运行环境，因为JavaScript有很多种运行环境，比如常见的有浏览器和Node.js，另外还有很多软件系统使用JavaScript作为其脚本引擎，比如PostgreSQL就支持使用JavaScript来编写存储引擎，而这些运行环境可能并不存在console这个对象。另外在浏览器环境下会有window对象，而Node.js下没有；在Node.js下会有process对象，而浏览器环境下没有。

rules指的是自定义的规则，key表示规则名称，value表示规则的配置。上面的示例中将no-console规则设置为off，表示不对该规则进行校验。具体请看：

1.off 或者 0: 关闭该规则

2.warn 或者 1: 将规则打开为警告（不影响退出代码）

3.error 或者 2: 将规则打开为错误（触发时退出代码为 1）

package.json中说一点 .js src的含义：匹配js为后缀的文件名，匹配的目录为src目录下。

这时候需要提一下我们上面说到的那一个个报错了，这只是简单的几行代码就报出来这么多的错，如果是一个项目的代码，那改起来真让人有些抓狂，但是eslint为我们提供了一个方法，--fix。我们将package.json的

代码语言：javascript复制

"lint": "eslint --ext .js src"

修改为：

代码语言：javascript复制

"lint": "eslint --fix --ext .js src"

在此运行npm run lint，你会发现不报错了，另外，打开文件之后发现格式已经变化了。

javascript eslint node.js

0 人点赞