代码格式化终极指南：HTML/CSS/SQL/JS 美化与团队规范

IDE 虽然有右键「格式化代码」，但每个开发者的按键习惯不同： - 缩进用 2 空格还是 4 空格还是 Tab？ - 行尾要不要加分号？ - 花括号下一行还是同行？ - 数组/对象最后一个元素后面要不要逗号？

团队没有统一规范，就会出现：每个人一个风格，commit 历史里全是格式变化，PR review 反而在纠缠格式而不是逻辑。格式化工具的目的就是消除这些人为选择，让所有代码机械地落成同一个模样。

Prettier 为什么最流行：它采取"零配置哲学"——有既定的格式规则，你很少需要改配置，团队所有成员装上同一版本就能保证格式一致。

• Prettier（JavaScript/TypeScript/JSX/JSON）：最流行，简化主义配置，广泛社区支持
• HTMLHint（HTML）：专注 HTML 校验与格式化，可检测语义错误
• sql-formatter（SQL）：支持 11 种 SQL 方言（MySQL/PostgreSQL/SQLServer 等），关键字大小写与缩进自定义
• Beautify（JavaScript/JSON）：Web 版，支持多语言美化，但配置项复杂
• Black（Python）：Python 社区事实标准，集成 pre-commit 无缝
• gofmt（Go）：内置官方工具，Go 生态强制使用
• rustfmt（Rust）：Rust 官方格式化，cargo fmt 一键

本工具整合 Prettier + HTMLHint + sql-formatter + Beautify，支持切换语言与配置参数。

Prettier 配置（.prettierrc 或 package.json 的 "prettier" 字段）： `` { "printWidth": 80, // 单行最大字符数 "tabWidth": 2, // 缩进宽度 "useTabs": false, // 用 Tab 还是空格 "semi": true, // 行尾是否加分号 "singleQuote": false, // 用单引号还是双引号 "trailingComma": "es5" // 末尾逗号：none / es5 / all } ``

SQL 格式化参数： - 关键字大小写：UPPERCASE / lowercase / PRESERVE - 缩进宽度：通常 2 或 4 - 逗号位置：leading（,col) 或 trailing（col,）

团队推荐：Prettier 用官方默认配置，不要过度自定义。同时装上 .prettierignore 排除 node_modules、dist 等目录。

配置了格式化工具还不够，需要在 git commit 时强制检查。用 husky + lint-staged 是业界标配：

1. 装 husky：npm install husky --save-dev && npx husky install
2. 装 lint-staged：npm install lint-staged --save-dev
3. .husky/pre-commit 文件：
4. package.json 加配置：

流程：开发者 git add → git commit 时，husky 自动跑 lint-staged → 只对本次改动的文件格式化 → 格式化成功才 commit 成功。违反规范的提交直接被卡住。

为了更严格的质量门槛，在 CI pipeline 中加格式化校验（仅报告，不自动修复）：

GitHub Actions 示例： ``yaml name: Format Check on: [pull_request] jobs: format: runs-on: ubuntu-latest steps: - uses: actions/checkout@v2 - uses: actions/setup-node@v2 - run: npm install - run: npx prettier --check "src/*/.{js,jsx,ts,tsx}" - run: npm run lint:sql ``

如果 PR 中有格式不达标的代码，CI check fail，PR merge 被卡住。团队必须本地跑 prettier --write 修复后再 push。这样保证了 main 分支永远格式统一。

很多人混淆这两个：

• Lint（如 ESLint/Pylint）：查找逻辑错误与风格问题（如未定义变量、 unused 变量、复杂度超标）。输出警告 / 错误
• 格式化（Prettier/gofmt）：调整空白与符号（缩进、换行、引号）。改变代码视觉表现但不改逻辑

1. 先格式化（prettier --write）让代码统一好看
2. 再 lint（eslint）检查逻辑问题
3. 在 pre-commit 两个都跑，但格式化自动修复（--write），lint 只报告（--fix 也可以）

程序员的"圣战"之一： - 空格派：可见字符，在所有编辑器宽度一致，缩进嵌套清晰，是当代主流（90% 项目用空格） - Tab 派：只占 1 字符位置，文件体积小，屏幕宽度用户可控

现实情况： - Python 强制缩进，但允许 space 或 tab（混用会报错） - JavaScript/Go/Rust 生态默认空格 - Rust/Go 官方工具默认 Tab（rustfmt / gofmt） - 大多数公司标准 2-4 空格

建议：团队选定一种后在 .editorconfig 或 .prettierrc 锁定，不要再改。Prettier 的默认 2 空格对新手友好。