VSCode有哪些必装的高效前端开发插件推荐-VSCode-PHP中文网

eslint与prettier需协同配置：eslint管逻辑规范，prettier专管格式；须装eslint-config-prettier并置于extends末尾以禁用冲突规则；vs code中启用formatonsave和fixall.eslint；vue 3项目应弃vetur改用volar，并配好tsconfig.json/jsconfig.json及paths别名。

vscode有哪些必装的高效前端开发插件推荐

ESLint + Prettier 怎么配才不打架

这两个不是“选一个”，而是必须一起装、但必须明确分工：ESLint 负责逻辑和规范检查（比如 no-unused-vars、react-hooks/exhaustive-deps），Prettier 只管格式（缩进、引号、换行）。冲突几乎全来自 ESLint 里那些格式类规则。

务必安装 eslint-config-prettier，并在 .eslintrc.cjs 的 extends 数组末尾加上它，否则 quotes、semi 等规则会和 Prettier 对着干

VS Code 设置里加这两句，保存时自动修复+格式化：

"editor.formatOnSave": true,<br>"editor.codeActionsOnSave": { "source.fixAll.eslint": true }

别在 settings.json 里手动设 eslint.options 指向全局 node_modules —— 项目本地的 node_modules/.bin/eslint 才是真实环境，否则类型推导和插件解析常失效

Vue 3 项目还在用 Vetur？赶紧换 Volar

Vetur 已停止维护，对 Vue 3 的 setup()、defineProps 泛型、ref 类型推导支持极弱，甚至会报错“Cannot find name ‘defineProps’”。Volar 是 Vue 官方推荐、TypeScript 原生集成的方案，开箱即用。

VSCode

避免常见的 VSCode 错误——设置冲突、调试器配置和扩展冲突。

下载

卸载 Vetur 后，重启 VS Code —— 不重启的话 Volar 的语言服务器可能无法接管 .vue 文件
确保项目有 tsconfig.json 或 jsconfig.json，否则 Volar 的类型跳转（F12）和自动导入常失效
如果 <script setup lang="ts"></script> 里 import 的组件没提示，检查 compilerOptions.types 是否包含 "@vue/runtime-dom"

路径补全为什么 `import '@/components/Btn.vue'` 不提示？

Path Intellisense 默认不识别 @ 别名，它只认物理路径或 jsconfig.json/tsconfig.json 里声明的 paths。直接写 ./../../ 能提示，但 @/ 报红或无响应，就是配置断了。

在 jsconfig.json 根目录下加：

"compilerOptions": {<br>  "baseUrl": ".",<br>  "paths": {<br>    "@/*": ["src/*"]<br>  }<br>}

改完后必须重载窗口（Cmd+Shift+P → “Developer: Reload Window”），缓存不刷新，补全永远不生效
别依赖插件自己的 path-intellisense.mappings 设置 —— 它只处理纯字符串映射，无法解析 TypeScript 的模块解析逻辑，容易和实际构建行为不一致

Live Server 自动刷新为啥有时不触发？

它监听的是文件系统变更，不是 webpack/vite 的 HMR 输出。当你用 vite dev server 启动项目时，Live Server 其实是多余的，还可能因端口冲突或静态资源路径不对导致白屏。

仅对纯 HTML/CSS/JS 静态页有效；React/Vue 项目请用框架官方 dev server（vite dev 或 npm start）
如果 HTML 里引用了 ./dist/bundle.js，而 Live Server 根目录不是 dist，就刷不出 JS —— 它不会自动推导构建产物路径
右键菜单里“Open with Live Server”启动的端口默认是 5500，若被占用会静默失败，看状态栏右下角有没有显示端口号来确认是否真启动了

Volar 的类型服务、ESLint 的规则链、别名路径的解析源头——这些都不是插件自己说了算，而是紧耦合于你项目的配置文件和运行时环境。少一个 tsconfig.json，或多一个未禁用的 ESLint 格式规则，整个体验就从“顺滑”变成“反复 reload 窗口查文档”。