prettier与eslint必须协同配置，因prettier负责代码格式统一（如缩进、引号），eslint负责逻辑错误与规范检查（如未定义变量、潜在bug），二者规则重叠易冲突；需安装eslint-config-prettier禁用eslint中格式类规则，并在settings.json中指定prettier为默认formatter且开启formatonsave，否则保存时会反复标红或格式混乱。
VSCode前端开发不用装一堆插件也能跑，但没配好这5类核心插件，日常写代码会反复卡在路径跳转、格式混乱、样式找不到、浏览器预览刷新、语法报错难定位这些地方。
为什么 Prettier + ESLint 必须一起开，且不能只靠默认配置
Prettier 负责把代码“排整齐”，ESLint 负责告诉你是“写错了”还是“写得不规范”。两者规则有重叠（比如分号、引号），不协调就会互相打架——保存时格式化完又被 ESLint 标红，或者 eslint --fix 把 Prettier 刚排好的换行又打乱。
- 必须安装
eslint-config-prettier并在.eslintrc.js的extends末尾加上它，关掉所有和格式相关的 ESLint 规则 -
settings.json中要明确指定默认 formatter 是esbenp.prettier-vscode，否则保存时可能调用错工具 - 别开
editor.formatOnSave却关eslint.enable：那样只好看不到错误，但改不了 - Vue/React 项目记得加对应插件扩展，比如
plugin:vue/vue3-recommended，否则v-model或useEffect可能被误报
Live Server 和 Open In Browser 的真实使用边界
Open In Browser 只是把当前 HTML 文件用文件协议（file://）打开，适合纯静态页；Live Server 启的是本地 HTTP 服务（http://127.0.0.1:5500），才能正确加载 fetch、import、相对路径资源等现代前端行为。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- Vue/React 项目别用 Live Server 直接开
index.html：构建产物要走 webpack/vite dev server，否则路由、模块解析全挂 - 修改端口不是必须点设置界面——直接右键状态栏的端口号，选 “Change Port” 更快
- 如果页面空白且控制台报
CORS或net::ERR_FILE_NOT_FOUND，八成是用了Open In Browser而不是Live Server
路径跳转失效？先查 @/ 别名是否被识别
按住 Ctrl（Windows/Linux）或 Cmd（macOS）点击 import { api } from '@/api/user' 跳不进去，不是插件没装，而是 VSCode 不知道 @ 指向哪。
- Vue 项目需确认
jsconfig.json或tsconfig.json里有"baseUrl": "src"和"paths": { "@/*": ["src/*"] } - 装了
Vue Alias Skip插件后，仍要重启 VSCode 才生效——它依赖 TypeScript 语言服务初始化完成 - Webpack 别名配置（
resolve.alias）对 VSCode 路径跳转无效，那是运行时的事，编辑器只认 tsconfig/jsconfig - 如果跳转进去了但显示 “No definition found”，检查文件是否被
exclude在 tsconfig 里，比如"node_modules/**"顺手把 src 下某些目录也 exclude 了
Auto Rename Tag 和 Bracket Pair Colorizer 解决的是不同层级的阅读负担
Auto Rename Tag 解决的是“改一个标签漏改另一个”的机械错误；Bracket Pair Colorizer（或新版 VSCode 内置的 editor.guides.bracketPairs）解决的是“这个 } 对应哪个 {” 的嵌套迷失问题。
-
Auto Rename Tag在 Vue/JSX 中默认支持，但对<template></template>这类具名插槽语法不生效——它只处理标准开始/结束标签对 - 括号着色插件在深度嵌套的
computed或setup()函数里最管用，但颜色太多反而干扰，建议只开两到三层配色，关掉更深层的 - VSCode 1.80+ 已内置括号高亮（
editor.guides.bracketPairs），不必额外装旧版插件，避免和 Prettier 格式化冲突
插件不是越多越好，而是每个都要清楚它在什么环节起效、失效时该查哪一层配置。很多“不起作用”的问题，其实卡在 tsconfig 路径、ESLint 规则链、或 VSCode 缓存没刷新——而不是插件本身坏了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
