JavaScript 工程中如何配置 ESLint 和 Prettier 来保证代码规范

阅读时长 6 分钟读完

在编写大型的 JavaScript 应用程序时,创建可维护且规范化的代码是尤为重要的。为了实现这一目标,许多开发者使用许多不同的工具和技术,其中包括 ESLint 和 Prettier。

ESLint 是一款插件化和可配置的 JavaScript 语法和代码风格检查工具。通过 ESLint 我们可以在编写代码时使用 Lint 规则提前定位代码中潜在的错误,从而帮助我们确保代码的可读性、可维护性和一致性。

Prettier 则是一款代码格式化工具,它可以自动化执行大部分的代码格式化操作。使用 Prettier,我们可以确保代码风格的一致性,而无需在代码库中提交被不同人员格式化的代码。

步骤

下面将介绍如何在 JavaScript 工程中配置 ESLint 和 Prettier。这些步骤可以适用于大多数项目。同时,我们将以一个示例项目为基础,这个项目使用 React 框架和 Webpack 作为构建工具。

第一步:安装和配置 ESLint

首先,我们需要在项目中安装 ESLint。可以使用以下命令:

安装 ESLint 后,我们需要在根目录中创建 .eslintrc 文件。该文件告诉 ESLint 如何检查我们的代码。假设我们使用的是 React:

-- -------------------- ---- -------
-
  ---------- ---------------------- ----------------------------
  ---------- ----------
  ---------------- -
    -------------- -----
    ------------- ---------
    --------------- -
      ------ ----
    -
  --
  ------ -
    ---------- -----
    ------ -----
    ------- ----
  --
  -------- -
    ----------------- --------- - -------------------- ---- ---
    ------------------- -----
  -
-

该配置文件包括以下几个关键点:

  • extends:通过扩展内置的规则和配置,我们可以保证我们的代码符合最佳实践和可读性的惯例。
  • plugins:选择要使用的插件。
  • parserOptions:设置 ES 版本和其他解析器选项。这里我们使用了 2020 版本的 ECMAScript,并启用 JSX。
  • env:指定特定于项目的运行环境,这里我们需要通过在浏览器中运行、使用 ES6 并拥有 Node.js 环境来定义。
  • rules:我们可以根据需求添加自定义规则,也可以根据需要禁用现有规则。

第二步:安装和配置 Prettier

我们在项目中安装 Prettier,可以使用以下命令:

安装完成后,我们需要在根目录中创建 .prettierrc 文件。该文件用于配置 Prettier 如何格式化我们的代码:

该文件包含与使用 Prettier 相关的配置选项:

  • semi:控制是否使用分号来结束语句,我们选择了 false
  • trailingComma:控制对象、数组等的末尾是否有逗号,这里我们选择了 all,表示总是添加末尾逗号。
  • singleQuote:选择是否使用单引号或双引号。
  • printWidth:控制行的最大字符宽度。
  • arrowParens:控制符号函数参数周围括号的使用,这里我们选择始终使用箭头函数参数括号。
  • tabWidth:文件中使用的制表符宽度。

第三步:安装编辑器扩展

安装 Prettier 和 ESLint 的编辑器扩展是关键的一步。在此步骤中,我们将安装并配置扩展,以便在工作中能够对代码进行及时的检查和格式化。

对于 VS Code 编辑器,我们可以分别安装以下扩展:

  • ESLint:提供了一个在编辑器中直接查看 Lint 错误的界面。
  • Prettier:提供了强大的代码格式化功能。

安装完毕后,我们需要在 VS Code 中设置,打开 settings.json 文件,并添加以下设置:

-- -------------------- ---- -------
-
  ---------------------- -----
  --------------------------- -
    ---------------- ----
  --
  ------------------ -
    -------
    -------------
    ------------------
    -------------
    -----------------
  --
  ---------------------- ---
  ----------------------- ----
-

这里我们启用了editor.formatOnSaveeditor.codeActionsOnSave选项,以在保存文件时运行 Prettier 格式化和 Lint 的自动修复操作。

最后,我们需要确保 eslint.validate 数组包括了代码文件的所有语言类型。我们也可以在 VS Code 的设置中通过搜索 “ESLint” 来确定特定于语言的设置。

结论

通过仔细遵循这些步骤,我们可以在 JavaScript 项目中实现自动化的代码格式化和 Lint 规则遵守。这些最佳实践有助于确保代码库的一致性,可读性和可维护性。虽然这可能看起来費时且琐碎,但可以极大地增加团队开发效率,并减少程序员生产中出的不必要的错误。

参考资料

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/677233a56d66e0f9aad58e61

纠错
反馈