配置 Prettier 在 VSCode 中自动格式化代码的教程

1. 安装 Prettier VSCode 插件

1. 打开 VSCode。
2. 点击左侧活动栏的扩展市场图标（或按 Ctrl+Shift+X）。
3. 在搜索栏中输入 Prettier - Code formatter。
4. 找到插件并点击 Install 安装它。

2. 配置 VSCode 设置

确保 VSCode 配置正确，使其在保存文件时自动格式化代码：

1. 打开 VSCode 设置文件（按 Ctrl + , 或 Cmd + ,）。
2. 选择右上角的 {} 图标，打开 settings.json 文件。
3. 添加以下配置：

// prettier vscode格式化选型配置
"editor.defaultFormatter": "esbenp.prettier-vscode", // 默认的代码格式化工具
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
},
"prettier.configPath": ".prettierrc", // 使用项目的配置(注释则使用vscode的配置)
"prettier.arrowParens": "always",
"prettier.bracketSpacing": true,
"prettier.endOfLine": "lf",
"prettier.printWidth": 80,
"prettier.tabWidth": 2,
"prettier.trailingComma": "all",
"prettier.semi": false,
"prettier.singleQuote": true,

3. 确保 Prettier 配置文件正确

在你的项目根目录下创建或检查 .prettierrc 文件，并确保其配置正确。例如：

.prettierrc：

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "htmlWhitespaceSensitivity": "ignore"
}

如果需要忽略某些文件或文件夹，可以创建 .prettierignore 文件：

.prettierignore：

node_modules
dist

4. 重启 VSCode

有时重启 VSCode 可以解决插件未正确加载的问题。重启 VSCode 后，保存文件时应自动格式化代码。

项目中引入 prettier

yarn add prettier

全局代码风格化

yarn prettier --write