vscode前端开发真·刚需插件是eslint、prettier、volar/vetur、auto rename tag和live server五款，缺一不可：eslint依赖项目本地eslint包运行，prettier专注格式化不检查质量，volar/vetur提供.vue语法支持，auto rename tag需配置语言关联才在.vue中生效，live server仅适用于静态页调试而非构建项目。
VSCode 本身不是开箱即用的前端 IDE，必须靠插件+配置组合出真正可用的开发流。只装插件不配规则、不设本地依赖，等于白装。
哪些插件是真·刚需，不能省
前端开发中，以下插件不是“可选”，而是缺一不可的执行基础：
-
dbaeumer.vscode-eslint：必须搭配项目本地安装的eslint包，它不会 fallback 到全局版本；没node_modules/eslint就不工作 -
esbenp.prettier-vscode：只负责格式化，不检查代码质量；别装Prettier ESLint这类拼接名插件，已过时 -
Vue.volar（Vue 3）或Vue.vetur（Vue 2）：.vue 文件没它，模板语法高亮、属性提示、类型推导全失效 -
formulahendry.auto-rename-tag：改一个标签名自动同步闭合标签，写 HTML 或 JSX 时少犯低级错误 -
ritwickdey.LiveServer：右键就能起服务，不用npx serve或手动开终端，适合快速验证 HTML/CSS/JS
其他如 Tailwind、TypeScript 支持、GitLens 等属于“按需加”，但上面五个是启动任何前端项目的硬门槛。
为什么装了 ESLint 插件却没报错
常见现象：dbaeumer.vscode-eslint 已启用，但编辑器里没波浪线、保存也不修复——根本原因是 ESLint 没在项目里跑起来。
- 检查项目根目录是否有
package.json，且已执行npm install eslint --save-dev - TypeScript 项目必须额外装
@typescript-eslint/parser和@typescript-eslint/eslint-plugin -
.eslintrc.js中extends数组末尾必须加'prettier'，否则 ESLint 和 Prettier 规则会互相覆盖 - VS Code 设置里禁用
editor.formatOnSave，启用editor.codeActionsOnSave并设为{"source.fixAll.eslint": true}
插件只是“调度员”，真正干活的是你项目里的 node_modules/eslint。没它，插件连 lint 命令都发不出去。
Live Server 启动后页面空白或 404
现象：右键 → Open with Live Server，浏览器打开但显示 Cannot GET / 或白屏——多数是路径或入口文件问题。
- 确保当前打开的文件是
index.html，且保存在项目根目录（Live Server 默认从该文件启动） - 如果入口是
src/index.html，需在.vscode/settings.json中配置："liveServer.settings.CustomBrowser": "chrome"+"liveServer.settings.root": "./src" - Live Server 不解析
import或require，纯静态服务；想跑 Vue/React 项目，请用vite或webpack serve - 若用 Webpack/Vite，别依赖 Live Server，直接运行
npm run dev，它自带 HMR 和路由代理
Live Server 是“静态页调试器”，不是构建工具。混淆这两者，就会卡在 404 里反复刷新。
Auto Rename Tag 在 .vue 文件里不生效
默认情况下，formulahendry.auto-rename-tag 只对 .html 和 .jsx 生效，.vue 的 template 区域需要显式声明语言关联。
- 在
settings.json中添加："files.associations": {"*.vue": "vue"} - 确认已安装
Vue.volar（Vue 3）或Vue.vetur（Vue 2），否则 VS Code 不识别<template></template>块为 HTML 上下文 - 重启 VS Code，否则关联设置不加载；改完设置后打开一个 .vue 文件，状态栏右下角应显示 “vue” 而非 “plaintext”
没语言模式，插件就不知道自己该在哪块区域工作。.vue 是复合文件，template/script/style 三块对应不同语言引擎，必须明确告诉 VS Code 哪块归谁管。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
