VSCode本身不运行HTML，真正执行的是浏览器；必须用Live Server插件启动HTTP服务（如http://localhost:5500）替代file://协议，以支持fetch、ES模块等特性，并确保文件语言模式为HTML、路径相对正确。
VSCode 本身不运行 HTML，所有“运行失败”本质都是浏览器加载方式或编辑器配置出了问题——核心就两条：别用 file:// 协议跑多页项目，别让 VSCode 把 .html 当成纯文本。
点击链接跳转空白页，控制台报 net::ERR_FILE_PROTOCOL
这是最典型的症状，说明你正用双击或右键“在浏览器中打开”来预览 HTML。浏览器出于安全限制，file:// 协议下禁止跨文件跳转、fetch('./data.json')、import 模块等操作。
- 唯一可靠解法：装
Live Server插件（Ritwick Dey 原版），右键任意.html文件选Open with Live Server - 确保你通过
File → Open Folder打开了整个项目根目录，否则Live Server的根路径会错，相对链接仍可能失效 - 别手动拼
http://127.0.0.1:5500/about.html——链接必须写<a href="about.html">，由服务器自动解析
右键菜单没有 Open with Live Server
不是插件没装好，而是 VSCode 没识别出当前文件是 HTML。
- 检查右下角状态栏语言模式：如果不是
HTML，点击它 →Configure File Association for '.html'→ 选HTML - 新建文件后务必先保存为
index.html（带扩展名），否则默认是Plain Text，所有 HTML 相关功能全挂 - 如果已关联但无效，搜
settings.json，确认"files.associations"里写的是"*.html": "html"，不是"*.htm": "html"或漏了点
JS 模块导入失败，报 Failed to resolve module specifier
这个错误和上面一样，根源还是 file:// 协议。ES 模块（import）强制要求 HTTP(S) 上下文，file:// 下直接被浏览器拦截。
立即学习“前端免费学习笔记（深入）”；
- 只要用了
import，就必须走Live Server或其他本地 HTTP 服务（如python3 -m http.server） - 模块路径必须是相对路径，比如
import { foo } from './utils.js'；不能写./utils（缺后缀）或/utils.js（绝对路径，会从根目录找） - 如果模块里又
import了别的资源（如 JSON），也得确保那些文件能被 HTTP 服务正确返回（Content-Type 要对，.json文件默认 OK）
代码改了但刷新页面没变，或格式化后标签缩进错乱
前者大概率是浏览器缓存或 Live Server 没监听到改动；后者基本是语言模式或格式化工具冲突。
- 强制刷新试试：
Ctrl+F5（忽略缓存）；或检查Live Server状态栏是否显示 “Live Reload enabled” - 缩进错乱先看右下角是不是
HTML模式；再搜设置里的html.format.enable是否为true，editor.defaultFormatter是否设为vscode.html-language-features - 如果装了
Prettier，它可能抢了 HTML 格式化权——在设置里搜html.format.enable，关掉它，或明确指定"[html]": { "editor.defaultFormatter": "vscode.html-language-features" }
真正卡住人的地方往往不在代码本身，而在协议选择和编辑器状态——file:// 和 http:// 是两套世界，Plain Text 和 HTML 是两种解析逻辑，混用就会报错，而且错误信息还藏在不同位置（地址栏、控制台、状态栏、右下角）。盯住这几个点，比查语法错误快得多。
