配置 Prettier 在 VSCode 中自动格式化代码的教程
1. 安装 Prettier VSCode 插件
- 打开 VSCode。
- 点击左侧活动栏的扩展市场图标（或按
Ctrl+Shift+X）。 - 在搜索栏中输入
Prettier - Code formatter。 - 找到插件并点击
Install安装它。
2. 配置 VSCode 设置
确保 VSCode 配置正确，使其在保存文件时自动格式化代码：
- 打开 VSCode 设置文件（按
Ctrl + ,或Cmd + ,）。 - 选择右上角的
{}图标，打开settings.json文件。 - 添加以下配置：
// 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