前端开发规范-Prettier

用户971884103405
473 阅读7分钟

Prettier 介绍

Prettier 它删除所有原始风格样式 * 并确保所有输出的代码都符合一致的风格。

原文是这样介绍它的，通俗一点就是按照配置的规则来格式化代码，增强代码的可读性。比如 占用一行的长代码自动换行成多行等。

自己总结的小文章

Husky+Lint-Staged+Commitlint+ESLint+Prettier

ESLint && Prettier

ESLint

插件

插件是向 Prettier 添加新语言或格式化规则的一种方式。Prettier 对所有语言的自身实现都是通过插件 API 表达的。核心的 prettier 包内置了 JavaScript 和其他面向 Web 的语言。对于额外的语言，你需要安装相应的插件。

Prettier 默认支持 JavaScript、TypeScript、HTML、CSS、JSON 等常见的 Web 开发语言和格式。对于 Vue、React 和 TypeScript 这样的库或框架，Prettier 也提供了支持，但可能需要额外的配置或插件来确保最佳的格式化效果。

  1. Vue 支持：

    • Prettier 默认支持 Vue 单文件组件 (SFCs)，即 .vue 文件。
    • 如果需要更高级的 Vue 支持（例如 Vue 3 的 <script setup> 语法），可以安装 @vue/eslint-config-prettier 并配置 ESLint 和 Prettier。

  2. React 支持：

    • Prettier 默认支持 JSX 语法，因此可以很好地格式化 React 组件。
    • 如果使用 TypeScript 与 React 结合，确保已安装 TypeScript 支持插件。

  3. TypeScript 支持：

    • Prettier 默认支持 TypeScript 语法。
    • 为了获得最佳的 TypeScript 支持，确保安装了 typescript 和 @types/prettier。

与 Linters 集成

Linter 通常不仅包含代码质量规则，还包含文体规则。使用 Prettier 时，大多数风格规则都是不必要的，所以 Linter 中部分规则可能与 Prettier 发生冲突！

使用以下库解决冲突：

预提交钩子

你可以将 Prettier 与预提交工具一起使用。这可以在提交之前重新格式化通过 git add 标记为“暂存”的文件。

  • lint-staged 此方式可以配合代码质量工具与Prettier(例如ESLint、Stylelint 等)一起使用. 或者如果你需要对部分暂存文件 (git add --patch) 进行格式化时使用
npx mrm@2 lint-staged

此命令会安装 [husky](https://github.com/typicode/husky) 和 [lint-staged](https://github.com/okonet/lint-staged) 然后向项目的 package.json 添加一个配置，该配置将在预提交钩子中自动格式化支持的文件。

其他方式可以看官网预提交钩子的介绍。

配置信息

列一些我觉得很常用的 经常会改变的一些配置

  • experimentalTernaries 三元运算符 默认值为 false
    • true - 使用奇怪的三元组，在条件后面加上问号
    • false - 保留三元组的默认行为；将问号与结果保持在同一行。
  • printWidth 打印宽度 就是一行最长多少，超出换行 默认值为 80
【官网文档说明】（点击展开）

为了便于阅读，我们建议不要使用超过 80 个字符：

在代码样式指南中，最大行长度规则通常设置为 100 或 120。然而，当人类编写代码时，他们不会努力达到每一行的最大列数。开发者经常使用空格来分隔长行以提高可读性。实际上，平均行长度通常远低于最大值。

Prettier 的 printWidth 选项的工作方式不同。这不是硬性允许的行长度上限。这是一种向 Prettier 大致说明你希望线路多长的方式。Prettier 会制作更短和更长的行，但一般会努力满足指定的 printWidth。

换句话说，不要尝试像使用 ESLint 的 max-len 一样使用 printWidth ——它们不一样。max-len 只是表示允许的最大行长度，而不是通常首选的长度 - 这是 printWidth 指定的。

  • tabWidth tab字符在编辑器中的空格数量 默认值为 2

  • useTabs 缩进类型是否使用制表符而不是使用空格 默认值为 false

  • semi 末尾添加分号 默认值为 false

  • singleQuote 定义字符串时是否使用单引号 默认值为 false

    • 注意 jsx 引号忽略此选项

  • quoteProps 用于控制对象字面量中的属性名何时应该使用引号 默认值为 as-needed"

    • "as-needed" - 只在必要时使用引号，即当属性名不是有效的标识符时。
    • "consistent" - 如果对象中有任何一个属性名需要使用引号，则所有属性名均使用引号。
    • "preserve" - 保持源代码中的引号使用，即如果源代码中某个属性名使用了引号，则在格式化后的代码中也使用引号。

  • bracketSpacing 对象字面量中括号之间的空格 默认值为 true

    • true - 示例：{ foo: bar }
    • false - 示例：{foo: bar}

  • bracketSameLine 标签最后 > 是否换行 默认值为 false 将多行 HTML（HTML、JSX、Vue、Angular）元素的 > 放在最后一行的末尾，而不是单独放在下一行（不适用于自关闭元素）

    • true - 示例：
    <button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>
    • false - 示例：
    <button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

  • bracketSpacing 在唯一的箭头函数参数周围包含括号 默认值为 always

    • "always" - 始终包括父级。示例：(x) => x
    • "avoid" - 尽可能省略括号。示例：x => x

  • htmlWhitespaceSensitivity DOM 标签中的属性是否保留空格 默认值为 css

  • "css" - 遵守 CSS display 属性的默认值。对于与 strict 相同处理的 Handlebars。

    • 解释：
      • css：此选项尊重 CSS display 属性的默认值。这意味着 Prettier 会考虑元素的默认显示方式来决定是否保留空白字符。例如，对于默认为 block 的元素（如 <div>），Prettier 会保留空白字符以保持更好的可读性。
      • Handlebars：对于 Handlebars 模板，css 选项的行为与 strict 选项相同，即严格遵循源代码中的空白字符。

  • "strict" - 严格遵循源代码中的空白字符。

  • "ignore" - 严格遵循源代码中的空白字符。

  • endOfLine 每个结束行的换行符 默认值为 lf
    • "lf" - 仅换行 (\n)，在 Linux 和 macOS 以及 git repos 中很常见
    • "crlf" - 回车 + 换行字符 (\r\n)，在 Windows 上很常见
    • "cr" - 仅回车字符 (\r)，很少使用
    • "auto" - 维护现有的行结尾（一个文件中的混合值通过查看第一行之后使用的内容来规范化）

此配置 原因在于 不同的操作系统 具体说明可以查看官方文档

  • singleAttributePerLine DOM 标签属性是否换行 默认值为 false
    • false - 不要强制每行使用一个属性
    • true - 每行强制执行单个属性.

Parser 解析器

单独讲一下这个， 它的作用就是指定要使用的解析器进行对文件的解析，并按此规则进行格式化。

而且 Prettier 使用不同的解析器来处理不同类型的源代码文件。默认情况下，Prettier 会根据文件扩展名自动选择适当的解析器.

注意： 自定义解析器 API 已在 v3.0.0 中删除。使用 插件 代替

大家可以到 Prettier_Playground 中体验一下, 而且可以看到生成的AST树，可以深入分析原理。

image.png

配置文件

配置文件的优先级：

  1. package.json 中 "prettier" 键。
  2. .prettierrc 文件w
  3. .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 文件
  4. .prettierrc.js 或 prettier.config.js 文件
  5. .prettierrc.toml 文件

相关项目

在官方文档-相关项目中有提到这一块，基本就是配合 ESLint 或者 StyleLint 一起使用时需要的一些库，用于解决冲突。这里可以看官网去更准确。

小小结

这里主要了解 Prettier 是做什么的，可以格式化哪些配置。命令行等其他方式这里就不讲了，有兴趣的可以到官方查阅。

avatar
文章
阅读
粉丝