提升开发体验的HTML代码质量与自动补全工具集成

风芳同学_8912

发布时间：2026-07-28 12:11:26

591人浏览过

来源于php中文网

原创

HTML补全与质量检查可共存，但需分别配置：html.suggest.html5和html.autoClosingTag必须启用，Emmet依赖triggerExpansionOnTab和Tab触发，Vue/Svelte中由Volar等插件接管，HTMLHint通过.htmlhintrc校验规则，customData支持自定义组件补全。

提升开发体验的html代码质量与自动补全工具集成

VS Code 里 HTML 补全和质量检查能一起用，但必须分开配、各自调，否则一个生效另一个就哑火。

html.suggest.html5 和 html.autoClosingTag 必须同时开

这两个设置不是可选的“增强项”，而是补全功能的硬性前提。关掉任意一个，header、nav这类语义标签就不会出现在提示列表里，输入 <di> 也不会弹出 <code><div> 建议。 <ul> <li> <code>html.suggest.html5 控制标签名和全局属性（如 onclick）的提示

html.autoClosingTag 控制输入 <div> 后自动补上 <code>

两者都依赖当前文件语言模式为 HTML —— 右下角状态栏显示不是 HTML？点它 → 选 Configure File Association for '.html' → 设为 HTML

别被 emeraldwalk.runonsave 这类插件干扰：它可能劫持 Tab 键，导致 Emmet 缩写（如 ul>li*3）无法展开

Emmet 是补全主力，但触发方式容易被忽略

VS Code 的 HTML 补全 80% 以上靠 Emmet 驱动，但它不响应 Enter 或空格，只认 Tab —— 而且前提是 emmet.triggerExpansionOnTab 为 true。

输入 main.container 后按 Tab，应生成 <main class="container"></main>
如果没反应，先按 Ctrl+Space（Windows/Linux）或 Cmd+Space（macOS）手动唤出补全菜单，再选 Emmet 项
在 .vue 或 .svelte 文件中写模板时，<template></template> 区域的补全由对应语言插件（如 Volar）提供，原生 HTML 插件不管用
自定义缩写要写进 emmet.variables 或 emmet.snippets，不是塞进 runonsave 配置里

HTMLHint 检查规则和补全互不干扰，但配置位置不同

HTMLHint 不参与补全，它只做静态分析；但它的规则（比如 tag-pair、attr-lowercase）会实时标红错误，和补全提示共存于编辑器同一界面。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

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

规则启用靠 .htmlhintrc 文件，不是 VS Code 设置项 —— 放项目根目录，内容示例：{"tag-pair": true, "attr-lowercase": true}
doctype-first 规则会报错：如果 <!DOCTYPE html> 不在第一行，哪怕只空一行也标红
alt-require 对 <img> 标签强制要求 alt 属性，但不会给你补全 alt="" —— 补全归 Emmet，检查归 HTMLHint
VS Code 扩展 “HTMLHint” 必须启用，且 html.validate.scripts 设为 true 才能校验内联脚本

自定义组件标签补全需要 html.customData

原生补全对 <my-button size="large"> 这种 Web Component 完全无感，必须手动注入描述 Schema。

新建 html-data.json，结构含 "tags" 和 "attributes" 字段，描述组件名、属性及可选值
在 settings.json 中加一行："html.customData": ["./html-data.json"]
路径必须是相对路径，且文件得是合法 JSON —— 少个逗号或引号不匹配，整个补全就失效
修改 html-data.json 后需重启 VS Code 或重新加载窗口（Ctrl+Shift+P → Developer: Reload Window）