常用的Prettier配置项

最新推荐文章于 2024-06-14 10:52:04 发布

博观而约取

最新推荐文章于 2024-06-14 10:52:04 发布

阅读量1.7k

点赞数 37

分类专栏：工具文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_40483419/article/details/138483694

版权

工具专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Prettier是一个流行的代码格式化工具，提供一致的代码风格，支持多种语言，无需复杂配置。文章详细介绍了Prettier的工作原理，包括解析、格式化和输出的过程，以及.prettierrc.js中的常用配置选项。

摘要由CSDN通过智能技术生成

1. Prettier介绍

Prettier是一个流行的代码格式化工具，它旨在通过提供一致的代码风格来简化开发人员的工作流程。无论是单个开发人员还是团队，Prettier都可以帮助他们保持代码库的一致性，减少样式辩论，提高代码的可读性。

特点

一致的代码风格: Prettier会自动调整代码的格式，使其符合预定义的规范。这包括缩进、空格、换行、分号等方面的规范。

广泛的语言支持: Prettier支持多种编程语言，包括JavaScript、TypeScript、CSS、HTML、JSON、Markdown等，这使得它可以用于各种类型的项目。

零配置: Prettier提供了合理的默认设置，因此你不需要花费时间去配置。如果你想要定制某些设置，也可以通过配置文件或CLI参数来实现。

快速且可靠: Prettier的格式化速度非常快，且具有可靠的格式化效果。这意味着你可以在不影响工作流程的情况下，随时格式化大型代码库。

与编辑器集成: Prettier可以与许多流行的文本编辑器和IDE集成，如Visual Studio Code、Sublime Text、Atom等，以便在保存文件时自动格式化代码。

可扩展性: 虽然Prettier提供了丰富的功能，但它也支持插件系统，允许开发人员根据需要扩展其功能。

工作原理

Prettier的工作原理可以概括为以下几个步骤：

解析: Prettier首先会将输入的代码解析为抽象语法树（AST： Abstract Syntax Tree）。这是通过使用适当的解析器来实现的，根据输入代码的编程语言不同，Prettier会选择相应的解析器，比如对于JavaScript代码，它会使用babel或者typescript解析器。
格式化: 接下来，Prettier会根据预定义的规则和配置选项，对AST进行遍历和修改，以确保代码符合指定的格式规范。这些规则包括缩进、空格、换行、分号等方面的规范。Prettier会根据配置选项对代码的不同部分做出相应的调整。
重建: 一旦AST被修改以满足规则，Prettier会将修改后的AST重新构建为代码字符串。
输出: 最后，Prettier会输出格式化后的代码字符串，可以将其写入文件或者直接返回给用户。

Prettier的独特之处在于它是基于AST的工具。AST是代码在计算机中的抽象表示，它表示了代码的结构、关系和语义。通过操作AST而不是直接操作文本，Prettier可以确保对代码进行格式化时不会破坏其语义，从而保证了格式化的准确性和可靠性。

总的来说，Prettier的工作原理是将输入的代码转换为AST，根据预定义的规则对AST进行修改，然后将修改后的AST重新转换为代码字符串。这种基于AST的工作方式使得Prettier能够提供快速、可靠且一致的代码格式化功能。

2. 常用配置项

.prettierrc.js 是 Prettier 的配置文件，用于指定代码格式化的规则和选项。它是一个 JavaScript 文件，通常放置在项目的根目录下，以告诉 Prettier 如何格式化你的代码。在这个文件中，你可以指定诸如代码长度、缩进风格、使用单引号还是双引号等格式化选项。Prettier 将根据这些选项来调整和格式化你的代码，以确保代码风格的一致性。

以下是.prettierrc.js中的配置项、默认值（配置项后面定义的值就是默认值）、配置项解释和可选值，请根据实际项目需求修改：

module.exports = {
  printWidth: 80, // 单行代码的最大长度（字符个数，超过会折行），可选值是任意整数
  tabWidth: 2, // 一个制表符等于的空格数，可选值是任意整数
  useTabs: false, // 是否使用制表符代替空格，可选值是true（使用制表符）或false（使用空格）
  semi: true, // 是否在语句末尾添加分号，可选值是true（添加分号）或false（不添加分号）
  singleQuote: false, // 是否使用单引号，可选值是true（使用单引号）或false（使用双引号）
  quoteProps: "as-needed", // 属性名是否使用引号，当有需要时，可选值是"as-needed"（只在必要时加引号）或"consistent"（保持一致性）
  jsxSingleQuote: false, // 在JSX中是否使用单引号，可选值是true（使用单引号）或false（使用双引号）
  trailingComma: "none", // 对象或数组最后一个元素后是否加逗号，可选值是"none"（不加逗号）, "es5"（在ES5中有效的地方加逗号） 或 "all"（包括函数参数尾部的逗号）
  bracketSpacing: true, // 对象字面量的括号间是否加空格，可选值是true（加空格）或false（不加空格）
  jsxBracketSameLine: false, // 在JSX中的 '>' 符号是否与标签的最后一行末尾对齐，可选值是true（与标签的最后一行末尾对齐）或false（另起一行）
  arrowParens: "avoid", // 是否总是给箭头函数的参数加上括号，可选值是"avoid"（只在需要时添加括号）或"always"（总是添加括号）
  rangeStart: 0, // 在某个字符处启动格式化（与rangeEnd配合使用），可选值是任意整数
  rangeEnd: Infinity, // 格式化到某个字符处（与rangeStart配合使用），可选值是任意整数
  parser: "babel", // 使用的解析器，如 'babel', 'flow', 'typescript' 等，可选值是解析器的名称字符串
  filepath: null, // 用于确定哪些文件需要格式化，可选值是文件路径字符串或者null
  requirePragma: false, // 是否需要特殊标记（如 '@format'）才会格式化文件，可选值是true（需要标记）或false（不需要标记）
  insertPragma: false, // 是否插入特殊标记（如 '@format'）来格式化文件，可选值是true（插入标记）或false（不插入标记）
  overrides: [], // 针对某些文件类型的特殊配置，可选值是数组，数组元素是对象
  endOfLine: "auto", // 换行符的样式，可选值是"auto"（根据文件中的第一行决定换行符类型）, "lf"（强制使用 LF 作为换行符）, "crlf"（强制使用 CRLF 作为换行符） 或 "cr"（强制使用 CR 作为换行符）
  embeddedLanguageFormatting: "auto", // 是否格式化内嵌的代码语言，可选值是"auto"（自动）， "off"（不格式化内嵌的代码语言）， "on"（始终格式化内嵌的代码语言）
  proseWrap: "preserve" // 是否要换行符折行，可选值是"preserve"（保持原样）, "always"（始终折行）， "never"（从不折行）
};