sublime怎么安装和配置prettier进行代码格式化_Prettier插件安装与配置指南

裘德小鎮的故事

发布时间：2025-09-21 14:37:01

597人浏览过

来源于php中文网

原创

在Sublime Text中安装并配置Prettier，需先通过Package Control安装插件，再于用户设置或项目级.prettierrc文件中配置格式化规则，并可启用保存时自动格式化功能，从而实现代码风格统一、提升开发效率与团队协作体验。

sublime怎么安装和配置prettier进行代码格式化_prettier插件安装与配置指南

在Sublime Text中安装并配置Prettier进行代码格式化，核心流程是通过Package Control安装Prettier插件，随后根据个人或团队的工作流，在Sublime的用户设置或项目根目录的配置文件中进行细致调整，从而实现代码的统一风格和自动化美化。这能极大提升开发效率，减少团队协作中的格式争议。

解决方案

要在Sublime Text中安装并配置Prettier，请遵循以下步骤：

安装Package Control (如果尚未安装): 这是Sublime Text的包管理器。如果你的Sublime Text还没有安装，可以通过Sublime Text菜单
```
Tools
```
>
```
Install Package Control...
```
来安装。安装完成后，通常需要重启Sublime Text。
安装Prettier插件:
- 打开Package Control：按下
```
Ctrl+Shift+P
```
  (Windows/Linux) 或
```
Cmd+Shift+P
```
  (macOS)，输入
```
Package Control: Install Package
```
  并回车。
- 在弹出的列表中，输入
```
Prettier
```
  。你会看到一个名为
```
Prettier
```
  的插件，选中它并回车安装。
- 等待安装完成。

配置Prettier插件: 安装完成后，你需要告诉Sublime Text如何使用Prettier。

全局设置 (User Settings): 打开Sublime Text菜单

Preferences

Package Settings

Prettier

Settings - User

。这个文件通常是空的

{}

。你可以在这里添加Prettier的配置，这些配置将应用于所有项目。一个常见的配置示例如下：

{
    "auto_format_on_save": true, // 保存时自动格式化
    "prettier_cli_path": null, // 如果你全局安装了prettier，可以指向其路径
    "prettier_options": {
        "printWidth": 100,
        "tabWidth": 4,
        "useTabs": false,
        "semi": true,
        "singleQuote": true,
        "trailingComma": "es5",
        "bracketSpacing": true,
        "jsxBracketSameLine": false,
        "arrowParens": "always"
    }
}

auto_format_on_save

是我个人最喜欢的功能，设置成

true

后，每次保存文件，Prettier就会自动帮你把代码格式化好，简直是“强迫症”患者的福音。

项目级设置 (
```
.prettierrc
```
): 对于团队协作或特定项目，更推荐在项目根目录创建
```
.prettierrc
```
文件（或
```
.prettierrc.json
```
,
```
.prettierrc.js
```
等）。Prettier插件会自动检测并优先使用项目级的配置。这样能确保团队成员无论使用什么编辑器，都能遵循统一的格式规范。
```
.prettierrc
```
文件的内容与上面
```
prettier_options
```
的配置项类似：
```
// .prettierrc
{
    "printWidth": 100,
    "tabWidth": 4,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "trailingComma": "es5",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "arrowParens": "always"
}
```
如果项目已经有了
```
package.json
```
，你也可以在其中添加
```
Prettier
```
字段来配置。

手动格式化 (可选): 即使设置了保存时自动格式化，有时你可能也想手动触发。
- 打开
```
Ctrl+Shift+P
```
  (Windows/Linux) 或
```
Cmd+Shift+P
```
  (macOS)。
- 输入
```
Prettier: Format File
```
  并回车。

为什么Prettier是前端开发中不可或缺的代码格式化工具？

我个人觉得，Prettier之所以能在前端圈里迅速普及，并成为很多项目事实上的标准，最主要的原因在于它的“固执”和“不妥协”。它是一个“有主见”的格式化工具，不像ESLint那样只是告诉你哪里错了，Prettier是直接帮你把代码改成它认为最漂亮的样子。这种“意见领袖”的风格，恰恰解决了我们开发者长久以来的一个痛点：代码风格争论。

想想看，以前一个团队里，有人喜欢单引号，有人喜欢双引号；有人坚持行尾分号，有人觉得没必要；缩进是用两个空格还是四个空格？这些看似微不足道的问题，却能在代码审查时引发无休止的讨论，甚至导致不必要的返工。Prettier的出现，就是为了终结这些争论。它通过一套固定的规则（当然，大部分规则可以微调），强制所有代码都遵循同一套标准。

它的好处是显而易见的：

一致性: 无论谁写的代码，最终都会被格式化成统一的风格，大大提高了代码的可读性和维护性。
减少认知负担: 开发者可以把精力放在业务逻辑上，而不用再纠结代码格式。写完代码，保存一下，格式问题就解决了，省心省力。
简化代码审查: 代码审查的重点可以从格式问题转移到逻辑和架构问题，提升了审查效率。
支持广泛: Prettier支持JavaScript、TypeScript、CSS、HTML、Vue、React等多种前端语言和框架，几乎涵盖了日常开发所需。

从我的经验来看，一旦团队开始使用Prettier，你会发现大家对代码格式的抱怨几乎消失了。它就像一个默默无闻的幕后英雄，让代码库变得整洁有序，也让开发者的心情更加舒畅。

Sublime Text中Prettier的常见配置选项有哪些？

Prettier的核心魅力在于它的配置项虽然不多，但每一个都非常关键，能满足大部分团队对代码风格的定制需求。在Sublime Text中，这些配置通常会放在你的

Settings - User

文件里（针对全局），或者项目根目录的

.prettierrc

文件里（针对项目）。

AI智研社

AI智研社是一个专注于人工智能领域的综合性平台

下载

以下是一些我经常会用到，也是最常见的配置选项：

```
printWidth
```
(默认: 80): 这决定了代码单行的最大字符数。当一行代码超过这个长度时，Prettier会尝试将其拆分成多行。我个人比较喜欢设置为
```
100
```
或
```
120
```
，因为现在的显示器都比较宽，适当增加行宽能减少不必要的换行，让代码看起来更紧凑。
```
tabWidth
```
(默认: 2): 指定一个tab等于多少个空格。这纯粹是个人或团队的偏好。我习惯用
```
4
```
个空格，感觉代码层级更清晰。
```
useTabs
```
(默认: false): 设置为
```
true
```
时，Prettier会使用tab字符进行缩进，否则使用空格。这个也是“tab党”和“空格党”的战场，我的建议是团队统一就好，个人倾向于
```
false
```
（使用空格）。
```
semi
```
(默认: true): 是否在语句末尾添加分号。设置为
```
false
```
可以禁用分号。这在JavaScript中是一个很有争议的话题，但我个人觉得加上分号更严谨，能避免一些潜在的语法陷阱。
```
singleQuote
```
(默认: false): 是否使用单引号而不是双引号。设置为
```
true
```
会将所有字符串字面量统一为单引号。我更喜欢
```
true
```
，看起来更简洁。
```
trailingComma
```
(默认: "es5"): 在多行结构中，是否在最后一个元素后面添加逗号。
- ```
"none"
```
  : 不添加。
- ```
"es5"
```
  : 在ES5有效的对象、数组等中添加（如
```
{ a: 1, b: 2, }
```
  ）。
- ```
"all"
```
  : 在所有可能的地方添加。我通常会设置为
```
"es5"
```
  ，这样在版本控制系统里，新增或删除一个列表项时，只会改动一行，减少不必要的diff。
```
bracketSpacing
```
(默认: true): 在对象字面量的大括号之间是否保留空格。比如
```
{ foo: bar }
```
(true) vs
```
{foo: bar}
```
(false)。设置为
```
true
```
更符合可读性。
```
jsxBracketSameLine
```
(默认: false): 对于JSX元素，多行时是否将
```
>
```
放在最后一行的末尾。设置为
```
true
```
时，
可能会变成这样：
```
    
```
我通常保持
```
false
```
，让
```
>
```
独占一行，保持结构清晰。
```
arrowParens
```
(默认: "always"): 在箭头函数参数周围是否需要括号。
- ```
"always"
```
  : 总是需要，如
```
(x) => x
```
  。
- ```
"avoid"
```
  : 只有一个参数时省略括号，如
```
x => x
```
  。我喜欢
```
"always"
```
  ，这样代码风格更统一，也避免了未来添加参数时需要额外修改括号。

这些配置项的组合，就能形成一套独特的代码风格。建议团队内部先讨论确定一套标准，然后统一配置到项目的

.prettierrc

文件中，这样能最大化Prettier的效用。

Sublime Text中如何实现保存时自动格式化代码？

实现保存时自动格式化代码，是我个人觉得Prettier在Sublime Text中最能提升开发体验的功能之一。想象一下，你写完一段代码，按下

Ctrl+S

，Sublime Text瞬间帮你把代码整理得井井有条，这种感觉简直太棒了，省去了手动格式化的繁琐，也避免了因为忘记格式化而提交“凌乱”代码的尴尬。

要启用这个功能，主要是在Prettier插件的配置中设置

auto_format_on_save

为

true

。具体步骤如下：

打开Prettier用户设置： 通过
```
Preferences
```
>
```
Package Settings
```
>
```
Prettier
```
>
```
Settings - User
```
打开你的Prettier用户配置文件。
添加或修改
```
auto_format_on_save
```
选项： 确保你的配置文件中包含以下内容：
```
{
    "auto_format_on_save": true,
    // 其他Prettier配置...
    "prettier_options": {
        // ...你的格式化规则
    }
}
```
如果文件是空的，直接把这段代码复制进去。如果已经有内容，确保
```
auto_format_on_save
```
被设置为
```
true
```
，并且逗号分隔符正确。
保存设置文件： 保存
```
Settings - User
```
文件后，这个设置就会立即生效。

需要注意的几点：

优先级： Prettier插件会优先查找项目根目录下的
```
.prettierrc
```
文件。如果项目中有
```
.prettierrc
```
并且其中没有设置
```
auto_format_on_save
```
，那么会回退到你的 Sublime 用户设置。但通常，
```
auto_format_on_save
```
这种行为层面的设置，放在Sublime的用户设置里是比较合理的，因为它是编辑器行为，而不是项目代码风格。
与其他格式化工具的冲突： 如果你同时使用了其他插件进行保存时格式化（例如，某些Linter插件也提供了自动修复功能），可能会出现冲突。这种情况下，你可能需要禁用其他插件的自动格式化功能，或者调整它们的执行顺序，确保Prettier是最后执行的。我通常的做法是，让Prettier负责代码格式，Linter负责代码质量和潜在错误，两者分工明确。
性能考量： 对于非常大的文件，或者配置了非常复杂的格式化规则，保存时格式化可能会有轻微的延迟。但对于日常开发中的文件，这种延迟几乎可以忽略不计。如果真的遇到性能问题，可以考虑手动格式化，或者优化Prettier的配置。

启用