ESLint 插件推荐：eslint-config-standard-JavaScript中文网-JavaScript教程资源分享门户

在前端领域中，代码规范是一个非常重要的话题。为了能够让代码符合规范、易于维护，我们通常会使用 Linter 工具来提现出来一些不符合规范的代码，并给出相应的提示和建议。ESLint 是一个非常流行的 Linter 工具，它为我们提供了对 JavaScript / TypeScript 代码的检查和提示。针对不同的项目和团队，ESLint 还提供了各种不同的插件和配置，可方便进行定制化的使用。本文将尝试给大家介绍一种特别适用于我们前端团队的 ESLint 插件，它就是 eslint-config-standard。

什么是 `eslint-config-standard`？

eslint-config-standard 是一个 ESLint 的配置文件，它是一个开箱即用的基础规则集合，旨在让我们的代码更加规范。这个配置实际上是扩展了另一个配置 eslint-config-eslint，并覆盖了其中的规则。 eslint-config-standard 的目标是我们的代码应该读起来像一篇英文文章，从而可以更好的理解代码的含义。

默认情况下， eslint-config-standard 启用了 ECMAScript 6+ 中的语法规则，并添加了一些惯用语句和最佳实践。同时，它还对 Node.js 和 CommonJS 提供了开箱即用的支持。

`eslint-config-standard` 的优点

更加严格的语法检查

eslint-config-standard 在语法检查方面尤为严格，它会在一些常见的错误语法出现时，立即给出提示。例如，在代码中出现了多余的逗号或括号，或者写错了单词等等，它都会给出提示，避免这些错误出现在正式的部署环境中。

统一的代码风格

统一代码风格可减少代码混乱度，让代码更加易于维护。使用 eslint-config-standard 的这种特定的配置文件，可以使我们团队中的所有人都遵循同样的代码风格，这是非常重要的。通过使用统一的代码风格，我们可以在维护项目方面获得更大的自如度。

基本不用再自定义配置

由于 eslint-config-standard 本身提供了许多良好的规则，因此不需要额外制定和维护很多自定义的规则。这可以节省我们更多的时间和精力来关注如何改进真正的业务代码。

如何使用 `eslint-config-standard`？

我们从头创建一个前端项目，并添加 eslint-config-standard 配置文件。以下是详细步骤：

mkdir myApp && cd myApp
npm init -y

安装 ESLint 和 eslint-config-standard。

npm i eslint eslint-config-standard eslint-plugin-import eslint-plugin-node eslint-plugin-promise --save-dev

项目根目录下创建 .eslintrc 文件，并输入以下内容：

{
  "extends": "standard"
}

为 NPM scripts 添加 lint 快捷方式，以使它可以通过 npm run lint 命令一次性检查所有代码。

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

创建几个 JavaScript 文件，在代码中加入一些语法错误和违反代码规范的代码。

const a = 5; // 使用未使用的变量
const foo = (bar) => console.log(bar); // 少写参数类型
foo();

运行 npm run lint，即可看到 ESLint 给出了相应的提示和建议。

// www.javascriptcn.com code example
myApp$ npm run lint

> myApp@1.0.0 lint /Users/Documents/Code/myApp
> eslint .

/.../myApp/index.js
   1:7   error  'a' is assigned a value but never used        no-unused-vars
   4:11  error  Missing return type on function                missing-jsdoc
   5:5   error  'bar' is missing in props validation           react/prop-types
   6:5   error  Expected an assignment or function call and instead saw an expression  no-unused-expressions

✖ 4 problems (4 errors, 0 warnings)

了解了 eslint-config-standard 的优点和使用方法之后，我们可以考虑在以后的代码工作中实践并使用它，以使我们的代码更规范、更易维护。在工作中，培养好的代码规范习惯，也是提高团队代码整体质量的一种重要方法。

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

ESLint 插件推荐：eslint-config-standard

什么是 eslint-config-standard？

eslint-config-standard 的优点