Prettier

1. 安装依赖

pnpm add -D prettier

2. 新建配置文件 .prettierrc

Prettier 也支持其他配置文件格式

• .prettierrc.json
• .prettierrc.yml
• .prettierrc.js
• prettier.config.js
• package.json 中的 prettier

{
  "printWidth": 120,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "ignore"
}

配置说明

• prettier.printWidth：每行建议最大字符数。
• prettier.semi：是否保留分号。
• prettier.singleQuote：JS/TS 字符串是否优先单引号。
• prettier.quoteProps：对象属性名是否加引号。
• prettier.trailingComma：多行数组、对象、函数参数是否保留尾逗号。
• prettier.htmlWhitespaceSensitivity：HTML 模板中的空白处理方式。

3. 新建 .prettierignore

node_modules
.vitepress/cache
.vitepress/dist
dist
coverage
.vscode
.idea
pnpm-lock.yaml
package-lock.json
yarn.lock
*.min.js

4. 配置脚本

在 package.json 中补充：

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

5. 验证

# 格式化整个项目
pnpm format

# 只检查，不改文件：
pnpm format:check

补充

忽略局部代码

// prettier-ignore
const config = {   foo: 'bar',    baz: 1 }

常用插件

package.json 排序

pnpm add -D prettier-plugin-packagejson

{
  "plugins": ["prettier-plugin-packagejson"]
}

Tailwind CSS

pnpm add -D prettier-plugin-tailwindcss

{
  "plugins": ["prettier-plugin-tailwindcss"]
}