大家好,我是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"
};
配置文件的查找
Prettier会按照以下顺序查找配置文件:
.prettierrc.json
.prettierrc.js
.prettierrc.yml
.prettierrc.yaml
.prettierrc
prettier.config.js
- 通过
package.json
中的prettier
字段
集成到编辑器
Prettier可以集成到大多数现代代码编辑器中,如VS Code、Sublime Text、Atom等。编辑器插件通常会使用.prettierrc
文件或package.json
中的配置。
注意事项
- Prettier的配置应该根据团队的代码风格指南进行设置,以确保团队成员之间的代码风格一致。
- 配置Prettier时,确保了解每个配置项的含义,以避免不必要的代码风格冲突。
- 定期更新Prettier和相关插件,以利用最新的格式化规则和性能改进。
通过合理配置Prettier,可以大大提高代码的可读性和一致性,减少代码风格相关的讨论和审查工作。
结语
🔥如果此文对你有帮助的话,欢迎💗关注、👍点赞、⭐收藏、✍️评论,支持一下博主~