live server比open in browser更值得默认启用，因其支持保存即刷新、自动注入livereload脚本，而后者仅一次性打开页面且不监听文件变化。
Live Server 为什么比 Open in Browser 更值得默认启用
因为热重载是现代前端开发的刚需，而 Open in Browser 只能做一次性的页面打开。它不监听文件变化，改完 HTML/CSS/JS 后必须手动刷新浏览器——这在调试样式或交互逻辑时极其低效。
相比之下，Live Server 启动的是一个本地 HTTP 服务（默认 http://127.0.0.1:5500），支持：
- 保存即刷新，无需任何操作
- 自动注入 LiveReload 脚本，连 iframe、AJAX 请求也能触发更新
- 通过配置
"liveServer.settings.port"指定端口，避免端口冲突 - 开启
"liveServer.settings.root"可指定项目根目录，适合多入口或子目录结构
常见坑：如果项目用了 index.html 以外的入口文件（比如 app.html），Live Server 默认不会识别，需右键该文件 → “Open with Live Server” 手动触发，或在设置中配置 "liveServer.settings.CustomBrowserUrl"。
ESLint + Prettier 组合配置最容易出错的三个地方
两者不是简单安装就能共存的。ESLint 负责语义检查（比如变量未定义、箭头函数返回值缺失括号），Prettier 负责纯格式（缩进、引号、换行）。若不协调，保存时会互相覆盖、报错甚至卡死。
关键处理点：
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
eslint-config-prettier必须装，并在.eslintrc.js的extends数组末尾加入'prettier'，否则 ESLint 会和 Prettier 对同一规则（如semi）重复校验 - VSCode 设置里关掉
"editor.formatOnSave"对 JS/TS 文件的全局生效，改用"editor.formatOnSave": true配合"[javascript]": {"formatOnSave": false}，把格式化控制权交给 ESLint 的--fix -
Prettier插件的默认解析器对 Vue 单文件组件支持弱，需在.prettierrc中显式加"parser": "vue"，否则<template></template>块内缩进会错乱
Auto Rename Tag 在 JSX/Vue 中失效？检查这几点
这个插件默认只激活 html 语言模式，React 和 Vue 项目里常被忽略配置，导致改 <mycomponent></mycomponent> 时， 不同步。
实操建议：
- 确认已启用插件的多语言支持：在
settings.json中添加"auto-rename-tag.activationOnLanguage": ["html", "javascriptreact", "typescriptreact", "vue"] - Vue 项目注意区分
vue和vue-html语言模式——插件只响应vue模式下的模板块；若你在<template></template>里看到语法高亮异常，可能是 VSCode 错判了语言模式，按Ctrl+Shift+P→ “Change Language Mode” → 选Vue - React 中若使用自定义 Hook 返回 JSX 片段（如
useModal()），插件无法识别其返回结构，此时改标签仍需手动同步
Volar 替代 Vetur 后，为什么 <script setup></script> 提示还是不准
Volar 是 Vue 3 官方推荐的语言服务器，但它的类型推导强依赖 jsconfig.json 或 tsconfig.json 的正确配置。很多新手复制了 Volar 插件却没配好 tsconfig，结果 defineProps 解析失败、ref 类型丢失。
最小必要配置项：
- 确保
tsconfig.json中有"compilerOptions": { "types": ["volar"] }（Volar 1.10+ 已内置，但老项目易遗漏） - 若用
defineProps()形式，必须开启"compilerOptions.experimentalDecorators": true（即使不用装饰器） - 禁用旧版
Vetur插件——两者会冲突，Volar 的提示会被 Vetur 覆盖，且 VSCode 右下角状态栏会出现“Vue language features disabled”警告
复杂点在于：Volar 的模板类型检查是独立于 TS 服务的，所以 ref 的类型需要在 <script setup></script> 中显式标注（如 const count = ref<number>(0)</number>），否则模板中 {{ count.toFixed }} 会报错，这不是插件问题，而是 Vue 编译器的限制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
