现代前端开发如何配置HTML格式化？Prettier使用指南-html教程-PHP中文网

必须手动指定prettier为html默认格式化器，禁用内置html.format.enable，设printwidth:100和htmlwhitespacesensitivity:"css"，命令行格式化需显式加--parser html，eslint共存时须同时配置eslint-plugin-prettier与eslint-config-prettier。

现代前端开发如何配置html格式化？prettier使用指南

VS Code 默认不接管 HTML 文件的格式化，不是插件没装、配置没写，而是根本没被授权——必须手动指定 Prettier 为 html 类型的默认格式化器，否则所有配置都白搭。

怎么让 Prettier 真正接管 .html 文件

这是最常卡住的第一步。即使 .prettierrc 存在、插件已安装，VS Code 仍会优先用内置格式器（由 html.format.enable 控制），Prettier 被静默跳过。

打开任意 .html 文件，右键 → Format Document With… → Configure Default Formatter…，选中 Prettier - Code formatter（注意名字要完全匹配）
检查项目根目录的 .vscode/settings.json 或用户设置，删掉或注释掉 "html.format.enable": true —— 这行和 Prettier 冲突
确保 VS Code 右下角语言模式是 HTML（不是 Plain Text、PHP 或其他），点一下可切换
顺手开启 editor.formatOnSave，避免每次手动触发

为什么 `<div class="a b" data-id="123"> 被拆成三行<p>这不是 bug，是 <code>printWidth` 在严格执行。HTML 属性名长、值多（比如 `data-test-id`、`aria-label`），默认 80 极易触发换行，反而降低可读性。

`printWidth: 100` 是更务实的选择：够宽，能保住多数单行属性；又不至于宽到让超长标签挤成一行难以维护

`htmlWhitespaceSensitivity: "css"` 必须设：否则 <p><img>text</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html"><img src="https://img.php.cn/upload/skill/000/000/081/178995432594388.jpg" alt="Pptx To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="overflowclass">Pptx To Html</a> <p class="overflowclass">使用 MinerU 将 PowerPoint (.pptx) 演示文稿转换为 HTML，保留幻灯片内容与结构，生成可直接在网页使用的 HTML格式。</p> </div> <a rel="nofollow" href="/xiazai/skill4156" title="Pptx To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 可能被折成多行，破坏行内元素渲染逻辑

别碰 `bracketSameLine: true`：HTML 多属性时，`>` 跑到最后一行末尾，找结束标签像寻宝

命令行格式化 HTML 必须加 `--parser html`

漏掉这个参数，Prettier 可能误判为 JSX 或 Markdown，导致缩进错乱、自闭标签被改写（比如 <img> 变成 <img>）。

本地运行：npx prettier --write --parser html src/index.html
加到 package.json script 中："format:html": "prettier --write \"src/**/*.html\" --parser html"（注意 glob 模式用引号包裹，防 shell 展开失败）
验证是否支持 HTML：npx prettier --parser html --write test.html，成功即表示解析器就绪

和 ESLint 共存时，`eslint-plugin-prettier` 和 `eslint-config-prettier` 必须成对使用

只装 eslint-plugin-prettier，ESLint 会报一堆重复警告（如 quotes、semi、indent），因为它只是把 Prettier 规则“翻译”成 ESLint 规则，但不关掉 ESLint 原有格式类规则。

安装两者：npm install --save-dev eslint-plugin-prettier eslint-config-prettier
在 .eslintrc.cjs 的 extends 数组里，把 "plugin:prettier/recommended" 放在最后
HTML 内联脚本要被 ESLint 扫描到，还得加 eslint-plugin-html，否则 <script></script> 里的 JS 不会被 no-console 或 no-unused-vars 检查