VSCode插件能直接解决路径拼错、CSS类名难定位、页面刷新遗漏、格式不统一被PR拒、TODO散乱、TS类型提示缺失等卡点；例如Path Intellisense自动补全@/路径，Live Server保存即重载，CSS Peek实现类名F12跳转，ESLint+Prettier协同保障代码规范与格式统一。
插件能直接解决哪些前端开发中的具体卡点
VSCode 插件不是锦上添花，而是把「重复劳动」和「人为疏漏」从流程里切掉。比如手动写路径容易拼错 @/components/Button.vue，Path Intellisense 一输 @/ 就自动列出 src 下所有子目录；又比如改完 App.vue 忘刷新页面，Live Server 保存即重载，连浏览器都不用切。
常见卡点包括：路径跳转失效、CSS 类名记不住、TODO 注释散落各处、格式不统一被 PR 拒绝、TS 类型提示延迟或缺失——这些都不是“能力问题”，而是编辑器没配对。
为什么 ESLint + Prettier 组合必须装，且顺序不能反
ESLint 负责逻辑和规范检查（比如禁止 var、要求函数有返回值），Prettier 只管格式（缩进、括号换行、引号单双）。如果先运行 Prettier 再跑 ESLint，可能因格式改动触发额外规则报错；反之，ESLint --fix 会覆盖部分 Prettier 风格。
- 必须在
.eslintrc.js的extends中最后加'prettier'，确保它禁用所有与格式相关的 ESLint 规则 -
settings.json中设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则保存时可能调用错 formatter - 若项目用
vue-eslint-parser，需额外安装eslint-plugin-vue，否则<template></template>里的绑定表达式不校验
Vue/React 开发中，插件冲突的真实表现和解法
最典型的是 Volar 和 Vetur 同时启用：VSCode 会反复提示 “Language server not responding”，Ctrl+Click 跳转失效，ref 类型推导变成 any。这不是性能问题，是两个语言服务在争抢 .vue 文件的控制权。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“前端免费学习笔记（深入）”；
- Vue 3 项目只留
Volar，彻底卸载Vetur（哪怕只是禁用） - React 项目避免装
Auto Import类插件，它常把useState错误补全成import { useState } from 'react'，而实际项目用的是import React, { useState } from 'react'，导致 ESLint 报react/react-in-jsx-scope -
Vue Helper的alt + x扩选和 VSCode 原生的Ctrl+Shift+Arrow有键位重叠，建议关掉后者或改键位
别名路径（如 @/）跳转不了？不是插件问题，是配置缺位
装了 Vue Alias Skip 或 Path Autocomplete 却仍无法 Ctrl+Click 跳转，大概率是项目缺少 jsconfig.json 或 tsconfig.json 中的 baseUrl 和 paths 声明。
- Vue CLI 项目默认已有
jsconfig.json，但 Vite 项目需要手动补：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
resolve.alias 中同步配置，否则构建能跑，编辑器跳转不行unplugin-auto-import 这类自动导入插件，import { ref } from 'vue' 不会触发路径跳转，这是预期行为，不是 bug真正难的不是找插件，是在项目结构、构建配置、TypeScript 解析器、VSCode 设置四者之间对齐。一个 @/ 跳转失败，可能根源在 tsconfig.json 的 include 没包含 src 目录，而不是插件没装对。
