代码美化 Prettier

按装 Prettier

pnpm install prettier -D

在根目录下创建 .prettierrc 文件

• 创建 .prettierrc 文件

{
  "singleQuote": true,
  "semi": true,
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf",
  "jsxSingleQuote": false,
  "quoteProps": "as-needed"
}

• 里面的格式对照

配置项	当前值	含义
singleQuote	true	字符串使用单引号 ' 而不是双引号 "（JSX 属性除外，由 jsxSingleQuote 控制）
semi	true	语句末尾加分号 ;
printWidth	120	每行最大宽度 120 字符，超过会自动换行（默认值是 80）
tabWidth	2	每级缩进用 2 个空格
useTabs	false	缩进用空格，不用 Tab 字符
trailingComma	"es5"	在 ES5 合法的位置加尾随逗号（对象、数组会加；函数参数不加）。可选 "none" / "es5" / "all"
bracketSpacing	true	对象花括号内加空格：{ foo: bar } 而非 {foo: bar}
bracketSameLine	false	JSX/HTML 元素的闭合 > 不放在最后一个属性的同一行，而是单独换行
arrowParens	"always"	箭头函数参数总是加括号：(x) => x，即使只有一个参数
endOfLine	"lf"	换行符统一用 LF（Unix 风格），避免 Windows CRLF 混用导致 git diff 噪音
jsxSingleQuote	false	JSX 属性值用双引号：<div className="foo">，与 HTML 习惯一致
quoteProps	"as-needed"	对象属性名仅在必要时加引号（如包含特殊字符的 "foo-bar"），普通属性不加

根目录创建.prettierignore文件

• 他表示不需要代码美化文件的目录

# 构建产物
dist
build
coverage

# 依赖目录
node_modules

# 锁文件
pnpm-lock.yaml
package-lock.json
yarn.lock

# 静态资源与二进制文件
*.svg
*.png
*.jpg
*.jpeg
*.gif
*.webp
*.ico

# 环境与日志文件
*.log
.env
.env.*

# 缓存目录
.cache
.vite