Prettier一键美颜，HTML+CSS代码秒变高级感！

如果您在编写HTML和CSS代码时希望快速提升代码的可读性和视觉美感，却发现格式混乱、缩进不统一，影响开发效率，可以借助Prettier这一强大的代码格式化工具来一键优化。它能自动调整代码结构，使HTML与CSS呈现出高度一致的高级感排版。

本文运行环境：MacBook Pro，macOS Sonoma

一、通过VS Code插件集成Prettier

Prettier作为VS Code中最受欢迎的代码美化工具之一，能够实时格式化前端代码，无需手动调整空格与换行。

1、打开VS Code编辑器，进入扩展市场（Extensions）。

立即学习“前端免费学习笔记（深入）”；

2、搜索 Prettier - Code formatter 并安装由Prettier官方维护的插件。

3、安装完成后，在项目根目录创建配置文件 .prettierrc 以自定义格式规则。

4、右键点击HTML或CSS文件，选择“Format Document With”并指定Prettier为默认格式化工具。

二、配置.prettierrc实现个性化排版

通过配置文件可精细化控制Prettier的行为，使其符合团队编码规范或个人审美偏好。

1、在项目根路径下新建文件名为 .prettierrc 的JSON文件。

2、添加如下配置项以调整HTML标签换行与CSS大括号风格：

{

  "printWidth": 80,

  "tabWidth": 2,

  "bracketSameLine": false,

  "semi": true,

  "singleQuote": true,

  "trailingComma": "es5"

}

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

308

查看详情

3、保存后再次格式化文档，观察HTML属性是否自动换行、CSS引号是否转为单引号等变化。

三、使用命令行批量格式化文件

当需要对整个项目的静态资源进行统一美化时，可通过CLI方式执行全局格式化操作。

1、确保已安装Node.js环境，并在终端运行 npm install -g prettier 全局安装Prettier。

2、进入项目目录，在终端执行以下命令扫描并格式化所有HTML与CSS文件：

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

3、等待命令执行完成，检查dist或src目录下的文件是否已完成结构美化。

四、结合HTML语言特性启用自动闭合标签优化

Prettier会根据HTML标准自动处理自闭合标签的书写方式，提升代码的专业度。

1、确认Prettier版本不低于2.0，以支持最新的HTML语法解析。

2、在含有img、input等元素的HTML文件中，原生未闭合的标签将被自动转换为XHTML风格：

<img src="logo.png" alt="site logo" />

3、此行为无需额外配置，只要文件类型识别正确，Prettier即会按规范插入斜杠。

五、定制CSS属性排序增强样式表可读性

虽然Prettier默认不排序CSS属性，但可通过插件扩展实现属性分组排列，进一步提升高级感。

1、安装附加插件 prettier-plugin-css-order：

npm install --save-dev prettier-plugin-css-order

2、在.prettierrc中添加插件引用：

"plugins": ["prettier-plugin-css-order"]

3、重启编辑器后，CSS中的布局属性（如display、position）将自动归类至顶部，便于阅读。

以上就是Prettier一键美颜，HTML+CSS代码秒变高级感！的详细内容，更多请关注php中文网其它相关文章！