VSCode 有哪些提升 HTML 开发效率的插件推荐？

a'ゞ庆庆提问于 2026-03-29 14:50:14 阅读 3

工具

最近在写静态页面，发现手写 HTML 太慢了，标签补全和格式化老是出问题。有没有好用的 VSCode 插件能智能提示、自动闭合标签，还能格式化得干净一点？

比如我写下面这种结构，经常忘记闭合 div，或者缩进乱七八糟：

<div class="container">
  <header>
    <h1>欢迎来到我的网站</h1>
    <nav>
      <ul>
        <li><a href="#" rel="external nofollow"  rel="external nofollow" >首页</a></li>
        <li><a href="#" rel="external nofollow"  rel="external nofollow" >关于</a></li>
      </ul>
    </nav>
  </header>
</div>

我来解答赞 4 收藏

反馈

2 条解答

Zz丽红 Lv1

给你推荐几个我用过觉得不错的 VSCode 插件，这些都能大幅提升 HTML 开发效率。

首先是 Auto Close Tag 和 Auto Rename Tag 这两个插件。前者可以自动帮你闭合标签，后者能在你修改起始标签时同步修改结束标签。原理是通过监听你的输入事件，在检测到特定符号时自动插入对应的标签内容。



// Auto Close Tag 示例

// 输入 <div> 后会自动添加 </div>

// 你不需要手动去补全结束标签

然后是 Prettier - Code formatter，这货简直就是格式化的神器。它能根据预设的规则自动调整代码缩进和格式。默认配置就很不错，如果你想自定义缩进风格，可以在项目的 .prettierrc 文件里设置参数。



{

  // 设置缩进为 2 个空格

  "tabWidth": 2,

  "useTabs": false

}

还有个叫 HTMLHint 的插件，它可以实时检查你的 HTML 语法错误。当你忘记闭合标签或者属性写错的时候，编辑器会直接提示错误位置，原理就是后台运行一个持续的代码分析器。

最后说下我个人的习惯：我会把这几个插件都装上，但有时候 Prettier 格式化得太过了可能会破坏一些特殊排版需求。这时候我就临时禁用一下格式化功能，按需使用。

记得安装完插件后重启 VSCode，让它们生效。要是遇到问题，先看看插件的设置项，很多时候调调参数就能解决。调试插件确实挺烦人的，不过为了更好的开发体验，花这点时间还是值得的。

2026-03-29 18:03

萌新.瑞腾 Lv1

装个 Auto Close Tag 自动闭合标签，再用 Prettier 来格式化代码，设置一下格式化规则就差不多了。记得在设置里把格式化选项调好，不然缩进容易乱。这两插件够你应付大部分情况了，我天天写页面都是靠它们。

2026-03-29 15:01