VSCode插件与前端开发的高效整合方案-VSCode-PHP中文网

应禁用eslint中与prettier重叠的格式规则，安装eslint-config-prettier并在.eslintrc.js的extends末尾添加'prettier'，vscode中关闭js/ts自带校验、设prettier为默认formatter，并确保vue3项目卸载vetur、启用volar的hybridmode。

vscode插件与前端开发的高效整合方案

ESLint 和 Prettier 冲突时怎么修？

保存后代码被反复格式化或报错“conflict with eslint”，本质是两者规则打架。Prettier 负责样式，ESLint 负责逻辑，但部分规则（如semi、quotes）重叠。

必须禁用 ESLint 中与 Prettier 重复的规则：安装 eslint-config-prettier，并在 .eslintrc.js 的 extends 里末尾加上 'prettier'
VSCode 设置中关闭自带 JS/TS 校验："javascript.validate.enable": false、"typescript.validate.enable": false，否则会和 ESLint 提示重复
prettier 插件要设为默认 formatter："editor.defaultFormatter": "esbenp.prettier-vscode"，否则 formatOnSave 可能调用错工具

Vue3 项目里 Volar 为什么没提示？

Volar 不是装上就自动生效的，尤其在 monorepo 或含多个 package.json 的项目中，它可能找不到正确的 TS 配置上下文。

前端美化

使用此技能可创建独具特色、具备生产级质量的前端界面，设计品质高。当用户要求构建网页组件、页面、产物、海报或应用程序时（例如：网站、落地页、仪表盘、React 组件、HTML/CSS 布局，或对任意 Web UI 进行样式优化与视觉美化），请启用该能力。输出需为富有创意、精雕细琢的代码与 UI 设计，避免千篇一律的 AI 风格。

下载

确认已关闭旧插件：Vetur 必须卸载，否则和 Volar 互斥
检查 .vscode/settings.json 是否启用 hybridMode："volar.enable: true、"volar.hybridMode": true
Vue 组件内 props 类型不提示？需确保 script setup 中使用 defineProps 且类型用 withDefaults 或泛型写法，比如 defineProps()
如果用 pnpm 或 bun，Volar 可能读不到 node_modules 下的类型定义，建议在项目根目录运行 npx volar-tools@latest sync

路径补全总跳到错的文件？

Path Intellisense 默认只认相对路径，遇到 @/components 这类 alias 就失效，不是插件坏了，是没告诉它别名指向哪。

必须配 jsconfig.json 或 tsconfig.json："compilerOptions.baseUrl 设为 "."，"paths 明确映射，例如 "@/*": ["src/*"]
VSCode 有时缓存旧配置，改完 jsconfig.json 后执行命令面板里的 Developer: Reload Window
如果项目用 Vite，还需在 vite.config.ts 里同步配置 resolve.alias，否则运行时路径没错、编辑器里补全仍错

Live Server 热更新不触发？

保存 HTML/JS 后浏览器没刷新，常见于项目结构不标准或端口被占——它只监听当前打开文件夹下的变更，不递归进 node_modules 或子 workspace。

右键 HTML 文件选择 Open with Live Server，而不是点顶部菜单的 Go Live，后者可能启动在错误工作区
检查端口占用："liveServer.settings.port": 5501 可手动换端口，避免和本地其他服务冲突
Vue/React 项目别用 Live Server 启动，它不跑构建流程；只适合纯静态页。这类项目应直接用 npm run dev + 浏览器访问 http://localhost:5173

实际配一套能跑的环境，关键不在插件数量，而在几个配置项是否对齐：TS 配置、别名声明、formatter 优先级、Vue 模式开关。漏掉任意一个，都会表现为“插件装了但不工作”。