首页手记 Prettier代码格式化入门教程

Prettier代码格式化入门教程

标签：

前端工具

概述

Prettier 是一个强大的代码格式化工具，能够自动根据预设规则调整代码格式，帮助开发者编写一致且易于阅读的代码。Prettier 支持多种编程语言和文件类型，并可与多种编辑器和构建工具集成。通过简单的配置，Prettier 可以根据项目需求自定义格式化规则，确保代码格式的一致性。

Prettier代码格式化入门教程

1. Prettier简介与安装

1.1 Prettier简介

Prettier 是一个代码格式化工具，它可以自动根据预设的格式化规则将代码进行格式化，帮助开发者编写一致性高的代码。Prettier 会处理代码的缩进、空格、换行、分号等格式化细节，而不需要开发者手动调整。这使得代码更易于阅读和维护。

Prettier 支持多种编程语言和文件类型，包括但不限于 JavaScript、TypeScript、CSS、JSON、Markdown、Vue 和 HTML。它的主要特点包括：

强制一致的风格：Prettier 可以强制所有代码遵循相同的风格，这有助于团队成员之间的代码共享与协作。
与现有工具集成：Prettier 可以与许多编辑器、构建工具和 CI/CD 流水线集成，以便在开发过程中自动格式化代码。
配置灵活性：虽然 Prettier 主要提倡无配置使用，但也允许开发者根据需要自定义一些规则。

1.2 Prettier安装

Prettier 可以通过 npm 或 yarn 安装到项目中。

npm install --save-dev prettier
# 或者使用 yarn
yarn add --dev prettier

安装完成后，package.json 文件中将包含如下依赖项：

{
  "devDependencies": {
    "prettier": "^2.4.0"
  }
}

1.3 初始化配置文件

要使用 Prettier，可以初始化配置文件 .prettierrc。这个文件可以位于项目根目录下，用于定义特定的格式化规则。

以下是一个配置文件的示例：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

1.4 使用Prettier

Prettier 可以通过命令行工具使用。例如，格式化一个 index.js 文件：

npx prettier --write index.js

这个命令会自动根据配置文件中的规则格式化 index.js 文件。如果没有配置文件，Prettier 会使用默认设置。

例如，原始的 index.js 文件可能如下所示：

function add(a,b) {
  return a + b
}

格式化后的 index.js 文件可能如下所示：

function add(a, b) {
  return a + b;
}

2. 配置Prettier基本设置

2.1 配置文件位置

可以将 Prettier 的配置文件放在项目根目录下，使用文件名 .prettierrc，或者使用任何支持的文件格式（如 .prettierrc.json、.prettierrc.js 等）。

2.2 配置文件示例

以下是一个包含基本配置的 .prettierrc.json 文件示例：

{
  "semi": true,                    // 在语句末尾使用分号
  "singleQuote": true,             // 使用单引号代替双引号
  "trailingComma": "all",          // 在最后一个元素后添加逗号
  "printWidth": 80,                // 每行的最大字符数
  "tabWidth": 2,                   // 缩进的空格数
  "useTabs": false,                // 使用空格代替制表符
  "arrowParens": "always",         // 在箭头函数参数中始终使用括号
  "bracketSpacing": true,          // 在对象的方括号之间添加空格
  "jsxBracketSameLine": false,     // 不允许JSX标签闭合括号独占一行
  "htmlWhitespaceSensitivity": "css" // 按CSS解析HTML中的空格
}

2.3 Prettier配置规则说明

semi: 指定是否在语句末尾使用分号。默认值为 true，即使用分号。
singleQuote: 指定是否使用单引号。默认值为 false，即使用双引号。
trailingComma: 指定在最后一个元素后是否添加逗号。可选值为 none、es5 和 all。默认值为 none。
printWidth: 指定每行的最大字符数。默认值为 80。
tabWidth: 指定缩进的空格数。默认值为 2。
useTabs: 指定是否使用制表符。默认值为 false，即使用空格。
arrowParens: 指定是否在箭头函数的参数中始终使用括号。可选值为 always 和 avoid。默认值为 avoid。
bracketSpacing: 指定在对象的方括号之间是否添加空格。默认值为 true。
jsxBracketSameLine: 指定是否允许JSX标签闭合括号独占一行。默认值为 false。
htmlWhitespaceSensitivity: 指定如何解析HTML中的空格。可选值为 strict 和 css。默认值为 css。

2.4 自定义配置

如果团队有特定的格式化要求，可以自定义配置文件。例如，可以在项目根目录下创建一个 .prettierrc.js 文件，其中包含自定义配置规则：

module.exports = {
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  arrowParens: 'always',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  htmlWhitespaceSensitivity: 'css'
};

3. Prettier与编辑器集成

3.1 VS Code集成

VS Code 是一个流行的代码编辑器，支持 Prettier 的集成。以下是将 Prettier 集成到 VS Code 中的步骤：

安装 Prettier 扩展：
- 在 VS Code 中打开扩展市场（Extensions）。
- 搜索 "Prettier - Code formatter"。
- 安装扩展。
配置 Prettier：
- 在 VS Code 的设置中，打开 "Settings"（可以通过 Ctrl + , 快捷键打开）。
- 在搜索框中输入 format on save。
- 设置 Editor: Format On Save 为 true，这样每当保存文件时，Prettier 会自动格式化代码。
- 设置 Editor: Default Formatter 为 Prettier - Code formatter，这样当使用快捷键 Shift + Alt + F 格式化代码时，默认使用 Prettier。
- 在项目根目录下创建或修改 .prettierrc 文件。
- 在 VS Code 中打开设置，搜索 prettier。
- 设置 Prettier: Use Recommendation 为 false。
- 设置 Prettier: Use Workspace Settings 为 true，这样 VS Code 会使用项目根目录下的配置文件。

以下是一个具体的 .vscode/settings.json 文件示例：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.useRecommendedPreferences": false,
  "prettier.requireConfig": true
}

使用 Prettier 的效果如下：

原始代码：

function hello(name) {return 'Hello ' + name}

格式化后的代码：

function hello(name) {
  return 'Hello ' + name;
}

3.2 IntelliJ IDEA集成

IntelliJ IDEA 是另一个流行的代码编辑器，也可以集成 Prettier。

安装 Prettier 插件：
- 打开 IntelliJ IDEA，进入插件市场。
- 搜索 "Prettier"，安装插件。
配置 Prettier：
- 打开 Settings，进入 Editor -> Code Style。
- 选择 JavaScript 或其他支持的语言。
- 在右侧设置 Format on Save 为 true，这样每当你保存文件时，Prettier 会自动格式化代码。
- 在 Preferences 中，搜索 Prettier，确保插件使用的配置文件是项目中的 .prettierrc 文件。

以下是一个具体的 IntelliJ IDEA 配置文件示例：

{
  "codeStyleSettings": {
    "JAVA": {
      "useTabCharacter": false,
      "tabSize": 2,
      "insertSpaces": true
    },
    "JAVASCRIPT": {
      "useTabCharacter": false,
      "tabSize": 2,
      "insertSpaces": true
    }
  }
}

使用 Prettier 的效果如下：

原始代码：

function hello(name) {return 'Hello ' + name}

格式化后的代码：

function hello(name) {
  return 'Hello ' + name;
}

3.3 使用命令行工具

除了通过编辑器集成，也可以在命令行工具中手动运行 Prettier。例如：

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

这个命令会格式化 src 目录下的所有 .js 文件。可以通过这种方式在构建脚本中集成 Prettier，确保每次构建时代码都能被格式化。

3.4 自动运行Prettier

可以在项目的 package.json 文件中配置 pre-commit 脚本，确保在每次提交代码之前自动运行 Prettier 进行格式化。

{
  "scripts": {
    "pre-commit": "prettier --write ."
  }
}

这样，每次在运行 git commit 之前，都会自动运行 Prettier 格式化代码。

4. Prettier的进阶使用技巧

4.1 忽略文件和目录

在某些情况下，你可能不想对某些文件或目录进行格式化。可以在项目根目录下创建一个 .prettierignore 文件，列出要忽略的文件或目录。

node_modules
dist
*.json

这意味着 node_modules、dist 目录以及所有 .json 文件都不会被 Prettier 格式化。

例如，原始的 .json 文件可能如下所示：

{
  "name": "example",
  "version": "1.0.0"
}

忽略文件的效果是这些文件不会被 Prettier 格式化，保持原始状态。

4.2 定义特殊规则

对于某些文件或文件夹，你可能希望使用不同的配置规则。可以在 .prettierrc 文件中定义特定的规则。

例如，可以为 .json 文件定义不同的规则：

{
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "singleQuote": false,
        "tabWidth": 4
      }
    }
  ]
}

这样，所有 .json 文件中的双引号和缩进规则将会被单独定义。

例如，原始的 .json 文件可能如下所示：

{
  "name": "example",
  "version": "1.0.0"
}

格式化后的 .json 文件可能如下所示：

{
  "name": "example",
  "version": "1.0.0"
}

4.3 Prettier与TypeScript集成

如果你的项目中包含 TypeScript 代码，可以将 Prettier 与 TypeScript 合并使用。可以通过 prettier --write 命令格式化 .ts 和 .tsx 文件。

在 .prettierrc 文件中，可以指定适合 TypeScript 的规则：

{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "jsxSingleline": false,
  "arrowParens": "always"
}

例如，原始的 .ts 文件可能如下所示：

function add(a, b) {return a + b}

格式化后的 .ts 文件可能如下所示：

function add(a: number, b: number) {
  return a + b;
}

4.4 使用Prettier的插件系统

Prettier 支持插件系统，允许开发者扩展其功能。例如，可以使用 prettier-plugin-svelte 插件来处理 Svelte 文件。

安装插件：

npm install --save-dev prettier prettier-plugin-svelte

在 .prettierrc 文件中配置插件：

{
  "plugins": ["prettier-plugin-svelte"]
}

这样，Prettier 将使用该插件来处理 Svelte 文件。

例如，原始的 .svelte 文件可能如下所示：

<script>
  export let name;
</script>
<h1>Hello, {name}!</h1>

格式化后的 .svelte 文件可能如下所示：

<script>
  export let name;
</script>

<h1>Hello, {name}!</h1>

4.5 使用Prettier进行代码审查

Prettier 可以与代码审查工具（如 ESLint 或 EditorConfig）集成，确保所有提交的代码都符合统一的格式要求。

例如，可以在 ESLint 配置文件中启用 Prettier 规则：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error", { "useTabs": false, "singleQuote": true }]
  }
}

这样，ESLint 将会基于 Prettier 的规则进行代码审查。

5. 常见问题与解决方法

5.1 Prettier与ESLint冲突

有时 Prettier 与 ESLint 之间可能存在冲突，比如它们使用的规则不一致。为了解决这个问题，可以将 Prettier 作为 ESLint 的插件，让 Prettier 负责代码格式，而 ESLint 负责其他规则。

首先安装插件：

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

然后在 .eslintrc 文件中配置 Prettier 插件：

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error", { "useTabs": false, "singleQuote": true }]
  }
}

这样，ESLint 将会使用 Prettier 的规则来格式化代码。

5.2 配置不生效的问题

如果发现 Prettier 的配置不生效，可以检查以下几点：

确保项目根目录下存在有效的配置文件（如 .prettierrc）。
检查编辑器中是否正确配置了使用项目中的配置文件。
确保配置文件中的语法和格式都是正确的。

例如，配置文件 .prettierrc.json 如下：

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

5.3 Prettier忽略某些文件类型

如果你不想对某些文件类型进行格式化，可以在 .prettierrc 文件中忽略这些文件类型。例如，可以忽略 .json 文件：

{
  "ignore": ["**/*.json"]
}

5.4 Prettier不能格式化某些文件的问题

如果某些文件无法被 Prettier 正确格式化，可以检查文件是否包含非格式化的代码（例如，不符合 Prettier 规则的错误代码）。此外，也可以尝试使用 --parser 参数指定文件的解析器类型。

例如，格式化 TypeScript 文件时可以使用：

npx prettier --write --parser typescript ./src/**/*.ts

5.5 Prettier与CI/CD集成

在持续集成和持续交付（CI/CD）流程中集成 Prettier 可以确保每次提交代码时都符合一致的格式要求。可以将 Prettier 的命令集成到 CI/CD 脚本中，以确保在每次构建之前格式化代码。

例如，在 GitHub Actions 中可以这样配置：

name: Format code with Prettier

on: [push, pull_request]

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout code
        uses: actions/checkout@v2
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14.x'
      - name: Install dependencies
        run: npm install
      - name: Run Prettier
        run: npx prettier --write .

这样，在每次提交代码时，GitHub Actions 将会运行 Prettier 格式化代码。

6. Prettier社区与资源推荐

6.1 官方文档与教程

Prettier 的官方文档和教程是学习和使用 Prettier 的最佳资源。可以访问 Prettier 的官方 GitHub 仓库和文档：

6.2 社区支持

在遇到问题或需要帮助时，可以访问 Prettier 的官方论坛和社区：

6.3 交流与学习平台

除了官方资源，还可以通过其他平台学习和交流 Prettier 的使用技巧：

慕课网：提供关于 Prettier 的视频教程和实战项目，可以帮助开发者深入了解 Prettier 的使用方法。
Stack Overflow：可以通过问答平台解决遇到的问题，并从中学习其他开发者的经验。
GitHub：在 GitHub 上搜索与 Prettier 相关的仓库和项目，可以找到许多优秀的示例和最佳实践。

6.4 书籍与文章推荐

虽然不建议推荐书籍，但可以参考一些博客文章和在线教程来学习 Prettier：

Prettier深入指南：通过慕课网的文章学习 Prettier 的高级技巧和最佳实践。
Prettier官方博客：阅读 Prettier 官方博客中的文章，了解最新更新和改进。

6.5 Prettier插件与工具

除了官方支持的功能外，还有许多第三方插件和工具可以帮助开发者更好地使用 Prettier：

prettier-plugin-svelte：处理 Svelte 文件的插件。
prettier-plugin-graphql：处理 GraphQL 文件的插件。
prettier-vscode：VS Code 插件，提供更好的集成和体验。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

收到一只叮咚

手记
篇

粉丝

22

获赞与收藏

112

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30809 345

网络编程入门教程

20个小节 12721 239

Pandas 入门教程

25个小节 18600 342

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空