Prettier入门：轻松掌握代码格式化

概述

Prettier是一种广泛使用的代码格式化工具，旨在通过标准化代码格式来提高团队协作效率。本文详细介绍了Prettier的作用、优势、安装方法和配置方式，帮助读者快速掌握Prettier入门知识。本文涵盖了从安装到基本使用方法的全过程。

Prettier简介 Prettier是什么

Prettier是一种广泛使用的代码格式化工具，其目标是通过自动化的代码格式化来提高团队协作效率，统一代码风格，减少代码审查中的无关争议。它支持多种编程语言，如JavaScript、TypeScript、HTML、CSS、JSON等，并且其简洁的设计使得它易于集成到各种开发环境中。

Prettier的作用和优势

Prettier的主要作用是自动处理代码的格式化问题，例如缩进、空格、换行等。它通过标准化代码格式来减少开发者在代码风格上花费的时间。使用Prettier的优势包括：

1. 提高代码一致性：确保所有团队成员编写的代码都遵循同样的格式，有助于提升代码的可读性和维护性。
2. 减少代码审查时间：自动化的代码格式化可以减少代码审查过程中因代码格式不一致而产生的争议。
3. 易于集成：Prettier可以很容易地集成到各种开发工具和编辑器中，并且支持多种编程语言。

Prettier与传统代码格式化工具的对比

Prettier与传统的代码格式化工具（如ESLint）相比，有以下几个显著特点：

1. 无配置：Prettier的设计理念是“约定优于配置”，即默认提供一套标准的代码格式，避免开发者需要花费大量时间去配置格式化规则。
2. 统一性：Prettier的格式化规则是固定的，一旦团队选择了Prettier，就意味着团队中的所有代码都将遵循同样的格式。
3. 自动修复：Prettier可以在用户保存文件时自动修复代码格式问题，无需用户手动处理。

例如，一个传统的代码格式化工具可能允许用户配置各种规则，如缩进类型、空格数量、行宽等，而Prettier则提供了一套固定的、一致的格式化规则，减少了配置的复杂性。

安装Prettier 安装Node.js环境

Prettier依赖于Node.js运行环境，因此首先需要安装Node.js。Node.js的安装过程相对简单，可直接从Node.js官网下载安装包，并按照安装向导完成安装。

安装完成后，可以通过命令行验证Node.js是否安装成功，输入以下命令：

node -v

如果成功安装的话，会返回Node.js的版本号。

使用npm安装Prettier

安装完Node.js后，接下来通过npm（Node Package Manager）来安装Prettier。在命令行中运行以下命令：

npm install -g prettier

这里的-g参数表示全局安装，这样可以确保Prettier在任何地方都可以被调用。

Prettier的配置文件

Prettier的配置文件通常命名为.prettierrc，该文件用于存储一些自定义的格式化规则。配置文件的创建和编辑可以灵活地满足项目特定的需求，而不改变默认的Prettier规则。

例如，创建一个.prettierrc文件，并设置一些基本的规则：

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

每个配置项都有明确的含义：

• arrowParens: 控制箭头函数参数的括号使用。
• bracketSpacing: 控制对象或数组括号后的空格。
• semi: 控制是否在语句末尾添加分号。
• singleQuote: 控制是否使用单引号。
• tabWidth: 控制代码的缩进宽度。
• trailingComma: 控制在多行列表末尾添加逗号。

配置文件通常放置在项目的根目录中，确保所有团队成员都能访问到它。

配置Prettier以适应项目需求

项目的代码格式化需求可能与Prettier默认规则不符，此时可以使用自定义配置文件来调整格式化规则。例如，如果项目中使用的是2个空格的缩进，而默认Prettier使用的是4个空格，则可以在.prettierrc文件中设置tabWidth: 2。

此外，有些项目可能需要排除某些文件或目录进行格式化，可在.prettierrc中添加ignorePatterns来指定哪些文件不进行格式化：

{
  "tabWidth": 2,
  "ignorePatterns": ["node_modules/**", ".git/**"]
}

上述配置表示不格式化node_modules和.git目录下的文件。

Prettier的基本使用方法 在命令行中使用Prettier

Prettier支持多种命令行选项，可在项目中运行Prettier命令来格式化代码。以下是一些常用的命令：

1. 格式化单个文件：

   prettier path/to/file.js

2. 格式化整个目录下的所有文件：

   prettier path/to/directory/

3. 格式化并自动修复错误：

   prettier --write path/to/file.js

4. 忽略某些文件或目录：

   prettier --ignore-path path/to/.prettierignore path/to/directory/

使用这些命令可以帮助开发者快速地将现有的代码库格式化为统一的规范。

将Prettier集成到文本编辑器中

为了在开发过程中实时格式化代码，可以将Prettier集成到常用的代码编辑器中。以VSCode为例：

1. 安装VSCode插件：在VSCode的扩展市场搜索“Prettier - Code formatter”，并安装该插件。

2. 安装完成后，在VSCode的设置中，启用Prettier作为默认的格式化工具。这可以通过在设置中搜索editor.defaultFormatter，并将其值设置为esben.prettier-vscode来实现。

3. 配置编辑器以在保存文件时自动格式化代码。这可以通过在设置中搜索prettier，并启用editor.formatOnSave来实现。

Prettier的常用命令及参数

Prettier提供了一系列参数来控制格式化行为，以下是一些常用参数：

• --list-different：只显示格式化后有变化的文件。
• --write：直接应用格式化，而不是仅仅输出结果。
• --ignore-path：指定一个文件来忽略某些文件或目录。
• --check：检查文件是否符合Prettier的格式化规则，而不进行实际的修改。

例如，运行以下命令来验证哪些文件不符合Prettier格式化规则：

prettier --check path/to/directory/

Prettier格式化规则详解 代码缩进与空格

Prettier为代码缩进和空格提供了明确的规则。例如，使用2个空格作为缩进：

{
  "tabWidth": 2,
  "printWidth": 80
}

上述配置表示使用2个空格来缩进，每行最多80个字符。

具体示例如下：

function sayHello(name) {
  console.log('Hello, ' + name);
}

Prettier会将上述代码格式化为：

function sayHello(name) {
  console.log('Hello, ' + name);
}

如果配置为4个空格，则会变为：

function sayHello(name) {
    console.log('Hello, ' + name);
}

行宽与换行

Prettier允许设置每行的最大字符数，超出该限制的代码将自动换行。默认的行宽设置为80个字符，可以通过配置文件中的printWidth参数来调整：

{
  "printWidth": 100
}

这表示每行最多100个字符。例如，一个较长的模板字符串：

const longString = `This is a very long string that should be wrapped to the next line if it exceeds the specified print width.`;

如果printWidth设置为80个字符，上述代码会自动换行：

const longString = `This is a very long string that should be
wrapped to the next line if it exceeds the specified print width.`;

代码对齐与间隔

Prettier也会处理代码的对齐和间隔，例如在函数参数之间添加空格：

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

这些设置可以保证代码中函数参数之间的空格一致，以及使用双引号或单引号，并在对象或数组的括号前后添加空格。

例如，配置为双引号并适当添加空格：

const obj = {
    key: 'value'
};

模板字符串与括号处理

对于模板字符串，Prettier会自动处理括号的使用。例如：

{
  "bracketSpacing": false
}

配置为不使用括号间的空格。模板字符串示例如下：

const name = 'John Doe';
const greeting = `Hello, ${name}!`;

Prettier会按照配置格式化：

const name = 'John Doe';
const greeting = `Hello, ${name}!`;

其他常用格式化规则

Prettier还包括了一些其他常见的格式化规则，例如：

• 箭头函数的参数括号：

  {
  "arrowParens": "always"
  }

  设置箭头函数的参数始终使用括号，即使只有一个参数。

• 分号的使用：

  {
  "semi": true
  }

  强制在语句末尾添加分号。

• 逗号在行尾：

  {
  "trailingComma": "all"
  }

  在多行列表末尾添加逗号。

例如，一个使用括号的箭头函数：

const add = (a, b) => a + b;

配置arrowParens为always：

const add = (a, b) => a + b;

Prettier与其他工具的集成 Prettier与ESLint的结合使用

Prettier可以与ESLint结合使用，以进一步统一代码风格。首先，安装ESLint和相应的Prettier插件：

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

在.eslintrc配置文件中启用Prettier插件：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

这将启用Prettier插件并将其规则设置为错误级别。在开发过程中，可以通过ESLint检查代码风格和Prettier规则，确保代码符合规范。

Prettier与VSCode的集成

如前所述，Prettier可以很容易地集成到VSCode中。安装Prettier - Code formatter插件后，需要在VSCode的设置中启用Prettier作为默认的格式化工具，并设置在保存文件时自动格式化代码。

以下是VSCode设置的示例：

{
  "editor.defaultFormatter": "esben.prettier-vscode",
  "editor.formatOnSave": true
}

在GitHub中使用Prettier进行代码审查

在GitHub中使用Prettier进行代码审查，可以通过GitHub Actions在合并代码之前自动运行Prettier。首先，在项目中创建一个.github/workflows目录，并在其中添加一个.yml文件用于配置GitHub Actions。

例如，配置文件示例如下：

name: Prettier Check

on:
  pull_request:
    branches:
      - main

jobs:
  prettier-check:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Set up Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '14.x'
    - name: Install dependencies
      run: npm ci
    - name: Run Prettier
      run: npx prettier --check .

上述配置表示在每个pull request合并前，会运行Prettier来检查代码格式是否符合规范。如果不符合规范，GitHub Actions会阻止代码合并。

常见问题与解决方案 Prettier无法格式化某些文件类型

如果Prettier无法格式化某些文件类型，可能是因为配置文件中的ignorePatterns设置了不正确的忽略模式，或者某些文件类型没有被Prettier支持。可以检查.prettierrc文件中的ignorePatterns配置，并确保所有需要格式化的文件类型都在支持范围内。

例如，如果希望Prettier格式化.html文件，但发现不生效，可以检查是否有忽略配置：

{
  "ignorePatterns": ["*.html"]
}

需要移除或调整ignorePatterns，以确保.html文件被包含在格式化范围内。

Prettier与团队现有代码风格不一致

如果团队现有的代码风格与Prettier的默认规则不一致，可以自定义.prettierrc文件来调整Prettier的规则。例如，如果团队使用的是单引号，而Prettier默认使用双引号，可以将.prettierrc文件设置为：

{
  "singleQuote": true
}

这样可以确保Prettier按照团队的需求调整代码风格。

Prettier在项目中遇到的其他问题及解决方法

如果在使用Prettier过程中遇到其他问题，可以通过以下步骤排查和解决：

1. 检查Prettier版本：确保使用的Prettier版本是最新的，可以通过命令行运行prettier --version来检查版本号，并使用npm update prettier更新到最新版本。
2. 检查配置文件：确认.prettierrc文件是否正确配置，并确保配置文件被正确读取。
3. 检查忽略模式：确保.prettierrc文件中的ignorePatterns配置正确。
4. 使用Prettier插件：如果使用的是集成开发环境（如VSCode），确保已安装并正确配置了Prettier插件。
5. 查阅文档和社区支持：查阅Prettier官方文档或寻求社区支持，解决特定问题。