Eslint

作者: 王振州 时间: 2020-12-18

ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。在许多方面，它和 JSLint、JSHint 相似，除了少数的例外：

• ESLint 默认使用 Espree 解析 JavaScript。
• ESLint 使用 AST 去分析代码中的模式
• ESLint 是完全插件化的。每一个规则都是一个插件并且你可以在运行时添加更多的规则。

1 安装和使用

你可以使用 npm 安装 ESLint：

npm install eslint --save-dev

紧接着你应该设置一个配置文件：

./node_modules/.bin/eslint --init

之后，你可以在任何文件或目录上运行 ESLint 如下：

./node_modules/.bin/eslint <filename>

也可以在全局而不是本地安装 ESLint (使用 npm install eslint --global)。但是，你使用的任何插件或可共享配置都必须安装在本地。

2 配置

  运行 eslint --init 之后，.eslintrc 文件会在你的文件夹中自动创建, 你可以在 .eslintrc 文件中看到许多像这样的规则：

{
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
}

semi 和 quotes 是 ESLint 中 规则 的名称。第一个值是错误级别，可以使下面的值之一：

• "off" or 0 - 关闭规则
• "warn" or 1 - 将规则视为一个警告（不会影响退出码）
• "error" or 2 - 将规则视为一个错误 (退出码为 1)

详细的配置可以参照官网配置, 官网上写的还是比较详细的

3 .eslintignore

  你可以通过在项目根目录创建一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录, 忽略模式和.gitignore 相似

**/*.js // 将忽略所有js文件

4 项目中的配置

module.exports = {
  root: true,
  env: {
    node: true,
  },
  // plugin:xx/yy  使用eslint-plugin-xx 的 config的yy规则
  // @xx/yy  yy是可共享的配置
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": 0,
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    "vue/no-parsing-error": [
      2,
      {
        "x-invalid-end-tag": false,
      },
    ],
    // 新增一些重要rules
    // 要求使用 let 或 const 而不是 var
    "no-var": 2,
    // 注释前空格
    "spaced-comment": ["error", "always"],
    // 禁止修改 const 声明的变量
    "no-const-assign": 2,
    // 要求或禁止 var 声明中的初始化(初值)
    "init-declarations": 0,
    // 禁用 eval()
    "no-eval": 2,
    // 要求 for-in 循环中有一个 if 语句
    "guard-for-in": 2,
    // 禁止重复声明变量
    "no-redeclare": 2,
  },
  parserOptions: {
    // https://eslint.bootcss.com/docs/user-guide/configuring#specifying-parser-options
    parser: "babel-eslint",
  },
};