vscode本身不运行html，仅是编辑器；必须通过live server等本地http服务（如http://127.0.0.1:5500）配合浏览器才能真正运行，否则file://协议下ajax、es模块导入等功能均会因跨域限制而失败。
VSCode 本身不运行 HTML，它只是编辑器；真正让 HTML“跑起来”的，是本地 HTTP 服务和浏览器配合。只要打开文件用 file:// 协议，很多基础效果能看，但跨域、AJAX、CSS 模块导入、现代 JS 特性等会直接失败——所以必须配一个本地服务器。
装完 VSCode 后第一件事：确认语言模式是 HTML
新建文件 → 保存为 index.html → 看右下角状态栏是否显示 HTML。如果不是，点一下那个文字，选 Configure File Association for '.html' → 选 HTML。这步漏掉，Emmet（比如输 ! 回车生成骨架）、标签闭合、属性提示全失效。
- 如果点开是
Plain Text或PHP，说明后缀没识别对，或文件没保存（未保存的临时文件不会触发语言检测） - 某些插件（如 Vue 相关）会劫持
.html关联，禁用它们再试 - 检查设置里有没有误删
"html.suggest.html5": true，这个控制 HTML5 标签补全开关
Live Server 是刚需，但默认不监听 CSS
Live Server 插件装上就能右键 → Open with Live Server，地址变成 http://127.0.0.1:5500/xxx.html。但它只监听 .html 和 .js 变更，改了 style.css 不刷新页面——这不是 bug，是设计如此。
- 临时办法：改完 CSS 后手动按
Ctrl+R刷新，或右下角点 Live Server 图标 →Disable再点一次Enable - 长期解决：在项目根目录建
.vscode/settings.json，加这行："liveServer.settings.fullReload": true（强制整页重载） - 更优替代：用
browser-sync（npm install -D browser-sync），它支持 CSS 注入，改样式不闪屏
Prettier 保存就报错？大概率没装本地版
VSCode 的 Prettier 插件默认不认全局 npm install -g prettier，而是找你项目里的 node_modules/prettier。没装、装错位置、版本太老（比如 v1.x），都会弹 Failed to load module 'prettier'。
- 进项目根目录执行：
npm install --save-dev prettier@latest（推荐 v3.x） - 确保有配置文件：
.prettierrc（哪怕空文件也行），不能有语法错误（比如 JSON 多逗号） - 在
settings.json里显式指定路径："prettier.prettierPath": "./node_modules/prettier" - 别依赖“格式化时自动安装”，它经常静默失败
class 名不提示？不是插件没装，是 CSS 没被索引
HTML CSS Support 和 IntelliSense for CSS 都要靠解析实际的 .css 文件内容来建索引，不是靠文件名猜。常见失效场景：
- CSS 文件后缀是
.scss或.less—— VSCode 默认不处理预处理器，得换插件或编译成 .css - HTML 文件没被识别为 HTML5（比如缺
），导致 <code>class属性不走 CSS 补全逻辑 - 项目没以文件夹形式打开（只打开了单个
.html文件），VSCode 找不到同级的.css文件 - 插件冲突：禁用
Auto Close Tag、Vue Peek这类老插件，它们常劫持 AST 解析
最易忽略的一点：所有路径相关的功能（图片标红、CSS 补全、相对引用跳转）都依赖“以文件夹形式打开项目”，而不是只打开单个 HTML 文件——这点几乎所有人初期都踩过坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
