悠悠楠杉
网站页面
正文:
在快节奏的前端开发中,代码格式的一致性直接影响团队协作效率和可维护性。Prettier作为现代开发者的“代码美容师”,能够通过简单的配置实现多语言代码的自动化格式化。本文将手把手教你如何在Windows系统中用Prettier同时驯服HTML和CSS代码。
首先确保系统已安装Node.js(建议LTS版本),随后通过命令行全局安装Prettier:
npm install --global prettier安装完成后,验证版本:
prettier --version在项目根目录新建.prettierrc配置文件,定义HTML和CSS的通用规则:
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"htmlWhitespaceSensitivity": "css"
}关键参数说明:
- htmlWhitespaceSensitivity:确保HTML与CSS空格规则兼容
- singleQuote:强制单引号风格
prettier --write src/index.htmlprettier --write "src/**/*.{html,css}"主流编辑器(如VSCode)可通过扩展实现保存时自动格式化:
1. 安装Prettier插件
2. 在设置中勾选Format On Save
3. 指定默认格式化工具为Prettier
eslint-config-prettier禁用重叠规则CHCP 65001切换控制台编码.prettierignore排除无需格式化的目录