Prettier如何一键格式化HTML代码_Prettier一键格式化HTML代码教程

使用 Prettier 一键格式化 HTML 代码的完整教程如下：

• 操作步骤：

  打开 VS Code 的扩展商店（快捷键 Ctrl+Shift+X 或 Cmd+Shift+X）。

  搜索 Prettier - Code formatter，选择由 esbenp.prettier-vscode 维护的官方插件并安装。

• 关键点：

  确保安装的是官方插件，避免使用第三方替代品。

  安装后需重启 VS Code 以确保插件生效。

• 方法一：通过文件右键菜单：

  右键点击任意 HTML 文件，选择 Format Document With... → Configure Default Formatter... → 选择 Prettier - Code formatter。

  勾选 Format On Save（可选）以实现保存时自动格式化。

• 方法二：通过 settings.json 配置：

  打开 VS Code 设置（快捷键 Ctrl+, 或 Cmd+,），搜索 editor.defaultFormatter。

  添加以下配置：{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true}

  或直接编辑项目根目录下的 .vscode/settings.json 文件。

• 快捷键操作：

  Windows/Linux：按 Shift + Alt + F。

  macOS：按 Shift + Option + F。

• 手动触发：

  若快捷键未生效，按 Ctrl/Cmd + Shift + P 打开命令面板，输入 Format Document With...，选择 Prettier。

• 效果：

  执行后，HTML 代码的缩进、换行、标签对齐等将自动符合 Prettier 默认规则。

• 步骤：

  在项目根目录创建 .prettierrc 文件（无后缀名），或使用 .prettierrc.json、.prettierrc.js 等格式。

  写入自定义规则，例如：{ "printWidth": 80, // 每行最大字符数 "tabWidth": 2, // 缩进空格数 "useTabs": false, // 使用空格而非 Tab "semi": true, // 语句末尾添加分号 "singleQuote": true, // 使用单引号而非双引号 "htmlWhitespaceSensitivity": "ignore" // 忽略 HTML 中的空白符敏感问题}

• 优先级：

  项目根目录的 .prettierrc 会覆盖插件默认规则。

  支持全局配置（如用户目录下的 .prettierrc），但建议项目级配置以保持一致性。

• 快捷键无效：

  检查是否与其他插件冲突（如 ESLint），可在 settings.json 中添加 "prettier.disableLanguages": [] 禁用特定语言冲突。

  确保文件类型为 HTML（右下角状态栏可查看）。

• 格式化结果不符合预期：

  检查 .prettierrc 规则是否冲突。

  运行 npx prettier --check . 检查项目文件是否符合规则。

• 保存时未自动格式化：

  确认 editor.formatOnSave 已启用。

  检查文件是否被 .prettierignore 排除。

• 核心流程：安装插件 → 配置默认格式化工具 → 执行快捷键 →（可选）自定义规则。
• 优势：Prettier 可统一团队代码风格，减少手动调整时间，尤其适合大型项目。
• 扩展建议：结合 ESLint 使用时，可通过 eslint-config-prettier 关闭 ESLint 的格式化规则，避免冲突。

通过以上步骤，即可高效实现 HTML 代码的一键格式化，提升开发效率与代码可读性。