VSCode运行代码html需要装什么插件？常用插件安装推荐
live server是html运行环境核心，必须安装以避免file://协议导致的跨域错误；auto rename tag与auto close tag需成对启用并正确配置语言模式。
Live Server 是 HTML 运行环境的核心，不是可选项
不装 Live Server，就只能用 file:// 协议直接双击打开 HTML 文件——这时候浏览器会报 Cross-Origin Request Blocked，所有 fetch、AJAX、本地 JSON 加载、甚至部分 CSS @import 都会失败。这不是你代码写错了，是浏览器安全策略卡死的。
装完 Live Server 后，右键 HTML 文件 → Open with Live Server，它会在 http://127.0.0.1:5500/xxx.html 这类地址下启动一个轻量 HTTP 服务，所有前端能力才真正可用。
Auto Rename Tag 和 Auto Close Tag 必须成对启用
单独装 Auto Rename Tag，改了 <div> 不一定同步更新 <code>
；单独装
Auto Close Tag，敲
<div> 回车可能没反应——这两个插件底层依赖相同语法解析器，且需在设置里显式开启：
<ul>
<li>
<code>Auto Rename Tag：默认开启，但仅对已识别为 HTML 模式的文件生效（注意右下角状态栏是否显示
HTML）
Auto Close Tag：安装后需手动打开设置，搜 autoCloseTag，确保 Enable Auto Close Tag 打钩
如果用了 Vue 或 JSX 文件，它们默认不是 HTML 模式，得额外配置 "files.associations" 把 *.vue 映射到 html
HTML Snippets 和 Emmet 是写结构的加速器，但别指望它猜你意图
输入 html:5 + Tab 生成基础模板、ul>li*3 + Tab 展开列表，这些是 Emmet 内置能力，VS Code 默认自带，不需要额外插件。但真实开发中容易卡住的点是：
Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
- Emmet 缩写只在
HTML 或 JavaScript React 等特定语言模式下触发，写 .js 文件里敲 div + Tab 是没反应的
-
HTML Snippets 插件补的是语义化标签（比如输入 main 提示 <main></main>），但它不会覆盖 Emmet，两者共存无冲突
- 如果缩写不生效，先按
Ctrl+Shift+P 输入 Change Language Mode，确认当前文件语言是 HTML
Prettier 和 HTML CSS Support 是“省心”型插件，但有隐藏依赖
Prettier 格式化 HTML 时，默认会把属性换行、引号转双引号、强制闭合自闭合标签（如把 <img> 改成 <img>）。这些行为在纯静态页里没问题，但在 Vue 或某些 CMS 模板里可能报错。
HTML CSS Support 能在 class="" 里提示你已定义的 CSS 类名，但它只读取项目内 .css 或 .scss 文件，不会扫描 node_modules 或 CDN 引入的样式库。
很多新手以为装完插件就万事大吉，其实关键在语言模式识别、文件关联、以及 HTTP 服务与 file 协议的根本区别——这些细节不调对，插件再全也白搭。
