如何在 Node.js 应用程序中使用 ESLint

这是我参与8月更文挑战的第8天，活动详情查看：8月更文挑战javascript

ESLint 是一个开源 JavaScript linting 实用程序，它能够帮助咱们规范代码，克服开发人员的一些意想不到错误，由于 JavaScript 是弱类型的语言。html

Javascript 社区中有不少规范化选项，好比 JSHint 和 JSCS，用于代码 linting，包括今天咱们要讲的 ESLint。前端

ESLint 旨在使全部规则彻底可插入。这是它产生的主要缘由之一。它容许开发人员建立本身的 linting 规则。ESLint 官方指南中提供的每一个规则都是独立的规则，开发人员能够在任什么时候候决定是否使用特定的规则。vue

安装

对于项目目录的本地安装：java

$ npm i eslint -D
复制代码

对于工做系统中的全局安装：node

$ npm i eslint -g
复制代码

安装好后，咱们就能够经过终端中的 eslint 命令使用 ESLint。react

配置

最简单的配置方法是设置一个 .eslintrc JSON 文件，其中能够描述全部的 linting 规则。git

.eslintrc 的一个示例：github

{
  "env": {
    "node": true,
    "browser": true
  },
  "globals": {
    "exampleGlobalVariable": true
  },
  "rules": {
    "no-console": 0,
    "space-infix-ops": "error",
    "quotes": ["error", "single", {
      "avoidEscape": true,
      "allowTemplateLiterals": true
    }],
    "space-before-blocks": ["error", "always"],
    "semi": ["error", "never"]
  },
  "plugins": []
}
复制代码

主要字段：npm

parse — 指定解析器
parserOptions — 指定解析器选项
env — 指定脚本的运行环境
root — 为 true 时，中止向上查找父级目录中的配置文件
globals — 脚本在执行期间访问的额外的全局变量
rules — 在此处添加您的自定义规则

若是全局安装了 eslint，咱们还能够使用如下命令生成配置文件：

$ eslint --init
复制代码

在其余状况下，若是您已在本地将其安装到项目中，则须要在终端中输入：

$ ./node_modules/.bin/eslint --init
复制代码

在这两种状况下，都会提示您生成 .eslintrc 文件的一组基本规则。

上述提示后生成的文件示例：

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "rules": {
    "indent": [
      "error",
      "tab"
    ],
    "linebreak-style": [
      "error",
      "windows"
    ],
    "quotes": [
      "error",
      "single"
    ],
    "semi": [
      "error",
      "never"
    ]
  }
}
复制代码

有关配置的详细信息，请阅读此处。

为了方便运行，咱们能够在项目的 package.json，在 scripts 字段里面添加如下脚本：

{
  "scripts" : {
    "lint": "eslint **/*.js",
    "lint-html": "eslint **/*.js -f html -o ./reports/lint-results.html",
    "lint-fix": "eslint --fix **/*.js"
  }
}
复制代码

咱们将该规则应用于如下文件：

var a = 1;
console.log(1);
复制代码

执行 npm run lint 后将出现如下信息：

ESLint 提示已经很明显了：3 个错误。第一行和第二行的最后又额外的分号错误，a 被赋值但从未使用。

而且提示使用 --fix 选项修复错误和警告，有 2 个错误是能够修复的。如今，使用 npm run lint-fix 修复它，a 的去留就看本身手动更改。

你还能够运行 npm run lint-html 命令，将检查结果写入一个网页文件。

配置文件优先级

若是您按上面的步骤一步步来，你会可能已经知道，ESLint 支持几种格式的配置文件。

如今存在一个问题，若是同个目录下有多个 ESLint 文件，它们会如何执行，优先级如何？

ESLint 源码中给出了咱们答案，其优先级配置以下：

const configFilenames = [
  ".eslintrc.js",
  ".eslintrc.yaml",
  ".eslintrc.yml",
  ".eslintrc.json",
  ".eslintrc",
  "package.json"
]
复制代码

.eslintrc.js > .eslintrc.yaml > .eslintrc.yml > .eslintrc.json > .eslintrc > package.json

规则

ESLint 中的规则是单独添加的。默认状况下不强制执行任何规则。您必须明确指定规则，而后才会为 linting 过程启用它。

点击此处官方文档查找完整的规则列表。

在决定要包含哪些规则以后，您必须设置这些错误级别。每一个错误级别可定义以下：

0 — 关闭规则，至关于 off
1 — 打开规则做为警告，至关于 warn
2 — 打开规则做为错误，至关于 error

错误和警告之间的区别在于 eslint 完成时将具备的退出代码。若是发现任何错误，eslint 将以 1 退出代码退出，不然将以 0 退出。

若是您在生成步骤中进行 lint，这容许您控制哪些规则应破坏您的生成，哪些规则应视为警告。

环境

您正在编写的代码可能适用于特定环境，例如，您可能正在使用 Express 框架在 Node.js 应用程序中编写 REST API，而且该应用程序的前端将在 Vue/React 中构建。

两个不一样的项目、两个不一样的环境，它们均可以在一个文件中具备单独的 eslint 配置，即便客户端和服务器位于一个被视为项目根目录的项目目录下。

它是如何完成的？

经过在 .eslintrc 的 "env" 部分将环境 id 设置为 true。

ESLint CLI

ESLint 附带一个命令行界面（CLI），用于 lint 文件或目录。

$ eslint index.js
复制代码

前面示例中咱们已经看到，运行命令后生成的输出将按文件分组，并将指定 line:column 警告/错误、错误缘由以及每一个故障的规则名称。

将 ESLint 与您喜欢的编码风格结合使用

ESLint 我的并不提倡任何编码风格。您能够设置 .eslintrc 文件以使用您喜欢的样式规则强制编码样式。

您还能够将 ESLint 与样式指南（如 Airbnb、JavaScript 标准风格）一块儿使用。

你还必须使用额外的插件，例如：

Airbnb 的插件 eslint-config-airbnb-base。
JavaScript 标准风格 eslint-config-standard
一些流行库的插件：Vue | React

团队规范

AlloyTeam 给出的 React/Vue/TypeScript 项目的渐进式 ESLint 配置（eslint-config-alloy），如下贴出 React 的一小部分配置：

module.exports = {
  parserOptions: {
    babelOptions: {
      presets: ['@babel/preset-react'],
    },
  },
  plugins: ['react'],
  rules: {
    /**     * 布尔值类型的 propTypes 的 name 必须为 is 或 has 开头     * @reason 类型相关的约束交给 TypeScript     */
    'react/boolean-prop-naming': 'off',
    /**     * <button> 必须有 type 属性     */
    'react/button-has-type': 'off',
    /**     * 一个 defaultProps 必须有对应的 propTypes     * @reason 类型相关的约束交给 TypeScript     */
    'react/default-props-match-prop-types': 'off',
    /**     * props, state, context 必须用解构赋值     */
    'react/destructuring-assignment': 'off',
    /**     * 组件必须有 displayName 属性     * @reason 不强制要求写 displayName     */
    'react/display-name': 'off',
    // ...
  }
}
复制代码

您能够参考该团队的一些配置，应用到本身的项目中。