Prettier助力Windows平台高效格式化HTML与CSS代码

正文：

在快节奏的前端开发中，代码格式的一致性直接影响团队协作效率和可维护性。Prettier作为现代开发者的“代码美容师”，能够通过简单的配置实现多语言代码的自动化格式化。本文将手把手教你如何在Windows系统中用Prettier同时驯服HTML和CSS代码。

---

1. 环境准备：安装Node.js与Prettier

首先确保系统已安装Node.js（建议LTS版本），随后通过命令行全局安装Prettier：

npm install --global prettier

安装完成后，验证版本：

prettier --version

---

2. 项目级配置：创建.prettierrc文件

在项目根目录新建.prettierrc配置文件，定义HTML和CSS的通用规则：

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "htmlWhitespaceSensitivity": "css"
}

关键参数说明：
– htmlWhitespaceSensitivity：确保HTML与CSS空格规则兼容
– singleQuote：强制单引号风格

---

3. 实战格式化：批量处理文件

格式化单个文件

prettier --write src/index.html

批量处理整个目录

prettier --write "src/**/*.{html,css}"

---

4. 进阶技巧：与编辑器集成

主流编辑器（如VSCode）可通过扩展实现保存时自动格式化：
1. 安装Prettier插件
2. 在设置中勾选Format On Save
3. 指定默认格式化工具为Prettier

---

5. 常见问题排查

• 规则冲突：若与ESLint规则冲突，可安装eslint-config-prettier禁用重叠规则
• 中文乱码：在命令前添加CHCP 65001切换控制台编码
• 忽略文件：通过.prettierignore排除无需格式化的目录