VSCode前端开发神器：HTML/CSS/JS实时预览插件推荐-VSCode-PHP中文网

Live Server是VS Code中实现HTML/CSS/JS实时预览的首选扩展，因其提供本地HTTP服务、自动刷新、开箱即用等特性，而VS Code内置功能仅支持一次性打开且不监听文件变化。

vscode前端开发神器：html/css/js实时预览插件推荐

Live Server 是唯一值得装的 HTML/CSS/JS 实时预览插件，其他“一键打开浏览器”类插件（如 Open in Browser）不监听文件变化，改完必须手动刷新。

为什么必须用 Live Server 而不是右键“在浏览器中打开”

VS Code 自带的 Open in Default Browser 或插件 Open in Browser 本质只是执行 start file://... 协议——它只做一次跳转，后续保存 HTML/CSS/JS 文件完全无响应。而前端开发需要的是：保存即刷新。Live Server 启动的是一个真实本地 HTTP 服务（默认地址 http://127.0.0.1:5500），并在页面注入 WebSocket 监听器，所有改动触发秒级整页刷新。

常见错误现象：

改了 style.css 但浏览器没变 → 没启用 Live Server，还在用静态文件协议
刷新后看到旧样式 → 浏览器缓存了 CSS，Live Server 的 HTTP 服务会自动加时间戳绕过缓存，而 file:// 不会
JS 报错 Cross origin request blocked → 直接双击 HTML 打开是 file:// 协议，AJAX/fetch 被浏览器拦截；Live Server 是 http://，无跨域限制

Live Server 安装与启动的三个可靠路径

别依赖右键菜单——它有时不显示，尤其在未聚焦 HTML 文件时。优先用以下三种方式之一：

快捷键：Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（macOS），输入 Live Server: Start 回车
状态栏点击：安装后，VS Code 底部状态栏会出现 Go Live 按钮，点它即可（需当前已打开一个 HTML 文件）
资源管理器右键：确保鼠标焦点落在某个 .html 文件上，再右键选 Open with Live Server

注意：如果点 Go Live 没反应，先检查是否打开了 HTML 文件；若仍无效，重启 VS Code 并确认插件已启用（设置里搜 liveServer 看开关是否为 on）。

HISUI 前端框架开发指南（IRIS版）

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。

下载

端口冲突、根目录错位、不想自动弹浏览器？改 settings.json

Live Server 默认端口 5500 经常被占用，或你希望服务以 ./src 为根路径（比如 Vue 项目结构），就得手动配置。不要在 GUI 设置里点点点，直接编辑 settings.json：

{
  "liveServer.settings.port": 3000,
  "liveServer.settings.root": "./src",
  "liveServer.settings.NoBrowser": true
}

说明：

"liveServer.settings.port"：改端口，避免和本地其他服务（如 npm run serve）撞车
"liveServer.settings.root"：指定服务根目录，否则它会把整个工作区当根，./src/index.html 里的 ./css/main.css 就会 404
"liveServer.settings.NoBrowser"：设为 true 后不再自动打开新标签页，适合你已开着 DevTools 或用其它方式调试

什么时候不该用 Live Server

它只适合纯静态 HTML/CSS/JS 原生开发或快速原型。一旦项目用了框架脚手架，立刻停用：

Vue 项目：运行 npm run serve（Vite 或 Vue CLI 提供的 dev server），它自带 HMR（热更新）、source map、ESM 支持，Live Server 无法加载 .vue 或处理 import 语法
React 项目：同理，用 npx create-react-app 后的 npm start，它跑在 http://localhost:3000，有完整的模块解析和错误 overlay
含 API 请求的页面：Live Server 是静态服务器，不代理后端请求；真要联调，得配 proxy 或换用 json-server + 自定义脚本