vscode中使用prettier

最新推荐文章于 2025-06-18 12:04:07 发布

weixin_54940110

最新推荐文章于 2025-06-18 12:04:07 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签： vscode ide 编辑器

本文链接：https://blog.youkuaiyun.com/weixin_54940110/article/details/131729638

文章详细介绍了如何在VSCode中安装并配置Prettier，包括通过npm安装，设置.prettierrc文件以定义代码风格，如缩进、引号类型等，创建.prettierignore文件忽略特定文件，以及安装和配置VSCode的Prettier插件，启用自动保存时格式化代码的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.先安装 npm install prettier -D

2.配置.prettierrc文件：

useTabs：使用tab缩进还是空格缩进，选择false；
tabWidth：tab是空格的情况下，是几个空格，选择2个；
printWidth：当行字符的长度，推荐80，也有人喜欢100或者120；
singleQuote：使用单引号还是双引号，选择true，使用单引号；
trailingComma：在多行输入的尾逗号是否添加，设置为 none，比如对象类型的最后一个属性后面是否加一个，；

semi：语句末尾是否要加分号，默认值true，选择false表示不加；

{
  "useTabs": false,
  "tabWidth": 2,
  "printWidth": 80,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

3.创建.prettierignore忽略文件

4.VSCode需要安装prettier的插件

5.VSCod中的配置

settings =>format on save => 勾选上
settings => editor default format => 选择 prettier

6 settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },