Prettier学习：初学者指南

本文详细介绍了Prettier的使用方法，包括Prettier的安装方法、配置技巧以及如何将Prettier集成到编辑器和Git中。通过操作步骤和配置项说明，读者可以轻松掌握Prettier的使用方法。

Prettier简介与安装

Prettier 是一个流行的代码格式化工具，能够自动对代码进行格式化，使其符合统一的编码规范。它支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS、JSON 等。Prettier 的目标是减少代码风格上的争议，提高团队合作的效率。

什么是Prettier

Prettier 是一个代码格式化工具，它会根据预定义的规则自动格式化代码。它支持多种语言，包括但不限于 JavaScript、TypeScript、HTML 和 CSS。Prettier 的设计原则是“从不破坏代码”，这意味着它尽量不会修改代码逻辑，而只是确保代码风格一致。

Prettier的主要功能和优势

• 自动格式化：Prettier 可以自动根据预定义的规则格式化代码，使其符合统一的编码规范。
• 多语言支持：Prettier 支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS 等。
• 统一编码风格：使用 Prettier 可以确保团队成员的代码风格一致，减少代码风格上的争议。
• 易于集成：Prettier 可以很容易地集成到各种开发工具和构建流程中，如编辑器、构建工具等。
• 高度可配置性：虽然 Prettier 有其默认规则，但也允许自定义配置，以适应团队的具体需求。

Prettier的安装方法

Prettier 可以通过 npm 或 yarn 安装。以下是安装步骤：

1. 全局安装：
   使用 npm 或 yarn 全局安装 Prettier。

   npm install -g prettier

   或者

   yarn global add prettier

2. 项目本地安装：
   在项目中，通过 npm 或 yarn 安装 Prettier 作为本地依赖。

   npm install prettier --save-dev

   或者

   yarn add prettier --dev

配置Prettier

配置 Prettier 可以帮助你根据项目需求自定义代码格式化规则。Prettier 提供了默认的配置，但你也可以通过创建配置文件来覆盖这些默认设置。

创建Prettier配置文件

Prettier 支持使用 .prettierrc、.prettierrc.json、.prettierrc.js、.prettierrc.yaml 等文件来配置代码格式化规则。通常在项目的根目录下创建一个配置文件。

例如，创建一个 .prettierrc.json 文件：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80,
  "tabWidth": 2
}

在这个配置文件中，你可以定义各种规则，如是否使用分号、单引号还是双引号、尾随逗号的使用等。

常用配置项介绍

以下是 Prettier 常用的配置项及其含义：

• semi: 是否在语句末尾添加分号。例如：

  "semi": true

• singleQuote: 是否使用单引号。例如：

  "singleQuote": true

• trailingComma: 指定尾随逗号的使用方式，默认值为 none，也可以设置为 all 或 es5。例如：

  "trailingComma": "all"

• printWidth: 设置每行的最大字符数，默认值为 80。例如：

  "printWidth": 80

• tabWidth: 设置缩进空格数，默认值为 2。例如：

  "tabWidth": 2

Prettier的使用方法

Prettier 可以通过命令行工具使用，也可以集成到各种编辑器中，方便地进行代码格式化。

命令行使用

Prettier 可以通过命令行工具来进行格式化。你可以指定要格式化的文件或文件夹。例如：

prettier --write ./src/**/*.js

这个命令会格式化 src 目录下所有 .js 文件。你也可以使用 --check 参数来检查代码是否符合格式规范，而不进行实际的格式化操作。

prettier --check ./src/**/*.js

集成到编辑器中

将 Prettier 集成到编辑器中可以帮助你在编写代码时实时进行格式化。以下是几个常见编辑器的集成方法：

• VS Code：

  1. 安装 Prettier 扩展。
  2. 在 VS Code 中打开设置，将“格式化提供程序”设置为 Prettier。
  3. 在编辑器中打开代码文件，按下 Shift + Alt + F 进行格式化。
• Sublime Text：
  1. 安装 Prettier 插件。
  2. 在插件设置中配置 Prettier 的路径。
  3. 在编辑器中打开代码文件，按下 Ctrl + Shift + P 进行格式化。

Prettier的规则详解

Prettier 提供了详细的代码格式化规则，以及自定义代码风格的方法。

代码格式化规则

Prettier 的默认规则包括以下内容：

• 自动插入分号。
• 使用单引号而不是双引号。
• 在函数调用中使用尾随逗号。
• 保持每行不超过预设的字符数。
• 按照特定的缩进规则进行缩进。

例如，假设你有一个简单的 JavaScript 文件：

function greet(name) {
    return "Hello, " + name;
}

使用 Prettier 格式化后，代码将如下所示：

function greet(name) {
  return "Hello, " + name;
}

这里可以看到函数体内的代码被缩进了一级，并且每行的字符数被控制在合理的范围内。

代码风格自定义

Prettier 允许自定义代码风格，以便更好地适应团队的工作习惯。通过配置文件，你可以覆盖预定义的规则。

例如，假设你需要自定义以下规则：

• 使用双引号。
• 在函数调用中不使用尾随逗号。
• 每行字符数为 100。

你可以创建一个 .prettierrc.json 文件，并设置这些规则：

{
  "singleQuote": false,
  "trailingComma": "none",
  "printWidth": 100
}

Prettier与Git的集成

将 Prettier 集成到 Git 中可以帮助你在提交代码之前自动格式化代码，确保每次提交的代码都符合编码规范。

在Git中使用Prettier预提交钩子

Git 提供了预提交钩子（pre-commit hook），可以在提交代码之前执行一些自定义操作。你可以通过预提交钩子来调用 Prettier 格式化代码。

1. 创建钩子脚本：
   在项目的 .git/hooks 目录下创建一个 pre-commit 文件，并添加以下内容：

   #!/bin/sh
   npx prettier --write "$(git diff --cached --name-only --diff-filter=ACM | grep -E '\.(js|jsx|ts|tsx|json|css|less)$')"

2. 使脚本可执行：
   执行以下命令使脚本可执行：

   chmod +x .git/hooks/pre-commit

这样，每次在 Git 中提交代码时，都会自动运行 Prettier 对代码进行格式化。

常见问题与解决办法

在使用 Prettier 过程中，可能会遇到一些常见的错误和问题。以下是一些常见问题及解决方法。

常见错误及解决方法

1. 未安装 Prettier：
   确保你已经全局或本地安装了 Prettier。可以通过以下命令检查是否安装成功：

   prettier --version

2. 配置文件未生效：
   确保配置文件的路径正确，并且文件名符合 .prettierrc 或 .prettierrc.json 等格式。检查配置文件的语法是否正确。

3. 代码未按预期格式化：
   确认你使用的配置项是否正确。如果需要自定义配置，可以在 .prettierrc 文件中进行相应的配置。

Prettier遇到问题时的调试技巧

1. 检查 Prettier 版本：
   确保你使用的 Prettier 版本是最新的，可以通过以下命令检查版本号：

   prettier --version

2. 查看错误日志：
   在终端中运行 Prettier 命令时，查看终端输出的错误信息。通常错误信息会提示你问题所在。

3. 使用 --debug 参数：
   在运行 Prettier 时，可以使用 --debug 参数来启用调试模式，查看详细的错误信息。

   prettier --write --debug ./src/**/*.js

4. 调试配置文件：
   如果配置文件未生效，可以尝试使用 Prettier 的命令行工具直接读取配置文件，查看配置文件是否加载成功。

   prettier --check --config .prettierrc.json ./src/**/*.js