VSCode中让前端写代码更顺手的插件推荐-VSCode-PHP中文网

前端在vscode里写代码是否顺手，取决于是否解决路径补全、标签同步、实时预览、错误即时反馈四大高频卡点；装插件不在多而在准，如path intellisense配jsconfig.json实现别名识别、auto rename tag扩展jsx/tsx/vue支持、live server设port为0避免冲突、eslint与prettier联动实现报错即修。

vscode中让前端写代码更顺手的插件推荐

直接说结论：前端在 VSCode 里写代码是否顺手，不取决于装了多少插件，而在于是否解决了 路径补全、标签同步、实时预览、错误即时反馈 这四类高频卡点。其他功能再炫，用不上就是干扰。

路径补全总出错？优先配好 `Path Intellisense` + `jsconfig.json`

常见错误现象：输入 import utils from './u' 后没提示，或提示了却跳转不到文件；alias 路径（如 @/components）完全不识别。

原因不是插件没装，而是它默认只认相对路径，不读项目配置。必须手动告诉它 alias 映射关系：

在项目根目录创建 jsconfig.json（TS 项目用 tsconfig.json），写入：

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

重启 VSCode 或重载窗口（Ctrl+Shift+P → Developer: Reload Window）
确认插件设置里 path-intellisense.mappings 没被手动覆盖——有自定义映射时才需要改这里，日常用 jsconfig.json 更可靠

改个 `div` 变成 `section`，闭合标签还卡在？开 `Auto Rename Tag`

这个插件对 JSX 和 Vue SFC 的模板部分生效，但默认只响应 HTML 标签。React 开发者常遇到的问题是：改了 <mycomponent></mycomponent>，闭合标签没动。

解决方法很简单：

PigX UI 前端开发

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

下载

打开设置（Ctrl+,），搜 auto rename tag
勾选 Auto Rename Tag: Enable Auto Rename Tag
关键一步：把 Auto Rename Tag: File Extensions 从默认的 ["html", "xml"] 改成 ["html", "xml", "jsx", "tsx", "vue"]
如果用的是 Pug/Svelte 等，对应加进去即可

保存就刷新浏览器？别硬扛 `Live Server` 的端口冲突

错误用法：装完就点 Go Live，结果报错 EADDRINUSE —— 5500 端口被本地 Node 服务占了。

正确姿势是提前设好端口策略：

进设置搜 live server settings，找到 liveServer.settings.port
填 0：每次启动随机空闲端口（推荐，适合多项目并行）
填具体数字（如 8080）：固定端口，但要确保该端口未被占用
额外提醒：Live Server 不代理 API 请求，纯静态页调试没问题；如果项目带后端接口，得换 Debugger for Chrome 配 webpack-dev-server

写了代码却不知道哪里错了？`ESLint` 和 `Prettier` 必须配对用

单独装 ESLint，只报错不修复；单独装 Prettier，格式统一但漏逻辑问题。两者冲突还会导致保存时反复“打架”。

最小可行配置组合：

装两个插件：ESLint（by Dirk Baeumer）、Prettier（by Esben Petersen）

项目根目录放 .eslintrc.js：

module.exports = {
  extends: ['eslint:recommended', 'prettier'],
  plugins: ['prettier'],
  rules: { 'prettier/prettier': 'error' }
};

VSCode 设置里打开 editor.formatOnSave，并设 editor.defaultFormatter 为 esbenp.prettier-vscode
重点：不要在 .prettierrc 里配 semi: true，同时又在 ESLint 里开 semi: ["error", "always"]——规则重复就容易保存时格式乱跳