Skip to main content

Prettier

Prettier​

代码风格是所有程序员都要遇到的问题，不管是团队协作还是个人练习。有的喜欢有分号，代码更安全；有的喜欢没分号，能少打一个字符；有的喜欢单引号，能少按一下 Shift；有的喜欢反引号，扩展更高；camelCase、 PascalCase、 snake_case 总是在团队里无法统一，就算统一了，有些队员心里也不服，因为代码风格太主观了，根本无法让谁信服谁，每个程序最喜欢看的代码还是自己的代码。

Prettier是一个流行的代码格式化工具，它可以自动调整代码的样式，使其更具可读性和一致性。它支持多种编程语言，包括 JavaScript、TypeScript、HTML、CSS、SCSS、GraphQL、JSON、Markdown 等。

Prettier 会把代码转换成抽象语法树，然后再用 Prettier 的代码风格规则来输出格式化后的代码。Prettier 能够支持的格式化语言非常多，并非仅仅只为 JavaScript 服务，理论上来讲，只要把一门语言的代码抽象为语法树，然后再有对应的格式化规则，那么无论什么语言都是可以的。

Prettier 属于 Opinionated 哲学，意味着它提供的代码风格已经是最优的，不希望使用者做太多自定义的内容，而应该相信 Prettier 已经服务到位了。

特点​

Prettier 的核心特点包括：

  • 一致的代码风格：Prettier 可以帮助团队成员统一代码风格，减少代码审查时关于代码格式的讨论。
  • 无需配置：Prettier 的默认配置就足以满足大多数项目的需求。使用 Prettier 时，通常不需要花费时间调整和维护配置文件。
  • 集成多种编辑器：Prettier 支持许多流行的代码编辑器，如 Visual Studio Code、Sublime Text、Atom 等都有相应的插件，可以在编写代码时自动运行 Prettier。
  • 可配置性：虽然 Prettier 默认配置通常已经足够，但它仍支持自定义配置。你可以在项目根目录下创建一个 .prettierrc 文件，根据项目需求调整格式化选项。
  • 自动格式化：Prettier 可以自动格式化文件，无需手动调整代码格式。
  • 支持多种语言：Prettier 支持多种编程语言和文件格式，提供广泛的适用性。

哲学​

其实在很早之前已经有人开始研究哪种方式来格式化长文本是最好的(Prettier Printer)，比如Philip Wadler在《A prettier printer》这里给出了一些自动格式化换行的理论依据。

Prettier 的作者 James 在这篇论文基础上再完善了一些代码风格规则，最终成为了 Prettier 格式化代码的最终方案。比如像下面的链式调用，Prettier 输出的就比原来论文描述的要好看一些：

// 原版 "A prettier printer" 的实现
hello().then(() => {
  something()
}).catch(console.error)


// Prettier 的实现
hello()
  .then(() => {
    something()
  })
  .catch(console.error)

插件​

Prettier 官方以及社区就提供了一些插件，通过使用插件，可以让 Prettier 格式化更多种类的代码，添加对新语言和文件类型的支持。Prettier 插件通常是单独的 npm 包，需要安装它们作为项目的依赖。

插件的名称通常遵循 prettier-plugin-* 的命名规范，安装插件后，Prettier 会自动发现并使用它们。

  • prettier-plugin-svelte：这个插件为 Svelte 组件提供了格式化支持。安装这个插件后，你可以使用 Prettier 格式化 Svelte 文件。
  • prettier-plugin-toml：这个插件为 TOML 配置文件提供了格式化支持。安装这个插件后，你可以使用 Prettier 格式化 TOML 文件。
  • prettier-plugin-java：这个插件为 Java 语言提供了格式化支持。安装这个插件后，你可以使用 Prettier 格式化 Java 文件。
  • prettier-plugin-php：这个插件为 PHP 语言提供了格式化支持。安装这个插件后，你可以使用 Prettier 格式化 PHP 文件。

也可以通过安装 VS Code 插件的方式来使用 prettier。使用脚本命令和使用 VS Code 插件两者之间的差别如下：

  • 实时性：使用 Prettier 的 VS Code 插件，可以在编写代码时立即看到格式化效果，而不需要等待执行脚本命令。这有助于在编写代码时就保持良好的代码风格。

  • 范围：通过运行脚本命令 prettier --write .，你可以一次性格式化整个项目中的所有文件。而 Prettier 插件只会在你需要时（如保存文件）格式化当前打开的文件。

基本使用​

yarn add prettier -D
const str = "Helo World";

const arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30];

const obj = {
    name: "John Doe",
    age: 30,
    address: {
        city: "New York",
        state: "NY"
    }
}

在 package.json 里面添加命令行脚本：

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

格式化规则​

所有的格式化规则，这些规则虽然很重要，但是本身来讲都很简单。

常用的规则：

  • 行宽：Prettier 默认将行宽限制在 80 个字符。如果一行代码超过这个长度，Prettier 会自动进行换行。你可以通过 printWidth 配置项自定义行宽。
  • 缩进：Prettier 默认使用 2 个空格进行缩进。你可以通过 tabWidth 和 useTabs 配置项自定义缩进宽度和是否使用制表符（tab）。
  • 分号：Prettier 默认在每个语句结尾添加分号。你可以通过 semi 配置项选择是否强制添加分号。
  • 引号：Prettier 默认使用双引号。你可以通过 singleQuote 配置项自定义引号类型。
  • 尾随逗号：Prettier 默认在多行结构（如对象字面量和数组字面量）的最后一个元素后添加尾随逗号。你可以通过 trailingComma 配置项自定义尾随逗号的使用。
  • 括号空格：Prettier 默认在括号内添加空格。例如，{ foo: bar }。你可以通过 bracketSpacing 配置项自定义括号内的空格。
  • 箭头函数参数括号：Prettier 默认在箭头函数只有一个参数时省略参数括号。你可以通过 arrowParens 配置项自定义箭头函数参数括号的使用。
  • HTML 属性换行：Prettier 会在 HTML 标签的属性超过 printWidth 时进行换行。你可以通过 htmlWhitespaceSensitivity 配置项自定义换行策略。
  • JSX 标签闭合：Prettier 默认将没有子元素的 JSX 标签闭合。例如，<br />。你可以通过 jsxBracketSameLine 配置项自定义 JSX 标签闭合的风格。

这些规则是 Prettier 默认规则，也是行业内的最佳实践标准，因此平时在书写代码的时候，就应该主动的按照这些规则去规范书写代码。

配置文件​

配置文件的作用是做规则自定义。在 Prettier 中提供了多种配置方式，并且多种配置方式之间会有一个优先级。

命令行选项​

在 package.json 中配置 scripts 脚本命令是，可以添加配置参数：

"scripts": {
  "format": "prettier --no-semi --print-width 50 --write ."
}

这种命令行的配置方式优先级是最高的，但是这种方式不适合自定义规则较多的场景。

配置文件​

这种方式是单独创建一个配置文件，在文件中配置相关规则，这种方式是最推荐使用的。

配置文件的格式支持多种格式，Prettier 会自动识别并应用这些文件中的配置：

  • .prettierrc
  • .prettierrc.json
  • .prettierrc.yaml
  • .prettierrc.yml
  • .prettierrc.js
  • prettier.config.js

在这些文件里面，一般就是一个对象：

{
  "singleQuote": true,
  "semi": false,
  "printWidth": 80,
  "trailingComma": "es5"
}
pacakge.json​

也可在 pacakge.json中进行配置，通过添加一个配置选项 prettier：

{
    "name": "my-project",
    "version": "1.0.0",
    "prettier": {
      "singleQuote": true,
      "tabWidth": 4
    }
}
编辑器配置​

许多代码编辑器可以安装和 Prettier 相关的插件，之后可以在编辑器里进行配置。

默认配置​

默认配置一般优先级是最低，但是却是最常用的，因为这套配置已经是行业最佳实践了。

忽略文件​

有点类似于 .gitignore，Prettier 也支持 .prettierignore，用来排除一些文件或者目录，.prettierignore 里面的文件或者目录不会被 Prettier 进行处理。

# 忽略所有的 .min.js 文件
*.min.js

# 忽略整个 build 目录
/build/

# 忽略 node_modules 目录
node_modules/

# 忽略特定文件
my-special-file.js

Prettier CLI​

Prettier也支持命令行操作。

基本的格式：

prettier [options] [file/dir/glob ...]

常用配置选项：

  • --write：表示格式化后写入到原本的文件。
  • --check：用于检查文件是否已经按照 Prettier 规则进行了格式化。
  • --find-config-path和 --config：指定配置文件的路径。正常情况下，Prettier 会自动去找项目下面的配置 文件。
  • --no-config：不读取任何配置文件，直接使用 prettier 里面默认的配置。
  • --ignore-path：指定忽略文件的路径，正常情况下在当前项目中去寻找。

APIs​

以命令行的方式在对代码进行格式化的时候，其实底层是调用的 Prettier 对应的各种 API。

format​

format 是整个 Prettier 中最最核心的 API，负责的对代码进行格式化操作。

prettier.format(source, options)
const prettier = require("prettier");
const fs = require("fs");
const path = require("path");

const options = {
  singleQuote: false,
  printWidth: 50,
  semi: false,
  trailingComma: "es5",
  parser: "babel",
};

fs.readdir("src", (err, files) => {
  if (err) throw err;

  for (let i = 0; i < files.length; i++) {
    const sourcePath = path.resolve("src", files[i]);
    const jsSource = fs.readFileSync(sourcePath, "utf8");

    prettier.format(jsSource, options).then((res) => {
      fs.writeFileSync(sourcePath, res, "utf-8");
    });
  }
});

在使用 API 进行格式化的时候，格式化规则里面需要添加 parser，指定对应的解析器。

check​

check 可以检测对应的文件是否已经被 Prettier 格式化，如果已经被格式化，则返回 true，否则返回 false。

prettier.check(source, [ options ])
Last updated on