HBuilderX 前端协作开发：团队编码规范指南

第一步：安装依赖

npm install --save-dev prettier

第二步：创建.prettierrc 配置文件

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

这套配置兼顾了可读性与兼容性，尤其适合 Vue 和 UniApp 项目。

解读：

• singleQuote : 统一使用 ' 而非 " ，避免模板字符串混淆；
• trailingComma: "es5" : 在对象和数组末尾加逗号，便于 Git Diff 友好；
• arrowParens: "avoid" : 单参数箭头函数不加括号，更简洁。

第三步：启用保存即格式化

在 HBuilderX 的 settings.json 中添加：

{ "editor.formatOnSave": true, "editor.defaultFormatter": "prettier" }

这样，只要一保存文件，Prettier 就会自动美化代码，脏代码永远出不了本地。

四、跨编辑器兼容：用.editorconfig 守住底线

不是每个团队成员都用 HBuilderX。有些人可能临时用 VSCode 查看代码，或者只改一行文本。

为了保证基础格式不崩塌，必须引入行业标准——.editorconfig。

root = true
[*]
charset = utf-8
end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false

这个文件虽然简单，却能在几乎所有主流编辑器中生效，包括：

• HBuilderX
• VSCode
• WebStorm
• Sublime Text

它是最低共识的体现：哪怕不用高级格式化工具，至少缩进、换行、编码是一致的。

五、一键初始化：构建团队专属的开发环境包

理想状态是：新人克隆项目 → 安装依赖 → 打开 HBuilderX → 直接开始编码。

要做到这一点，需要把所有配置打包成即插即用的工程体系。

推荐项目结构

my-project/
├── src/
│   ├── components/
│   └── pages/
├── .hbx/
│   └── project.settings.json # 编辑器行为
├── .prettierrc # Prettier 规则
├── .editorconfig # 基础编辑规范
├── snippets/ # 自定义代码片段
├── package.json
└── README.md # 环境搭建指南

添加自动化脚本（package.json）

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,css,json}\"",
    "prepare": "husky install"
  },
  "devDependencies": {
    "prettier": "^3.0.0",
    "husky": "^8.0.0",
    "lint-staged": "^13.0.0"
  },
  "lint-staged": {
    "*.{js,vue,css,json}": [
      "prettier --write"
    ]
  }
}

再配合 Husky 设置 pre-commit 钩子：

npx husky add .husky/pre-commit "npx lint-staged"

这样一来：

• 保存时自动格式化（HBuilderX 层）
• 提交前再次校验（Git Hook 层）
• CI 流水线还可追加 prettier --check 拒绝不合规代码

形成三层防护网，彻底杜绝格式污染。

六、效率倍增器：自定义代码片段（Snippet）实战

写组件最怕什么？不是逻辑复杂，而是重复劳动。

比如每次新建一个 Vue 文件，都要手动写