VS Code前端开发需精选关键插件：先装Microsoft官方中文语言包并执行Configure Display Language选zh-cn后重启生效；再装Live Server实现热重载；配Prettier与ESLint时须安装eslint-config-prettier避免规则冲突。
VS Code 前端开发不是装得越多越好，而是选对几个关键插件，就能覆盖 90% 的日常操作。装错或配置不当反而会拖慢编辑器、干扰语法高亮、甚至和 Vue/React 项目产生冲突。
中文界面怎么快速启用（Chinese (Simplified)）
刚装完 VS Code 默认是英文，不看懂菜单就容易点错设置。装 Chinese (Simplified) 是第一步，但注意：装完必须重启，且右下角弹出「重新加载并切换语言」时要点「是」，否则只是安装了没生效。
- Ctrl + Shift + X 打开扩展面板，搜
Chinese (Simplified)，点「Install」 - 安装后右下角提示出现，**必须点「Restart」**，不能只关窗口再打开
- 重启后如果还是英文，检查是否被其他语言插件覆盖（比如装了多个汉化包）
HTML/CSS/JS 基础写法支持靠什么（HTML CSS Class Completion 和 Auto Rename Tag）
这两个插件解决的是最原始的效率痛点：写 HTML 标签要手动配对、写 class 名要翻 CSS 文件找定义。它们不依赖项目配置，开箱即用，但容易被忽略兼容性细节。
-
Auto Rename Tag在 Vue 或 JSX 中默认不工作，需在设置里加一句："auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"] -
HTML CSS Class Completion要求 CSS 文件名是.css或.scss，如果是.module.css或index.module.scss就不识别类名 - 两者都建议关闭「自动启用」以外的高级功能（如自动插入闭合标签），避免在模板字符串里误触发
实时预览为什么 Live Server 比 Open in Browser 更实用
Open in Browser 只是把文件路径丢给浏览器，改完代码必须手动刷新；而 Live Server 启动的是本地 HTTP 服务，支持热更新、跨域请求模拟、以及真实路径解析（比如 ./assets/logo.png 能正确加载）。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- 右键 HTML 文件选「Open with Live Server」，地址通常是
http://127.0.0.1:5500/xxx.html - 如果页面空白或报 404，检查是否打开了「包含该文件的文件夹」，而不是只打开单个 HTML 文件（VS Code 需要工作区上下文才能解析相对路径）
- Vue/React 项目别用它跑打包后的
dist目录——它不处理路由 history 模式，会 404；这种场景该用serve或框架自带 dev server
Prettier 和 ESLint 插件怎么共存不打架
两者定位不同：Prettier 管格式（缩进、分号、引号），ESLint 管逻辑（未使用变量、潜在 bug）。但默认配置下它们会互相覆盖规则，导致保存时反复修改同一行。
- 必须安装
esbenp.prettier-vscode和dbaeumer.vscode-eslint两个插件 - 在
settings.json中明确指定优先级："editor.defaultFormatter": "esbenp.prettier-vscode"，并开启"editor.formatOnSave": true - 关键一步：安装
eslint-config-prettier并在项目根目录的.eslintrc.js里 extends 它，否则no-unused-vars这类规则会被 Prettier 误判为格式问题
插件不是越多越强，真正卡住开发节奏的，往往是那个没配对的括号、找不到的 class 名、或者保存后样式突然错位——这些细节才是前端日常里最消耗注意力的地方。
