使用Prettier插件可批量格式化CSS文件：安装插件并配置规则，通过命令面板执行“Format Folder”选择目录批量处理；或利用全局搜索打开多个CSS文件，在启用“保存时自动格式化”后逐一保存；也可在settings.json中设置Prettier为默认格式化工具；高级用户可通过npm脚本调用Prettier CLI命令实现全项目格式化。推荐优先使用Format Folder功能，确保格式化工具正确绑定以统一代码风格。
在 VSCode 中批量格式化多个 CSS 文件，可以通过结合内置功能和扩展插件高效完成。不需要逐个打开文件手动格式化，以下方法能帮你快速统一项目中所有 CSS 文件的代码风格。
使用 Prettier 扩展批量格式化 CSS 文件
Prettier 是最常用的代码格式化工具，支持 CSS、SCSS、Less 等样式文件，集成在 VSCode 中非常方便。
操作步骤：- 安装 Prettier - Code formatter 插件（由 Prettier 官方维护）
- 在项目根目录创建配置文件
.prettierrc或.prettier.config.js，设置 CSS 格式规则，例如：
{
"semi": true,
"trailingComma": "all",
"singleQuote": false,
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"endOfLine": "lf"
}
- 打开命令面板（Ctrl + Shift + P），输入并选择：Prettier: Format Workspace 或 Prettier: Format Folder
- 选择包含 CSS 文件的目录，Prettier 会自动格式化该路径下所有支持的文件
通过文件搜索 + 多文件保存触发格式化
如果已设置“保存时自动格式化”，可以利用 VSCode 的文件搜索功能批量打开并保存 CSS 文件。
- 按下 Ctrl + Shift + F 打开全局搜索
- 输入
*.css并将搜索范围限定在项目内 - 在搜索结果上右键 → 在编辑器组中打开，或手动依次打开多个 CSS 文件
- 启用设置：
"editor.formatOnSave": true - 全选标签页（可使用鼠标拖选或快捷键切换），然后逐一保存（Ctrl + S），格式化将自动执行
配置默认格式化工具为 Prettier
确保 VSCode 知道用哪个工具格式化 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
- 右键点击任意 CSS 文件 → 格式化文档… → 选择 Prettier 作为默认
- 或在
settings.json中添加：
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[scss]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
使用终端脚本配合 Prettier CLI（高级用法）
如果你熟悉命令行，可在项目中全局运行 Prettier 命令。
- 项目中安装 prettier：
npm install --save-dev prettier - 在 package.json 添加脚本：
"scripts": {
"format:css": "prettier --write \"**/*.css\""
}
- 运行：
npm run format:css，即可格式化整个项目中的所有 CSS 文件
基本上就这些方法。推荐优先使用 Prettier 插件配合 Format Folder 功能，简单又可靠。只要配置一次，以后都能快速统一代码风格。不复杂但容易忽略的是默认格式化工具的设置，务必确认 CSS 文件绑定到了正确的 formatter。
