目录

引言：

1. 安装 Prettier

2. 创建 .prettierrc 文件

3. 参数详解

3.1 printWidth

3.2 tabWidth

3.3 useTabs

3.4 semi

3.5 singleQuote

3.6 trailingComma

3.7 bracketSpacing

3.8 arrowParens

3.9 vueIndentScriptAndStyle

3.10 endOfLine

3.11 其他参数

结论

---

引言：

在软件开发过程中，代码的格式化对于提高代码的可读性和维护性至关重要。而在 VSCode 编辑器中，Prettier 是一个备受欢迎的代码格式化工具。通过使用 .prettierrc 文件，我们可以轻松地规定项目代码的格式。本篇博客将详细解析 .prettierrc 文件的配置参数及其可选值，并说明它们对代码格式的影响。

1. 安装 Prettier

首先，确保你已经安装了 Prettier。

VScode安装Prettier方法:

要在VSCode中安装Prettier，您可以按照以下步骤进行操作：

1. 打开VSCode编辑器。

2. 在侧边栏中选择“扩展”图标（或使用快捷键`Ctrl+Shift+X`）。

3. 在搜索栏中输入“Prettier”并按下回车键。

4. 在搜索结果中找到“Prettier - Code formatter”扩展，并点击“安装”按钮进行安装。

5. 安装完成后，您将看到一个“已安装”按钮。

2. 创建 .prettierrc 文件

接下来，创建一个名为 .prettierrc 的文件，并将以下代码复制到文件中，放在项目根目录：

{
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "auto"
}

3. 参数详解

现在，让我们逐个解释这些配置参数及其可选值以及对应的效果：

3.1 printWidth

• 描述：指定每行代码的最大长度。
• 默认值：80。
• 可选值：任意正整数。
• 效果：当一行代码超过指定长度时，Prettier 会自动将其拆分为多行。

3.2 tabWidth

• 描述：指定一个制表符的宽度。
• 默认值：2。
• 可选值：任意正整数。
• 效果：控制代码缩进时制表符的宽度。

3.3 useTabs

• 描述：指定是否使用制表符进行缩进。
• 默认值：false。
• 可选值：true 或 false。
• 效果：如果设置为 true，Prettier 将使用制表符进行缩进；如果设置为 false，Prettier 将使用空格进行缩进。

3.4 semi

• 描述：指定是否在语句末尾添加分号。
• 默认值：true。
• 可选值：true 或 false。
• 效果：如果设置为 true，Prettier 将在语句末尾添加分号；如果设置为 false，Prettier 将省略分号。

3.5 singleQuote

• 描述：指定是否使用单引号或双引号。
• 默认值：false。
• 可选值：true 或 false。
• 效果：如果设置为 true，Prettier 将使用单引号；如果设置为 false，Prettier 将使用双引号。

3.6 trailingComma

• 描述：指定是否在多行结构的最后一行添加逗号。
• 默认值：“none”。
• 可选值：“none”、“es5” 和 “all”。
• 效果：“none” 表示不添加逗号，“es5” 表示只在 ES5 中需要的地方添加逗号，“all” 表示在所有可能的地方都添加逗号。

3.7 bracketSpacing

• 描述：指定是否在对象字面量的括号之间添加空格。
• 默认值：true。
• 可选值：true 或 false。
• 效果：如果设置为 true，Prettier 将在括号之间添加空格；如果设置为 false，Prettier 将省略空格。

3.8 arrowParens

• 描述：指定箭头函数参数是否使用括号。
• 默认值：“avoid”。
• 可选值：“avoid” 或 “always”。
• 效果：“avoid” 表示只有一个参数时省略括号，“always” 表示始终使用括号。

3.9 vueIndentScriptAndStyle

• 描述：指定是否在 Vue 单文件组件中缩进

3.10 endOfLine

• 描述：指定换行符的类型。
• 默认值： “auto”。
• 可选值： “auto”、“lf” 和 “crlf”。
• 效果： “auto” 表示自动检测换行符类型，“lf” 表示使用 LF（Unix 风格）换行符，“crlf” 表示使用 CRLF（Windows 风格）换行符。

3.11 其他参数

除了上述参数外，.prettierrc 文件还支持其他参数，如：

• quoteProps：指定对象字面量中属性名是否使用引号。
• jsxSingleQuote：指定在 JSX 中是否使用单引号或双引号。
• jsxBracketSameLine：指定在多行 JSX 元素的末尾是否将闭合标签放在同一行。
• requirePragma：指定是否需要在文件顶部添加特定的注释来启用 Prettier。
• insertPragma：指定是否在文件顶部插入一个特定的注释来标记文件已经被 Prettier 格式化过。
• proseWrap：指定是否将 Markdown 文件中的文本换行。
• htmlWhitespaceSensitivity：指定 HTML 文件中空格的敏感度。
• embeddedLanguageFormatting：指定是否格式化嵌入式语言的代码。
• ignorePath：指定一个文件路径，Prettier 将从该文件中读取要忽略的文件和文件夹的列表。
• overrides：指定针对特定文件或文件夹的配置覆盖。

结论

通过在 .prettierrc 文件中配置这些参数，我们可以根据项目的需求来定制代码的格式。Prettier 可以与多种编程语言一起使用，因此你可以在各种项目中使用它来保持代码的一致性和可读性。希望本篇博客对你理解和使用 .prettierrc 文件有所帮助！

参考文献：

• Prettier - Configuration