HBuilder X 集成 Prettier 实现代码格式化自动化

1. 为什么你需要自动化代码格式化？

我干了这么多年开发，最头疼的事情之一就是代码风格不统一。你写代码用两个空格缩进，他用四个空格；你喜欢单引号，他坚持用双引号；行尾要不要加分号，更是能引发一场“圣战”。一个项目里，尤其是团队协作的时候，代码格式五花八门，提交记录里全是些“fix: formatting”这种毫无营养的提交信息，不仅看着糟心，更影响代码审查的效率，有时候一个真正的逻辑错误就藏在这些格式改动里，很难被发现。

后来我开始用 Prettier，这东西真是个“救星”。它不像 ESLint 那样跟你争论规则的对错，它直接帮你做决定。你只管写你的业务逻辑，写完之后，一个快捷键，或者保存一下文件，Prettier 就自动帮你把代码格式化成统一的、公认美观的样式。什么缩进、引号、分号、对象花括号换行、代码行宽……所有这些琐事，它全包了。从此，团队里再也没有格式之争，代码库永远整洁如一。

那么，对于使用 HBuilder X 进行前端或 uni-app 开发的我们来说，怎么把 Prettier 这个好帮手集成进来呢？难道要每次手动在命令行敲 npx prettier --write . 吗？那也太麻烦了。我们的目标是：在 HBuilder X 这个 IDE 里，实现“保存即格式化”。也就是说，你写完代码，习惯性地按下 Ctrl + S，代码瞬间变得整整齐齐，整个过程无缝衔接，完全自动化。这不仅能极大提升个人开发效率，更是保证团队代码一致性的基石。接下来，我就手把手带你，在 HBuilder X 里搭建这套自动化流水线。

2. 第一步：给你的 HBuilder X 装上 Prettier 插件

HBuilder X 本身功能强大，但它的格式化规则可能和你的团队规范或者个人习惯不符。我们需要借助一个“桥梁”插件，让 HBuilder X 能够调用我们安装的 Prettier。这里我推荐使用 “Prettier - Code formatter” 这个插件。注意，这不是 HBuilder X 官方插件市场里的，我们需要从 VS Code 的插件生态里“借”过来。

别担心，操作很简单。打开你的 HBuilder X，找到左侧活动栏最下面的方块图标，那就是“扩展”市场。点击进去，在搜索框里输入“Prettier”。你可能会看到一些相关的插件，但我们要找的是那个由 “Prettier” 官方发布的、安装量最高的那个。它的图标通常就是 Prettier 的官方 Logo。找到后，点击“安装”按钮。

安装过程很快，完成后可能需要重启一下 HBuilder X 来激活插件。重启后，这个插件就已经在后台默默工作了。但先别急，这时候它可能还不知道该用哪个 Prettier 来格式化你的代码。它默认会尝试使用它自己捆绑的一个 Prettier 版本，或者去寻找你项目里安装的 Prettier。为了确保版本一致和配置生效，我强烈建议在项目本地也安装 Prettier。

打开你的项目根目录，在终端里运行：

npm install --save-dev prettier
# 或者如果你用 yarn
yarn add --dev prettier

这样，你的项目就有了一个确定版本的 Prettier。插件会优先使用项目本地的这个版本，避免因为全局安装的 Prettier 版本不同而导致格式化结果不一致的问题。这是保证团队协作不出错的关键一步。

3. 第二步：创建你的格式化“宪法”——prettier.c