你肯定不知道的Prettier 配置大揭秘：写代码的时候永远生龙活虎

寻找DX3906

于 2024-06-26 20:48:27 发布

阅读量997

点赞数 30

分类专栏： ES6语法系列插件工具系列脚手架系列文章标签： java 开发语言 Prettier vscode reactjs 前端

本文链接：https://blog.csdn.net/u011143504/article/details/139997417

版权

ES6语法系列同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

脚手架系列

24 篇文章 1 订阅

订阅专栏

插件工具系列

19 篇文章 0 订阅

订阅专栏

大家好，我是DX3906，坚持从工作和生活中不断学习，提炼，沉淀，最终建立自己的强势领域！

Prettier是一个流行的代码格式化工具，它支持多种语言和框架，帮助开发者使用一致的代码风格。Prettier的配置可以通过.prettierrc文件进行，这个文件可以使用JSON、YAML或JavaScript格式。

最近，我遇到了一个令人头疼的问题：尽管我们团队使用了Prettier来美化代码，但在合并代码时，我发现自己和同事的代码仍然存在大量的格式冲突。这让我感到非常沮丧，血压都升高了。那么，问题出在哪里呢？多人协作时，即使配置了Prettier，为什么还是会出现代码风格不一致的情况呢？经过深入分析，我发现问题可能出在以下几个方面：

安装prettier包

保证项目里已经安装了prettier的包。

npm i -D prettier

安装prettier插件

代码编辑器需要安装对应的prettier的插件，如vscode的插件：prettier-code formatter；

prettier配置文件

在项目根目录下配置了.prettierc文件。

{
  "tabWidth": 2, // tab键是2个宽度
  "useTabs": false,
  "singleQuote": true, // 是否采用单引号
  "semi": true, // 是否代码尾端添加分号
  "trailingComma": "none",
  "bracketSpacing": true
}

基本配置项

tabWidth: 定义制表符的空格数，默认为2。
useTabs: 决定是否使用制表符而不是空格，如果设置为true，则tabWidth将决定制表符宽度。
semi: 决定语句末尾是否添加分号，默认为true。
singleQuote: 使用单引号代替双引号，默认为false。
quoteProps: 对象属性是否使用引号，"as-needed"（默认）仅在使用引号可以提高可读性时添加，"consistent"总是添加。
trailingComma: 定义尾随逗号的行为。
bracketSpacing: 在对象、数组字面量中，括号内的空格，默认为true。
arrowParens: 箭头函数参数的括号，"avoid"（默认）省略括号当只有一个参数，"always"总是添加括号。

修改编辑器的配置文件

在设置代码编辑器，例如Visual Studio Code（VSCode）时，我们需要特别关注settings.json文件中的格式化配置。具体来说，你只需要指定editor.defaultFormatter选项，用它来明确指出你希望使用的默认代码格式化工具。同时，确保其他所有可能影响格式化的defaultFormatter配置项都被注释掉，以避免它们与你的设置发生冲突。

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true, // 开启 “保存自动格式化”

修改编辑器配置

另外，vscode编辑器会有自己的prettier的默认配置，如下图，这里的配置最好跟.prettierc里的一致，否则会按照后者的配置来，也就是说如果你配置了.prettierc文件，就无需管vscode的配置了，但是要把Prettier: Config Path的配置清空，这样会自动寻找项目根目录下的.prettierc文件

检查项目是否有单独的setting.json文件

这一点非常重要，检查你的项目里是否有.vscode文件夹，文件夹里是否也有setting.json这个文件，如果有，它会覆盖掉你在编辑器的setting.json文件配置！

CLI使用-批量美化代码

以上，都配置完成之后，如果你想立刻把项目里所有乱遭的代码都按照你配置的规则就行美化，执行以下命令

// 这是把src文件夹下所有的代码都格式化一遍
npx prettier --write src/

配置示例

JSON格式

{
  "tabWidth": 4,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "none",
  "bracketSpacing": false,
  "arrowParens": "avoid"
}

YAML格式

tabWidth: 4
useTabs: false
semi: false
singleQuote: true
quoteProps: "as-needed"
trailingComma: "none"
bracketSpacing: false
arrowParens: "avoid"

JavaScript格式

module.exports = {
  tabWidth: 4,
  useTabs: false,
  semi: false,
  singleQuote: true,
  quoteProps: "as-needed",
  trailingComma: "none",
  bracketSpacing: false,
  arrowParens: "avoid"
};