Prettier格式化工具

发表于 更新于 分类于 阅读次数：

Prettier 是什么

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

Prettier 使用

  1. VSCode

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

  2. 配置文件

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

    1
    npm install --save-dev --save-exact prettier

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    {
      "printWidth": 160,
      "arrowParens": "always",
      "bracketSameLine": true,
      "bracketSpacing": true,
      "semi": true,
      "singleAttributePerLine": false,
      "vueIndentScriptAndStyle": true,
      "htmlWhitespaceSensitivity": "ignore"
    }
    1
    2
    3
    4
    # 使用命令格式化项目文件
    npx prettier . --write
    # 检查哪些文件没有格式化
    npx prettier . --check

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    {
      "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 类似。

1
2
3
4
5
6
7
8
9
10
11
12
/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. 配置不生效
    1. 重启下 VSCode 试试
    2. 查看自己是不是安装了其他的格式化工具。设置 Prettier 为格式化工具