Prettier格式化工具

发表于: 2023-06-12 更新于: 2025-05-30 浏览: 1

Prettier 是什么

Prettier 是一个代码格式化工具，它支持 JavaScript 等编程语言的代码格式化。它是一个“有态度”的代码格式化工具，它支持“Opinionated”的代码格式化，即你必须认同它的观点，按照它说的做。Prettier 的特点是：自动化、一致性、可配置性、支持多种语言、易于集成。

Prettier 使用

VSCode

VSCode 中下载一个插件Prettier - Code formatter 插件，安装之后点击设置来进行代码配置
配置文件

这个需要项目配合，由于我是 JS 代码开发项目。所以我使用的环境是 npm 包管理器。需要执行以下命令安装插件
```
npm install --save-dev --save-exact prettier
```

安装完成之后在项目根目录新建 .prettierrc.json 文件，然后写入如下的内容

{
  "printWidth": 160,
  "arrowParens": "always",
  "bracketSameLine": true,
  "bracketSpacing": true,
  "semi": true,
  "singleAttributePerLine": false,
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore"
}

# 使用命令格式化项目文件
npx prettier . --write
# 检查哪些文件没有格式化
npx prettier . --check

下面给出官方的选项以及可选的配置值

{
  "printWidth": 80, // 指定打印机换行的行长度。可以是任意正整数。
  "tabWidth": 2, // 指定每个缩进级别的空格数。可以是任意正整数。
  "useTabs": false, // 用制表符而不是空格缩进行。可以是true或false。
  "semi": true, // 在语句末尾打印分号。可以是true或false。
  "singleQuote": false, // 使用单引号而不是双引号。可以是true或false。
  "quoteProps": "as-needed", // 改变对象属性中的引号。可以是"as-needed"，"consistent"或"preserve"。
  "jsxSingleQuote": false, // 在JSX中使用单引号而不是双引号。可以是true或false。
  "trailingComma": "es5", // 在多行逗号分隔的语法结构中打印尾随逗号。可以是"all"，"es5"或"none"。
  "bracketSpacing": true, // 在对象字面量中的括号之间打印空格。可以是true或false。
  "jsxBracketSameLine": false, // 将多行HTML元素的>放在最后一行的末尾，而不是单独放在下一行。可以是true或false。
  "arrowParens": "always", // 在单个箭头函数参数周围包含括号。可以是"always"或"avoid"。
  "rangeStart": 0, // 格式化文件的一部分的起始字符偏移量（包含）。可以是任意非负整数。
  "rangeEnd": Infinity, // 格式化文件的一部分的结束字符偏移量（不包含）。可以是任意非负整数。
  "parser": "babel", // 指定要使用的解析器。可以是"babel"，"babel-flow"，"babel-ts"，"typescript"，"json"，"json5"，"json-stringify"，"graphql"，"mdx"，"html"，"vue"，"angular"，"lwc"或者其他自定义解析器。
  "filepath": "", // 指定要用于推断解析器的文件名。可以是任意字符串。
  "requirePragma": false, // 只格式化包含特殊注释（称为pragma）的文件。可以是true或false。
  "insertPragma": false, // 在格式化的文件顶部插入一个特殊的@format标记，指示该文件已经用Prettier格式化过了。可以是true或false。
  "proseWrap": "preserve", // 控制是否对markdown文本进行换行。可以是"always"，"never"或者"preserve"
  "htmlWhitespaceSensitivity": "css", // 指定HTML，Vue，Angular和Handlebars中的全局空白敏感度。[^1^][1]参见空白敏感格式化以获取更多信息。可以是“css”，“strict”或“ignore”。
  "vueIndentScriptAndStyle": false, // 是否在Vue文件中的<script>和<style>标签内缩进代码。可以是true或false。
  "endOfLine": "lf", // 指定行尾字符。可以是“lf”，“crlf”，“cr”或“auto”。
  "embeddedLanguageFormatting": "auto" // 控制Prettier是否格式化嵌入在文件中的代码。可以是“auto”或“off”。
}

忽略格式化配置文件

在根目录下配置新建 .prettierignore 配置文件。里面写入你不想格式化的文件，格式和 .gitignore 类似。

/dist/*
.local
.output.js
.github
.vscode
/node_modules/**

*.html
**/*.svg
**/*.sh

/public/**

配置文件优先级

Prettier 使用 cosmiconfig 来支持配置文件。这意味着你可以通过以下方式配置 Prettier（优先级从高到低）：

在你的 package.json 文件中的"prettier"键。
用 JSON 或 YAML 编写的.prettierrc 文件。
.prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或.prettierrc.json5 文件。
.prettierrc.js、.prettierrc.cjs、prettier.config.js 或 prettier.config.cjs 文件，使用 module.exports 导出一个对象。
.prettierrc.toml 文件。

配置文件将从被格式化的文件的位置开始解析，并在文件树中向上搜索，直到找到（或找不到）配置文件。Prettier 故意不支持任何形式的全局配置。这是为了确保当一个项目被复制到另一台计算机时，Prettier 的行为保持不变。否则，Prettier 将无法保证团队中的每个人都能获得相同的一致结果。

常见问题

配置不生效
1. 重启下 VSCode 试试
2. 查看自己是不是安装了其他的格式化工具。设置 Prettier 为格式化工具