vscode 本身不运行 html，所谓“报错”多为配置错误：code runner 默认不支持 html，需手动配置 executormap 或改用 live server；语言模式必须设为 html；live server 的路径根目录是工作区而非文件所在目录，且 file:// 协议下 import/fetch 会跨域失败。
VSCode 本身不运行 HTML，所谓“报错”基本是误操作或配置错位导致的假警报——先停手，别急着重装插件。
点“运行”按钮没反应或弹出 Code language not supported or defined
这是最常见误解：VSCode 没有内置 HTML 运行器，Code Runner 默认根本不支持 html 类型。你看到的报错不是语法错误，而是 code-runner.executorMap 缺少对应配置。
- 打开
settings.json，搜code-runner.executorMap，在对象里加这一行："html": "start \"\" http://127.0.0.1:5500/$(FileNameNoExtension).html"（前提是已装 Live Server） - 更稳妥的做法是直接弃用 Code Runner 跑 HTML——它本质是调用命令行启动浏览器，路径含空格、中文、特殊字符时极易崩，且无法处理
fetch或模块导入 - 右下角语言模式必须是
HTML，不是Plain Text或PHP；点状态栏切换，否则所有校验和格式化都失效
Live Server 启动后页面空白 / 图片 404 / fetch 报 CORS
Live Server 起的是 http://127.0.0.1:5500/，所有相对路径都以你当前打开的**文件夹为根目录**，不是 HTML 文件所在子目录。
-
<img src="logo.png">会去找项目根目录下的logo.png，不是同级目录；应写成<img src="./logo.png">或在加<base href="./"> - 跨域报错只发生在你用
fetch("/api/data.json")请求本地 JSON 文件时——Live Server 不代理后端，它只是静态服务；要么把data.json放进项目里直连，要么换用json-server等真后端 - 端口被占会导致 Live Server 静默换端口（比如从 5500 变成 5501），但右下角仍显示 “Go Live”，此时需手动访问
http://127.0.0.1:5501，或在settings.json固定端口："liveServer.settings.port": 5500
右键“在浏览器中打开”消失或打开后 JS 不执行
这个功能依赖系统默认浏览器关联，不是 VSCode 自己实现的。Windows 上 Edge 有时因安全策略禁用 file:// 协议下的 fetch 和模块加载，Chrome 更可靠。
- 不要双击 HTML 文件再拖进 VSCode 编辑——这会让系统把文件关联到记事本或 VSCode 自身，破坏浏览器注册表项
- 手动修复：右键任意 .html 文件 → “属性” → “打开方式” → “更改” → 选 Chrome/Edge → 勾选“始终使用此应用”
- 如果用了
import语法（如import { init } from "./main.js"），file://下必然报错，必须用 Live Server 启动 HTTP 服务
HTML 标签未闭合却不标红，或 Auto Close Tag 和 Prettier 冲突
VSCode 内置 HTML 校验默认关闭，不是插件问题；而 Auto Close Tag 和 Prettier 的实时补全与保存重写机制天然互斥。
- 启用校验只需三项设置全开：
html.validate.scripts、html.validate.styles、html.suggest.html5，且仅对语言模式为HTML的文件生效 -
Prettier的bracketSameLine和htmlWhitespaceSensitivity会覆盖编辑时的标签闭合逻辑；若坚持用Auto Close Tag，必须在settings.json中设"prettier.disableLanguages": ["html"] -
.vue文件里的<template></template>不受html.*配置影响，那是volar插件管的范围，别在 settings 里瞎调 html 相关项
真正卡住人的从来不是某一行报错，而是多个配置层叠作用后产生的“看起来正常却死活不工作”的状态——检查语言模式、确认服务协议（file:// vs http://）、盯住右下角端口号和状态栏提示，比重装插件快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
