提升代码质量，万无一失的 ESLint 实战整理-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发过程中，我们不但需要快速完成需求，同时也需要保证代码的质量，避免出现一些令人头疼难以捉摸的 bug。为了达到这个目的，我们可以使用各种工具进行代码检查和自动化测试等。其中，ESLint 就是一个非常强大的前端代码检查工具，它可以帮助开发者避免常见的代码问题，提高代码的健壮性和可维护性。

本文将介绍如何使用 ESLint 实战整理来提升前端代码的质量，具体内容包括：

ESLint 是什么？它有什么作用？
如何使用 ESLint ？如何设置 ESLint 配置文件？
ESLint 常用的检查规则和插件
如何在项目中应用 ESLint？

什么是ESLint ？

ESLint 是一个JavaScript代码检查工具，它的目标是保证代码的一致性和避免错误。它基于 AST 到规则的映射，可以对代码进行非常多样化的检查。有了它，我们可以在代码编写过程中就对常见的错误和不规范的写法进行提示和纠正，确保代码的稳定和可维护性。

如何使用 ESLint ？

ESLint 安装非常简单，可以通过npm进行安装：

$ npm install eslint --save-dev

安装完 ESLint 模块后，就可以开始使用了。通常我们需要在工程根目录下新建一个 .eslintrc 文件来设置 ESLint 的规则。如果你使用了 VSCode 等编辑器并开启了 ESLint 插件，那么它会自动读取该文件并根据其中配置的规则检查你的代码。如果你在终端使用了 ESLint 命令，则可以在命令行中添加 -c 选项指定 .eslintrc 文件的路径来加载规则。

对于 .eslintrc 文件的编写，我们通常需要指定想要使用的规则和插件。这些规则和插件通过 rules 选项和 extends 选项进行配置。rules 选项可以指定检查的规则和检查级别；extends 选项允许我们使用预置的规则集和推荐的配置。

下面是一个 .eslintrc.js 文件的例子，其中使用了 eslint:recommended 等规则集：

// www.javascriptcn.com code example
module.exports = {
  // 所继承的推荐规则集
  extends: ["eslint:recommended"],
  // 添加其他自定义规则
  rules: {
    // 检查对象属性的引号
    "quote-props": ["error", "consistent-as-needed"],
    // 禁止使用 eval()
    "no-eval": "error",
    // 字符串必须使用单引号
    quotes: ["error", "single"],
    // 要求使用 === 和 !==
    eqeqeq: ["error", "always"],
  },
  // 将该选项设置为 true 将允许 ESLint 在 Vue 文件中处理 script 中的 <script></script> 区域
  parserOptions: {
    parser: "babel-eslint",
  },
  // 添加插件
  plugins: [],
};

ESLint 常用检查规则和插件

ESLint 内置了很多检查规则和插件，也有很多社区插件可供选择。这里简单介绍一些常用的规则和插件。

缩进检查

在代码编写过程中，缩进很容易被忽略。缩进不好会导致代码难以阅读或理解。ESLint 可以通过检查缩进方式来防止这种情况：

// www.javascriptcn.com code example
{
  "rules": {
    // 缩进使用 2 个空格
    "indent": ["error", 2, {
        // 允许 Switch 语句中的缩进
        "SwitchCase": 1,
        // 允许继承类中的缩进
        "MemberExpression": "off"
    }]
  }
}

引号检查

ESLint 可以对字符串中的引号作检查，可以检查单引号和双引号的使用方式：

// www.javascriptcn.com code example
{
  "rules": {
    // 字符串必须使用单引号
    "quotes": ["error", "single", {
        "avoidEscape": true, // 允许在字符串中使用单引号或双引号
        "allowTemplateLiterals": true  // 允许在字符串中使用模板字符串（`）
    }]
  }
}

代码行长度检查

代码行过长也会影响代码的可读性和可维护性。我们可以通过以下的配置检查代码行长度：

{
  "rules": {
    // 单行代码长度不得超过 80 个字符
    "max-len": ["error", { "code": 80 }]
  }
}

变量定义方式检查

ESLint 还可以对变量和常量的定义方式进行检查，来保证代码的一致性：

// www.javascriptcn.com code example
{
  "rules": {
    // 禁止使用 var，推荐使用 const 和 let
    "no-var": "error",
    // 禁止未使用的变量，排除函数参数
    "no-unused-vars": ["error", {
        "vars": "all",
        "args": "none"
    }]
  }
}

上面只是草草罗列了一些常用的规则，ESLint 还有很多其他有用的规则如空格、命名、分号、箭头函数等等。

除此之外，ESLint 还有很多第三方插件可供使用，可检测项目中的各种问题，如 Vue 的组件样式、React 的组件状态等。这里列举一些常用的插件：

eslint-plugin-vue 检查 Vue 文件
eslint-plugin-react 检查 React 文件
eslint-plugin-jest 检查 Jest 测试用例

如何在项目中应用 ESLint？

使用 ESLint 管理我们的代码有很多好处，但要确保其成功应用到项目中，需要以下步骤：

1. 配置 ESLint

如上文所述，在工程根目录下新建 .eslintrc 文件，设置 ESLint 的规则。

2. 安装 ESLint 插件

在项目中安装 ESLint 插件，通过插件，可以在编辑器中较为方便地编辑代码，实时显示错误。

3. 向项目中添加包含 ESLint 的测试脚本

在 package.json 文件中，向项目添加一个包含了 ESLint 测试脚本的命令。

"scripts": {
  "lint": "eslint ."
}

4. 更改集成环境中的代码检查设置

通过集成环境如 Webpack 和 Gulp 等，更改其代码检查设置，添加一个针对代码的 lint 命令。例如，在 Webpack 上可以这样实现：

// www.javascriptcn.com code example
{
  module: {
      rules: [
          {
              enforce: 'pre',
              test: /\.(js|jsx|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/,
              options: {
                  fix: true //自动解决一些格式问题
              }
          }
      ]
  }
}

5. 使用 Husky 进行代码提交前检查

Husky 是 git hooks 的管理工具。在代码提交前，可以通过 Husky 检查代码是否合规。

{
  "husky": {
    "hooks": {
      "pre-commit": "npm run lint"
    }
  }
}

以上 5 步的完成，即可在项目中成功应用 ESLint。

结语

通过 ESList 实战整理，我们学习了如何从多个方面提高前端代码的质量。ESLint 不仅可以对代码作出提示，还可以实现规则的自定义、插件的使用等功能，还可以将其与集成环境整合使用。学习和掌握了 ESLint 后，对于我们开发的代码规范、风格的连贯性和可维护性都至关重要。希望这篇文章能够帮助到大家。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d7ffc5a941bf7134e46817

提升代码质量，万无一失的 ESLint 实战整理

前言