Prettier 零基础入门：一键格式化代码，告别格式混乱难题

PeterMap
4 阅读12分钟

写前端代码时，你是不是也遇到过这些困扰？代码缩进忽多忽少、引号混用单双引号、换行杂乱无章，自己看代码头疼，和同事协作时更是因为代码格式吵架？其实，只要用好 Prettier，这些问题都能一键解决。

Prettier 是一款“固执己见”的代码格式化工具，也是前端开发的必备神器[superscript:1]。它不关心你的代码逻辑，只专注于代码格式，能自动帮你统一缩进、引号、换行、空格等样式，无论你写得有多乱，一键格式化就能变得整洁规范，既节省手动调整的时间，又能保证团队代码风格统一。

今天这篇博客，全程面向零基础小白，无复杂原理、全是实操步骤，从 Prettier 是什么、为什么要用，到 VS Code 配置、项目集成、进阶用法，一步步教你吃透 Prettier，看完就能上手，从此告别格式焦虑！

一、先搞懂：Prettier 是什么？为什么一定要用？

简单来说，Prettier 就是代码的“自动美容师” ——它是一款跨语言的代码格式化工具，支持 HTML、CSS、JavaScript、TypeScript、JSON、Vue 等几乎所有前端常用文件格式[superscript:1]，核心作用就是自动规范代码格式，让代码变得整洁、统一、易读。

举个通俗的例子：你写代码时，有的地方用 2 个空格缩进，有的地方用 4 个空格，引号一会儿用单引号、一会儿用双引号，换行也随心所欲。而 Prettier 就像一个严格的格式管家，一键就能把这些混乱的格式调整成统一标准，不用你手动逐行修改。

核心作用（小白必知）：

  • 节省时间，提高效率：不用手动调整缩进、换行、引号，一键格式化，把更多精力放在代码逻辑上，告别“调格式半小时，写代码5分钟”。
  • 统一代码风格：无论是个人项目还是团队协作，Prettier 能强制统一代码格式，避免因为格式差异产生矛盾，提升团队协作效率[superscript:1]。
  • 零配置开箱即用：采用行业最佳实践的默认配置，不用复杂设置，安装后就能直接使用，小白也能快速上手[superscript:1]。
  • 广泛兼容：支持多种前端文件格式，适配 VS Code、WebStorm 等主流编辑器，还能与 ESLint 协作，解决格式与语法检查的冲突[superscript:1]。
  • 支持增量检查：针对大型项目，能只格式化修改过的代码，提高检查和格式化效率[superscript:1]。

一句话总结：Prettier 不是必需品，但绝对是提升开发效率的“神器”，尤其是团队协作时，它能帮你省去90%的格式调整时间，让代码更整洁、协作更顺畅。

二、前置条件：使用 Prettier 前需要准备什么？

Prettier 的使用门槛极低，不需要复杂的环境配置，提前准备好以下两个基础条件即可，小白轻松满足：

  1. 已安装 VS Code（或其他主流编辑器）：本文以 VS Code 为例（最常用、最易配置），WebStorm 等编辑器配置逻辑类似。
  2. 已安装 Node.js（LTS 版本）：如果需要在项目中集成 Prettier（团队协作必备），需要用到 npm 包管理工具，提前安装 Node.js 即可。

补充：如果只是个人使用，仅用 VS Code 插件就能实现一键格式化，无需安装 Node.js；团队协作建议集成到项目中，确保所有人的格式规则一致。

三、核心操作：Prettier 两种使用方式（小白优先掌握第一种）

Prettier 有两种常用使用方式：VS Code 插件（个人开发首选，简单快捷）、项目集成（团队协作首选，统一规则），下面分别讲解，小白先掌握插件方式，再逐步学习项目集成。

1. 方式一：VS Code 插件使用（小白首选）

这种方式最简单，安装插件后，一键就能格式化代码，适合个人开发、快速调试，全程3步搞定：

步骤1：安装 Prettier 插件

打开 VS Code，点击左侧“扩展”图标（或按 Ctrl+Shift+X），在搜索框中输入“Prettier - Code formatter”，找到对应插件（作者为 Prettier），点击“安装”，安装完成后重启 VS Code 生效。

注意：安装时认准官方插件，避免安装第三方仿冒插件，导致格式化异常。

步骤2：设置 Prettier 为默认格式化工具

安装完成后，需要设置 Prettier 为默认格式化工具，避免与 VS Code 自带格式化工具冲突，步骤如下：

  1. 打开 VS Code 设置（按 Ctrl+, 或点击左下角齿轮图标）。
  2. 在搜索框中输入“default formatter”，找到“Editor: Default Formatter”选项。
  3. 点击下拉框，选择“Prettier - Code formatter”，保存设置（自动生效）。

步骤3：一键格式化代码（核心操作）

设置完成后，就能轻松格式化代码，两种操作方式任选：

  • 右键点击代码区域，选择“格式化文档”（或按 Ctrl+Shift+I 快捷键），一键格式化当前文件。
  • 设置“保存自动格式化”（推荐）：在 VS Code 设置中搜索“format on save”，勾选“Editor: Format On Save”，以后每次保存文件，Prettier 会自动格式化代码，无需手动操作。

测试：随便写一段混乱的代码（比如缩进混乱、引号混用），保存文件或按快捷键，就能看到代码自动变得整洁规范，是不是超级简单？

2. 方式二：项目集成 Prettier（团队协作必备）

个人开发用插件足够，但团队协作时，每个人的插件配置可能不同，导致格式不统一。此时需要将 Prettier 集成到项目中，通过配置文件统一格式规则，确保所有人的格式化效果一致[superscript:1]。

以 Vue 项目为例，全程终端操作，步骤简单，小白跟着敲命令即可：

步骤1：进入项目目录，安装 Prettier

打开终端（cmd / Mac 终端），进入你的 Vue 项目目录（比如 vue-demo）：

cd vue-demo # 替换成你的项目名称

执行安装命令，将 Prettier 安装到项目依赖中：

npm install prettier --save-dev

补充说明：--save-dev 表示将 Prettier 作为开发依赖安装，仅在开发环境中使用，不影响项目打包部署。

步骤2：创建 Prettier 配置文件（统一规则）

在项目根目录下，新建一个配置文件（命名为 .prettierrc），用于定义格式化规则，小白可直接复制以下配置（行业常用默认配置，可根据需求修改）：

{
  "printWidth": 80, // 代码一行最大长度，超过自动换行
  "tabWidth": 2, // 缩进宽度，默认2个空格
  "useTabs": false, // 不使用制表符（Tab）缩进，用空格
  "singleQuote": true, // 字符串使用单引号，而非双引号
  "semi": true, // 语句末尾添加分号
  "trailingComma": "es5", // 数组、对象末尾添加逗号（ES5规范）
  "bracketSpacing": true, // 对象前后添加空格（比如 { name: 'xxx' }）
  "arrowParens": "always", // 箭头函数参数必须加括号（比如 (a) => {}）
  "htmlWhitespaceSensitivity": "ignore", // 忽略HTML空格敏感度，避免换行混乱
  "endOfLine": "auto" // 自动适配系统换行符（Windows \r\n，Mac \n）
}

配置文件说明：每一项都是格式化规则，小白可根据自己或团队的习惯修改，比如想使用双引号，就把 singleQuote 改为 false。

步骤3：创建忽略文件（可选，推荐）

在项目根目录下，新建 .prettierignore 文件，用于指定不需要格式化的文件或文件夹（避免格式化无关文件），复制以下内容即可：

node_modules/ # 忽略node_modules文件夹
dist/ # 忽略打包后的dist文件夹
build/ # 忽略build文件夹
*.md # 可选：忽略markdown文件（如果不需要格式化）
public/ # 忽略public文件夹下的静态文件

步骤4：添加格式化命令（可选，便捷操作）

在项目 package.json 文件中，添加一个格式化命令，方便一键格式化整个项目的代码：

"scripts": {
  "dev": "npm run dev",
  "build": "npm run build",
  "format": "prettier --write ." // 新增：一键格式化所有符合规则的文件
}

使用方法：在终端执行 npm run format，Prettier 会自动格式化项目中所有未被忽略的文件，适合批量格式化。

步骤5：Git 集成（进阶，团队协作必配）

为了避免未格式化的代码提交到仓库，可配合 husky 实现“提交前自动格式化”，确保提交到仓库的代码都是规范的[superscript:1]，步骤如下（简单版）：

  1. 安装 husky 和 lint-staged：
  2. 在 package.json 中添加配置：

配置完成后，每次提交代码时，husky 会自动检查提交的文件，用 Prettier 格式化后再提交，确保仓库代码格式统一。

四、实操测试：用 Prettier 格式化混乱代码

无论是插件方式还是项目集成方式，格式化效果都一致，我们来做一个简单测试，看看 Prettier 的“魔力”：

测试前（混乱代码）：

<template>
  <div class="app">
  <h1>Prettier 测试</h1>
  <button @click="handleClick">点击测试</button>
  </div>
</template>

<script setup>
const handleClick = ()=>{
console.log("格式化测试")
}
const user = {name:"张三",age:22}
</script>

测试后（Prettier 格式化后）：

<template>
  <div class="app">
    <h1>Prettier 测试</h1>
    <button @click="handleClick">点击测试</button>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('格式化测试');
};
const user = { name: '张三', age: 22 };
&lt;/script&gt;

可以看到，Prettier 自动调整了缩进、换行，给箭头函数添加了空格，将双引号改为单引号，语句末尾添加了分号，代码瞬间变得整洁规范，不用手动修改任何一处。

五、Prettier 核心用法（小白必学）

掌握了基础使用后，再学习几个核心技巧，让 Prettier 更贴合你的开发需求，小白重点掌握前3个即可。

1. 自定义格式化规则

前面提到的 .prettierrc 配置文件，可根据自己的习惯修改规则，常用配置说明（小白必看）：

  • singleQuote: true/false：true 用单引号，false 用双引号（默认 false）。
  • tabWidth: 2/4：缩进宽度，2个空格或4个空格（默认2个）。
  • semi: true/false：true 语句末尾加分号，false 不加（默认 true）。
  • printWidth: 80/100：代码一行最大长度，超过自动换行（默认80），可根据屏幕大小调整。
  • trailingComma: "none"/"es5"/"all"：数组、对象末尾是否加逗号（默认 "es5"）。

修改配置后，保存文件，Prettier 会自动应用新的规则，格式化代码。

2. 临时跳过格式化（特殊场景）

有些场景下，你可能不想让 Prettier 格式化某段代码（比如特殊格式的注释、特定结构的代码），可以添加注释跳过格式化：

  • 跳过单行代码：在代码前添加 // prettier-ignore。
  • 跳过多行代码：在代码前后添加 /* prettier-ignore */。
// prettier-ignore（跳过单行）
const user = {name:"张三",age:22,gender:"男"}

/* prettier-ignore（跳过多行）
const list = [
  1,2,3,4,5
]
*/

3. Prettier 与 ESLint 协作（避坑关键）

很多前端开发者会同时使用 ESLint（语法检查）和 Prettier（格式检查），但两者偶尔会出现规则冲突（比如 ESLint 允许无分号，Prettier 强制加分号），导致格式化后报错[superscript:1]。

解决方法：安装 eslint-config-prettier 和 eslint-plugin-prettier，将 Prettier 规则集成到 ESLint 中，统一规则：

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

然后修改 ESLint 配置文件（.eslintrc.js），添加 Prettier 相关配置：

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended" // 新增：集成 Prettier 规则
  ],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error" // 将 Prettier 错误视为 ESLint 错误
  }
}

配置完成后，ESLint 会遵循 Prettier 的格式规则，避免冲突，格式化和语法检查一次性完成。

4. 多编辑器同步配置（团队协作）

团队协作时，为了确保所有人的 VS Code 插件配置一致，可以在项目根目录下创建 .vscode/settings.json 文件，统一编辑器配置[superscript:1]：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "prettier.singleQuote": true,
  "prettier.semi": true
}

将该文件提交到 Git 仓库，团队成员拉取代码后，VS Code 会自动应用配置，无需手动设置。

六、小白常见问题（避坑指南）

刚开始使用 Prettier 时，小白容易遇到一些小问题，整理了5个最常见的坑，提前避开，少走弯路：

  1. 格式化不生效：未将 Prettier 设置为默认格式化工具，或 VS Code 安装了多个格式化插件（比如 Vetur），导致冲突。解决方法：重新设置默认格式化工具，卸载冲突的插件。
  2. 保存不自动格式化：未勾选“Editor: Format On Save”，或文件被 .prettierignore 忽略。解决方法：检查 VS Code 设置，查看 .prettierignore 文件是否误忽略当前文件。
  3. Prettier 与 ESLint 冲突：两者规则不一致（比如分号、引号），导致格式化后 ESLint 报错。解决方法：安装 eslint-config-prettier 和 eslint-plugin-prettier，集成两者规则[superscript:1]。
  4. 项目集成后，终端执行格式化命令报错：未安装 Node.js，或 Prettier 未正确安装到项目依赖中。解决方法：安装 Node.js，重新执行 npm install prettier --save-dev。
  5. 格式化后代码结构错乱（比如 Vue 模板） ：Prettier 对 Vue 模板的格式化规则需要单独适配，确保安装的 Prettier 插件支持 Vue 格式，或在 .prettierrc 中添加 htmlWhitespaceSensitivity: "ignore"。

七、总结

Prettier 的核心价值就是“解放双手，统一格式”，它不需要你掌握复杂的原理，只要安装配置好，就能一键搞定代码格式问题，无论是个人开发还是团队协作，都能极大提升开发效率。

对于零基础小白来说，先掌握 VS Code 插件的使用，实现一键格式化和保存自动格式化，满足日常开发需求；如果需要团队协作，再学习项目集成、配置文件自定义、与 ESLint 协作等技巧。

使用 Prettier 后，你会发现，不用再为缩进、引号、换行纠结，能把更多时间放在代码逻辑上，写出的代码不仅整洁规范，还能减少团队协作中的格式矛盾。赶紧动手配置起来，告别格式混乱，做一个高效、规范的前端开发者吧！

avatar
文章
阅读
粉丝