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 安装。以下是安装步骤：

全局安装：
使用 npm 或 yarn 全局安装 Prettier。
```
npm install -g prettier
```
或者
```
yarn global add prettier
```
项目本地安装：
在项目中，通过 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 格式化代码。

创建钩子脚本：
在项目的 .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)$')"

使脚本可执行：
执行以下命令使脚本可执行：
```
chmod +x .git/hooks/pre-commit
```

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

常见问题与解决办法

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

常见错误及解决方法

未安装 Prettier：
确保你已经全局或本地安装了 Prettier。可以通过以下命令检查是否安装成功：
```
prettier --version
```
配置文件未生效：
确保配置文件的路径正确，并且文件名符合 .prettierrc 或 .prettierrc.json 等格式。检查配置文件的语法是否正确。
代码未按预期格式化：
确认你使用的配置项是否正确。如果需要自定义配置，可以在 .prettierrc 文件中进行相应的配置。

Prettier遇到问题时的调试技巧

检查 Prettier 版本：
确保你使用的 Prettier 版本是最新的，可以通过以下命令检查版本号：
```
prettier --version
```
查看错误日志：
在终端中运行 Prettier 命令时，查看终端输出的错误信息。通常错误信息会提示你问题所在。
使用 --debug 参数：
在运行 Prettier 时，可以使用 --debug 参数来启用调试模式，查看详细的错误信息。
```
prettier --write --debug ./src/**/*.js
```
调试配置文件：
如果配置文件未生效，可以尝试使用 Prettier 的命令行工具直接读取配置文件，查看配置文件是否加载成功。
```
prettier --check --config .prettierrc.json ./src/**/*.js
```