前端开发者必备的VSCode插件功能介绍-VSCode-PHP中文网

live server启动后页面不自动刷新，根本原因是其默认仅监听html、css、js文件变更并整页重载，不支持hmr，也不监听dist/、.vue、.ts等非静态资源；需确保在项目根目录工作区中操作，且修改的是被监听的文件类型。

前端开发者必备的vscode插件功能介绍

Live Server 启动后页面不自动刷新？

默认情况下，Live Server 只监听 HTML、CSS、JS 文件变更并触发浏览器重载，但不会监听构建产物（如 dist/ 下的文件）或非静态资源（如 JSON mock 数据）。如果你改了 src/ 下的 Vue/React 源码却没反应，说明你没配构建工具联动——它不是热模块替换（HMR）方案，只是个静态服务器。

常见解决路径：

确认你打开的是项目根目录（不是单个 HTML 文件），否则 Live Server 无法正确识别工作区上下文
修改后保存文件时，检查右下角状态栏是否显示 “Reloading…” —— 若无提示，可能是文件未被监听（比如保存时用了 Ctrl+S 但编辑器未真正写入磁盘）
若用 Vite 或 Webpack，直接关掉 Live Server，改用 vite preview 或 webpack serve，它们自带 HMR 和依赖追踪

ESLint + Prettier 冲突导致格式化失效？

两者规则打架是高频问题：比如 ESLint 要求分号，Prettier 默认不加；ESLint 认为双引号合法，Prettier 强制单引号。结果就是保存时反复格式化又报错，editor.formatOnSave 形同虚设。

必须做三件事：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

装 eslint-config-prettier 并在 .eslintrc.js 的 extends 末尾加上它，关闭所有与格式相关的 ESLint 规则
在 VSCode 设置里把 editor.defaultFormatter 设为 esbenp.prettier-vscode，而非 ESLint 插件
禁用 ESLint 的自动修复（eslint.enable 保持 true，但关掉 eslint.codeAction.onSave.fixAll），让 Prettier 全权负责格式，ESLint 只管逻辑错误

@/ 开头的路径无法 Ctrl+点击跳转？

Vue/React 项目常用别名（如 @/components/Button.vue）在 VSCode 默认不识别，Ctrl+点击会提示 “No definition found”。这不是插件故障，而是缺少路径映射配置。

两种可靠解法：

用官方推荐的 path-alias 插件（注意不是已停更的旧版），安装后在 settings.json 中补全 "path-alias.alias": { "@": "./src" }
更彻底的方式：在项目根目录加 jsconfig.json（JS）或 tsconfig.json（TS），写入 "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } }，VSCode 原生支持该配置，无需额外插件

Vue 文件里 template 中变量无法跳转到 data 定义？

这是 Vue 语言服务未激活或版本不匹配的典型表现。Vue 2 和 Vue 3 的 SFC 解析逻辑不同，插件若没对齐项目版本，就会丢失响应式数据的类型推导和跳转能力。

关键动作：

卸载所有非官方 Vue 插件（如过时的 Vetur），只保留 Vue Language Features (Volar)（Vue 3 推荐）或 Vetur（仅 Vue 2 项目）
确认 VSCode 已启用 “Take over mode”：打开一个 .vue 文件，右下角语言模式显示 “Vue (Volar)” 而非 “Vue”，否则跳转功能被禁用
如果用了 defineProps/defineEmits 的组合式 API，确保 compilerOptions.isCustomElement 或 globalProperties 等配置没干扰类型推导

真实项目里，插件不是装得越多越好，而是每个都要能被验证“此刻是否真在起作用”。比如 Auto Rename Tag 按下回车没反应，大概率是当前文件类型没被插件支持（如 JSX 中失效）；ESLint 报错但不标红线，说明 ESLint 进程根本没起来——先看输出面板里的 ESLint 日志，再查 node_modules 是否缺失依赖。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！