如何快速集成 ESLint 和 Prettier 进行代码格式化-JavaScript中文网-JavaScript教程资源分享门户

如何快速集成 ESLint 和 Prettier 进行代码格式化

前言

在开发中，代码风格问题是不可避免的。不同的开发人员可能有不同的编码规范和喜好，导致代码风格不一致。这会给代码的维护和可读性带来很大的困难。为此，我们需要使用自动化工具可以解决这些问题。本文将介绍 ESLint 和 Prettier 并提供集成实例。

ESLint

ESLint 是一个 JavaScript 语法检查工具，可以在开发过程中检测出一些常见的问题和错误。ESLint 可以强制施加通用的编码规范，并检测和推荐最佳实践代码。它可以检查语法错误和样式错误，包括变量声明、控制结构、语言功能等等，这样可以确保指定的项目文件集合符合要求的格式和约定。

安装和配置

首先，我们需要在项目中安装 ESLint。

npm install eslint --save-dev

ESlint 支持各种配置规则。我们可以手动创建 .eslintrc 文件并在其中指定一个或多个规则：

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

这个配置文件包含一些常用的规则，例如不允许使用分号、限制单引号、启用了一组带有推荐的规则。

配置完成后，我们可以在项目中使用 ESLint 检查代码。例如，在全局安装时，可以使用 eslint 命令：

eslint ./src

这个命令可以检查项目中 src 目录中的所有文件

Prettier

Prettier 是一款代码格式化工具，可以自动调整代码的布局和样式，使代码更易于理解和操纵。Prettier 并不需要用户为其编写配置文件，因为它根据一组内置设置自动格式化代码。

安装和配置

与 ESLint 相同，我们可以使用 npm 前缀将 Prettier 安装为本地包：

npm install prettier --save-dev

使用 Prettier 需要创建一个配置文件 .prettierrc，表示需要检查的文件类型和格式化配置：

{
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
}

在使用 Prettier 时，我们可以通过命令行界面使用以下命令格式：

prettier --write "src/**/*.{js,jsx,ts,tsx}"

或者使用一些插件或编辑器自动格式化文件。

集成 ESLint 和 Prettier

尽管 ESLint 和 Prettier 两个工具旨在解决不同问题，但它们都可以在 VS Code 中集成并优化代码质量。

首先，我们需要安装一些插件：

“ESLint” ：在 VS Code 上搜索“ESLint”，选择相应插件安装，并重新启动编辑器。
“Prettier”：在 VS Code 上搜索“Prettier”，选择相应插件安装，并重新启动编辑器。
“ESLint Prettier code format”：安装 vscode 扩展 'ESLint Prettier code format'

现在，我们还需要配置 .eslintrc.json 文件，增加一下配置

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

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

在这里，我们在 .eslintrc.json 文件中添加了一些配置用于集成 Prettier 工具。我们使用 prettier/prettier 规则指定了一些规则。这个规则将报告与 Prettier 相知不符的问题，例如行长度不正确或没有使用单引号。

现在，我们的 VS Code 工作区中应该自动使用 ESLint 和 Prettier 的规则。如果您不确定这些插件和工具是否正常工作，请尝试通过一些简单的示例代码检查：

const add = (a, b) => {
  return a + b
}

如果格式不符合所需的规则，则代码将自动转换为以下格式：

const add = (a, b) => {
  return a + b
}

结论

为了提高代码的可读性和可维护性，在开发过程中必须遵循统一的代码风格。ESLint 和 Prettier 工具可以帮助我们标准化代码，并减少开发人员之前的差异。我们可以将 ESLint 和 Prettier 集成到 VS Code 中，始终保持这些工具正确工作的状态，提高团队开发的生产力。

参考链接

ESLint Docs: https://eslint.org/docs/user-guide/getting-started
Prettier Docs，https://prettier.io/docs/en/index. README.html
VS Code Marketplace：https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
VS Code Marketplace：https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

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