前端开发常用VSCode插件功能详解与对比-VSCode-PHP中文网

必须用live server而非open in browser，因其通过本地http服务（如http://localhost:5500）支持热重载、解决file://协议下fetch/es模块/cors等限制，而后者仅打开静态file://页面，无法满足现代前端开发刚需。

前端开发常用vscode插件功能详解与对比

Live Server vs Open in Browser：热重载到底要不要？

热重载不是“锦上添花”，而是现代前端开发的刚需。Open in Browser 只是打开一个 file:// 协议的静态页面，改完 HTML/CSS/JS 后必须手动刷新；Live Server 启动的是本地 HTTP 服务（如 http://localhost:5500），支持保存即刷新、跨设备访问、自定义端口和 HTTPS 模拟。

常见错误现象：net::ERR_FILE_NOT_FOUND 或资源加载失败——这是用了 Open in Browser 打开含相对路径的 import 或 fetch 请求时的典型报错，因为浏览器禁止 file:// 协议发起跨域或模块请求。

Live Server 默认端口为 5500，可在 settings.json 中配置："liveServer.settings.port": 3000
若需局域网访问（比如手机调试），启用："liveServer.settings.host": "0.0.0.0"
禁用自动打开浏览器（避免干扰）："liveServer.settings.donotShowInfoMsg": true

Prettier 与 ESLint 冲突怎么解？

两者职责不同：ESLint 检查逻辑错误和编码规范（比如未使用的变量、no-console），Prettier 只管格式（空格、换行、引号）。直接同时启用会打架——例如 ESLint 要求双引号，Prettier 配了单引号，保存时反复来回改。

关键做法是让 ESLint “让位”给 Prettier 的格式规则，而不是反过来。官方推荐组合是：eslint-config-prettier 关闭所有 ESLint 的格式类规则，再用 eslint-plugin-prettier 把 Prettier 当作 ESLint 的一个规则来运行。

安装依赖：npm install --save-dev eslint-config-prettier eslint-plugin-prettier
.eslintrc.js 中 extends 顺序很重要：Prettier config 必须放在最后，否则会被覆盖
VSCode 设置里关掉 editor.formatOnSave 对 JS/TS 文件的默认触发，改由 ESLint 插件接管格式化（需启用 eslint.codeActionsOnSave.fixAll）

路径跳转失效？别怪 VSCode，先看 jsconfig.json

按住 Ctrl 点击 @/utils/request 却跳不到文件，不是插件没装，而是 VSCode 根本不知道 @ 指向哪里。Path Intellisense 和别名跳转插件都依赖项目级路径映射配置，而非插件自身硬编码。

PigX UI 前端开发

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

下载

必须在项目根目录下存在 jsconfig.json（TS 项目用 tsconfig.json），且包含合法的 baseUrl 和 paths：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@api/*": ["src/api/*"]
    }
  },
  "include": ["src/**/*"]
}

注意：baseUrl 是相对于 jsconfig.json 的路径，不是相对于工作区根目录；如果项目用了 Vite 或 Webpack 别名但没配 jsconfig.json，VSCode 就无法解析，此时装再多跳转插件也没用。

Vue / React 开发中，哪些插件真能省三秒以上？

不是所有“高亮”“补全”插件都值得开销。真正高频省时的只有三类：

Vue Language Features (Volar)（Vue 3）或 Vetur（Vue 2）：提供 <template></template> 内表达式类型提示、v-model 参数推导、defineProps 自动补全——没它，写个 props 都要翻文档
Auto Rename Tag：改 <div class="xxx"> 时自动同步闭合标签，对 JSX/Vue 模板有效，但对原生 HTML 文件默认不启用（需在设置里加 <code>"auto-rename-tag.activationOnLanguage": ["html", "vue", "javascriptreact"]）
ES7+ React/Redux/React-Native snippets：输入 rfc 直接生成函数组件骨架，imrc 生成带 import React from 'react' 的模板——比手敲快 5 秒，每天积少成多

别盲目装“Vue Helper”之类功能堆砌型插件：快捷键冲突、CPU 占用高、更新频繁导致行为突变，反而拖慢编辑器响应。稳定压倒炫技。