vs code前端插件安装无需命令行，直接按ctrl+shift+x（win/linux）或cmd+shift+x（macos）打开扩展面板搜索英文名（如prettier、chinese、live server），认准官方作者安装后重启生效；新手必装live server、auto rename tag、prettier、eslint四款，注意项目上下文与配置文件依赖。

VS Code 安装前端常用插件不需要额外工具或命令行，直接在编辑器内操作就能完成，关键在于选对插件、装对顺序、避开配置冲突。

怎么打开扩展面板并搜索插件

按 Ctrl+Shift+X（Windows/Linux）或 Cmd+Shift+X（macOS）直接呼出扩展面板。别用菜单栏「扩展」按钮——它偶尔会卡住或加载不全。搜索时建议输入英文名（比如搜 prettier 而不是“格式化”），中文插件名可能匹配不准。

• 输入 Chinese 找到官方发布的 Chinese (Simplified) Language Pack for Visual Studio Code，安装后点右下角「是」再重启，界面才真正变中文
• 搜 live server 时注意作者是 Ritwick Dey，别装错成同名但无人维护的旧版本
• 搜 eslint 要认准 ESLint（作者：Microsoft），不是 eslint-plugin 或其他衍生包

哪些插件必须装，哪些可以暂缓

新手起步阶段，只装这 4 个就够用且无冲突：Live Server、Auto Rename Tag、Prettier - Code formatter、ESLint。其它如 Vue Helper 或 React Refactor 属于框架专用，没用对应技术栈前装了也激活不了。

PigX UI 前端开发

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

下载

• Live Server 必须在「文件夹级别」打开项目才能启用——单独打开一个 index.html 文件，右键「Open with Live Server」会灰掉
• Prettier 和 ESLint 同时装时，要手动设置默认格式化工具为 esbenp.prettier-vscode，否则保存时可能互相覆盖
• Auto Rename Tag 对 JSX 支持有限，React 里改 <div> 为 <code><section></section> 有时不生效，这是已知行为，不是你装错了

  装完插件后要不要重启 VS Code

  多数插件装完自动启用，但语言包和部分深度集成插件（如 ESLint）必须重启，否则功能不生效。重启前留意右下角是否有「Reload Required」提示——有就点它，比全关重开更快。

  • 如果装完 Chinese 插件后仍是英文界面，大概率是没点「是」或没重启，不是下载失败
  • 装 ESLint 后没看到波浪线报错？检查是否打开了项目根目录（含 package.json 或 .eslintrc.js），单文件模式下它压根不工作
  • 某些插件（如 Path Intellisense）需要项目里有 jsconfig.json 或 tsconfig.json 才能补全路径，空项目里装了也看不到效果

  插件本身不难装，真正卡住人的往往是「项目上下文缺失」——比如没开文件夹、没配配置文件、没装对应依赖。盯着报错信息里的路径和文件名，比反复重装插件更有效。