prettier 团队配置建议（面向 27" 开发环境 — 默认宽度 120）

下面给出一套当下流行且实用的 prettier.config.js（含说明）以及配套的 .prettierignore、推荐的编辑器/CI 集成和常见协作工具（ESLint / Husky / lint-staged）示例。目标是：一致、可读、低争议、易与 ESLint 配合。你当前只有 printWidth: 120，我在此基础上补充常用且稳健的选项，并对团队为何选用给出简短理由。

推荐的 `prettier.config.js`

// prettier.config.js
module.exports = {
  // 视觉宽度：27" 显示器常用，120 较为宽裕，减少换行带来的噪音
  printWidth: 120,

  // 缩进：4 或 2 取决于团队偏好；多数 JS/TS 社区使用 2，但若团队偏好更清晰的缩进可用 2/4。
  tabWidth: 2,

  // 使用空格而不是 tab（更可预测的跨编辑器行为）
  useTabs: false,

  // 句末分号（团队风格选择）：推荐 true（减少 ASI 问题）
  semi: true,

  // 字符串使用单引号（更常见于 JS 社区）
  singleQuote: true,

  // 对象属性是否尽可能不加引号：'as-needed'（ESLint/TS 更友好）
  quoteProps: 'as-needed',

  // 大多数现代项目在多行情况下保留尾逗号（git diff 更清晰）
  trailingComma: 'all', // 'es5' 也常用，'all' 对函数参数尾逗号也生效 (ES2020+)

  // 对象/数组大括号与方括号之间是否留空格
  bracketSpacing: true,

  // JSX 中是否使用单引号（通常与 singleQuote 保持一致）
  jsxSingleQuote: false,

  // 箭头函数参数：总是需要括号可以减少微妙的更改（有争议，但更显式）
  arrowParens: 'always', // or 'avoid' 根据偏好

  // Markdown 文本折行：'preserve' / 'always' / 'never'
  proseWrap: 'preserve',

  // 对 Windows / Unix 换行兼容，通常用 'lf'（CI 与大多数 unix 系统一致）
  endOfLine: 'lf',

  // HTML/JSX 空白敏感性：'css'（默认）较保守
  htmlWhitespaceSensitivity: 'css',

  // 对 Vue 项目：缩进 <script> 和 <style> 内容（若使用 Vue）
  vueIndentScriptAndStyle: false,

  // 插件示例（如果需要额外行为，例如排序导入）
  // plugins: [require.resolve('prettier-plugin-tailwindcss')], // 示例：tailwind class 排序
};

可替代 / 可调整项：

tabWidth: 4：若团队偏好更大缩进（尤其大型代码基、嵌套深），可将 tabWidth 改为 4。

trailingComma: 'es5'：如果对函数尾逗号不希望启用（兼容较老环境），选 es5。

为什么这些设置？

printWidth: 120：27" 屏幕通常能容纳更宽的代码行，120 可以兼顾可视性与较少的换行，减少 diff 噪音。
trailingComma: 'all'：在多行结构中新增/移动行时 git diff 更小、更干净。
singleQuote: true 与 semi: true：社区常用组合，减少语法陷阱（ASI）。
arrowParens: 'always'：避免因自动省略括号导致的格式变更，显式性更强。

`.prettierignore` 示例

# node / build / deps
node_modules
dist
build
coverage
.vscode
.idea

# lock / env
*.lock
.env
.env.local
.env.*.local

# other generated files
*.min.js
*.bundle.js

与 ESLint / TypeScript 协同（推荐）

使用 eslint-config-prettier 关闭 ESLint 中与 Prettier 冲突的规则。
使用 eslint-plugin-prettier 可将 Prettier 当作 ESLint 规则运行（可选，CI 中更常见）。

示例 package.json 脚本：

{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md,css,scss,html}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md,css,scss,html}\"",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  }
}

ESLint 配置示例（核心部分）：

// .eslintrc.js (核心片段)
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier' // 放在最后，关闭冲突规则
  ],
  plugins: ['@typescript-eslint'],
  rules: {
    // 团队规则...
  }
};

或使用 plugin:prettier/recommended 快速集成：

extends: ['plugin:prettier/recommended']

Git 提交前自动格式化（Husky + lint-staged）

建议在 pre-commit 时自动格式化并只提交改变的文件：

安装（示例）：

npm install -D husky lint-staged
npx husky install
npx husky add .husky/pre-commit "npx lint-staged"

package.json 配置：

"lint-staged": {
  "*.{js,jsx,ts,tsx,json,css,scss,md}": [
    "prettier --write",
    "git add"
  ]
}

编辑器 / 团队建议配置（VS Code）

在 .vscode/settings.json 或团队推荐配置里：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "prettier.configPath": ".",
  "prettier.requireConfig": true
}

prettier.requireConfig: true 可以防止编辑器在没有团队配置时使用全局/插件默认配置，减少意外差异。

额外建议（可选）

把 Prettier 配置放仓库根目录并加入代码审查准则：确保每个 PR 都能被格式化检查通过（format:check CI 步骤）。
对 Markdown/MDX 的 proseWrap 与 printWidth 做针对性调整：若团队常写长文档，可以把 proseWrap: 'always' 改为 'never' 或在 overrides 中单独设置。
使用 overrides：对不同文件类型使用不同规则（例如 JSON 用双引号强制、Markdown 字符换行策略等）。示例：

overrides: [
  { files: "*.md", options: { proseWrap: "always", printWidth: 80 } },
  { files: "*.json", options: { tabWidth: 2, useTabs: false } }
]

插件：如果使用 Tailwind / Astro / CSS-in-JS 等，可考虑对应的 Prettier 插件（例如 prettier-plugin-tailwindcss）来自动排序类名，但务必先评估团队接受度。

最小化争议的团队流程（建议）

由核心维护者制定并提交 prettier.config.js、.prettierignore、.vscode/settings.json 到主分支。
在 CI 中加入 npm run format:check，在 PR 中要求通过。
本地开发者开启 editor.formatOnSave 或在提交前运行 npm run format。
通过 husky + lint-staged 自动修复并阻止未格式化文件被提交。

其他可选：

1. 生成一个带 overrides 的更细化 prettier.config.js（比如为 Markdown、JSON、CSS 单独设置），
1. 或把上述配置转成 .prettierrc.cjs / JSON 格式，或添加一个完整的 package.json scripts + lint-staged 示例文件。

prettier 团队配置建议