Prettier 详解

什么是 Prettier？

Prettier 是一个“有意见的”代码格式化工具，旨在确保您的代码具有一致的风格和更高的可读性。它通过解析代码并重新格式化，消除因代码风格问题导致的差异，使团队中的每个人都遵循相同的编码标准。Prettier 支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS、JSON、Markdown 等等。

为什么使用 Prettier？

一致性：在一个项目中，统一的代码风格可以提高代码的可读性和可维护性。Prettier 自动格式化代码，使其风格一致。
减少争论：代码风格的争论往往是团队协作中的常见问题，使用 Prettier 可以消除这些争论，因为所有代码都会被自动格式化成一致的风格。
节省时间：手动格式化代码既费时又容易出错，Prettier 可以自动完成这些工作，让开发者专注于逻辑和功能实现。
易于集成：Prettier 可以与多种编辑器、版本控制系统以及 CI/CD 管道集成，使其在开发流程中的各个环节都能发挥作用。

安装和配置

安装

你可以通过 npm 或 yarn 来安装 Prettier。在项目目录下运行以下命令：

npm install --save-dev prettier

或者

yarn add --dev prettier

基本使用

安装完成后，你可以在项目的根目录下创建一个配置文件 .prettierrc 来定制 Prettier 的行为。例如：

{
  "singleQuote": true,
  "semi": false
}

在此配置中，Prettier 会将所有的双引号转换为单引号，并且在行尾不添加分号。

命令行使用

你可以通过命令行来格式化代码文件。例如，要格式化 src 目录下的所有文件，可以运行以下命令：

npx prettier --write src/

这个命令会找到 src 目录下的所有代码文件，并根据 .prettierrc 文件中的配置进行格式化。

配置文件

Prettier 支持多种配置文件格式，包括 JSON、YAML 和 JavaScript。可以选择创建 .prettierrc、.prettierrc.yaml、.prettierrc.yml、.prettierrc.json 或 .prettierrc.js 文件。

例如，使用 YAML 格式：

singleQuote: true
semi: false

也可以使用 JavaScript 文件：

module.exports = {
  singleQuote: true,
  semi: false,
};

忽略文件

有时，你可能希望 Prettier 忽略某些文件或目录。可以创建一个 .prettierignore 文件，其语法与 .gitignore 类似。例如：

build/
node_modules/

编辑器集成

大多数现代编辑器都支持 Prettier。以下是几个常见编辑器的配置方法：

VS Code

安装 Prettier 插件：在扩展市场搜索并安装 “Prettier - Code formatter” 插件。
配置格式化选项：打开 VS Code 设置，搜索 Prettier，并根据需要配置选项。
设置自动格式化：在 VS Code 设置中搜索 format on save 并启用 Editor: Format On Save 选项。

WebStorm

打开设置：File > Settings > Plugins。
搜索并安装 Prettier 插件。
配置 Prettier：在设置中找到 Languages & Frameworks > JavaScript > Prettier，并指定 Prettier 的路径（通常是 node_modules/.bin/prettier）。
启用保存时格式化：在设置中搜索 Reformat on save 并启用。

Sublime Text

安装 Package Control：按 Ctrl+Shift+P，输入 Install Package Control 并选择它。
安装 Prettier 插件：按 Ctrl+Shift+P，输入 Package Control: Install Package，然后搜索并安装 Prettier.
配置 Prettier：在项目根目录下创建一个 prettier.config.js 文件，并添加配置选项。

配置选项详解

Prettier 提供了多种配置选项，以满足不同项目的需求。以下是一些常用选项：

printWidth: 每行的最大字符数，默认为 80。超过这个宽度的代码将被换行。
tabWidth: 一个制表符等于多少个空格，默认为 2。
useTabs: 使用制表符而不是空格缩进，默认为 false。
semi: 在每行末尾添加分号，默认为 true。
singleQuote: 使用单引号而不是双引号，默认为 false。
trailingComma: 在多行结构中添加尾随逗号，可选值有 "none", "es5", "all"。
bracketSpacing: 在对象文字中的括号之间添加空格，默认为 true。
jsxBracketSameLine: 将 JSX 的闭合标记放在最后一行的末尾，而不是单独一行，默认为 false。
arrowParens: 在箭头函数只有一个参数时，使用括号，默认为 "always"。另一个选项是 "avoid"。

以下是一个完整的 .prettierrc 示例：

{
  "printWidth": 100,
  "tabWidth": 4,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid"
}

与 ESLint 集成

ESLint 是另一个流行的代码检查工具，通常与 Prettier 一起使用以确保代码质量。以下是如何将两者集成：

安装必要的包：

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

配置 ESLint：

在 .eslintrc 文件中添加以下内容：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

这将确保 ESLint 使用 Prettier 的规则来检查代码格式，并且在格式不正确时报错。

ESLint 与 Prettier 的角色分工

ESLint：主要用于检查代码的语法和逻辑错误，以及一些代码风格问题。
Prettier：主要用于格式化代码，使其风格一致。

通过结合使用 ESLint 和 Prettier，可以确保代码既没有语法错误，又具有一致的格式。

在 CI/CD 中使用 Prettier

在 CI/CD 管道中集成 Prettier，可以确保在代码被合并到主分支之前，所有代码都经过格式化检查。以下是一个使用 GitHub Actions 的示例：

name: Prettier Check

on: [push, pull_request]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run Prettier
        run: npx prettier --check .

这个工作流将在每次推送或拉取请求时运行 Prettier，并检查代码格式是否符合规定。如果有任何格式问题，工作流将失败。

常见问题解答

Prettier 与 ESLint 规则冲突

有时，Prettier 的格式化规则可能与 ESLint 的某些规则冲突。为了避免这些冲突，可以使用 eslint-config-prettier 关闭所有不必要的 ESLint 规则：

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

运行 Prettier 很慢

在大型项目中，运行 Prettier 可能会很慢。可以通过以下方式优化：

使用 --cache 选项：Prettier 目前没有内置缓存功能，但你可以使用 lint-staged 和 husky，在提交代码时只格式化变更的文件。
分目录运行：将 Prettier 运行在特定的目录或文件上，而不是整个项目。

自定义格式化规则

如果 Prettier 默认的格式化规则不符合你的需求，可以通过 .prettierrc 文件进行自定义配置，具体配置选项详见上文。

总结

Prettier 是一个强大的工具，可以帮助开发者自动化代码格式化，确保代码风格一致，减少争论，节省时间。通过合理配置和与其他工具集成，Prettier 可以显著提高开发效率和代码质量。无论您是个人开发者还是团队协作，使用 Prettier 都是一个明智的选择。

希望这篇博客能帮助您更好地理解和使用 Prettier，如果您有任何问题或建议，欢迎留言讨论！