开箱即用的前端开发提速关键在于5个插件精准配置：live server需设liveserver.settings.port避端口冲突；auto rename tag须补全"javascriptreact"等语言id；prettier与eslint共存时需指定默认格式器并禁用eslint格式化；path intellisense依赖jsconfig.json中paths配置识别@别名；所有配置均需写入settings.json或项目级.vscode/settings.json生效。
开箱即用的前端开发提速，关键不在装得多，而在配得准——5个插件+对应配置，覆盖写、查、跑、修、看全流程，多数人漏掉的不是插件，是settings.json里那几行关键开关。
Live Server 保存即刷新，但端口冲突怎么办
默认启动http://127.0.0.1:5500，一旦本地已有服务占了5500（比如Vue CLI或Webpack Dev Server），就会报错“Address already in use”。这不是插件坏了，是端口没换。
- 在VSCode设置中搜索
liveServer.settings.port，改成0（自动分配空闲端口）或具体值如8080 - 若需局域网访问（比如手机调试），开启
liveServer.settings.CustomBrowser并设为"chrome"，再配liveServer.settings.AdvanceCustomBrowserCmdline加--host-rules="MAP * 0.0.0.0" - 注意：它不处理
import路径别名（如@/components），这类资源仍需真实服务器或构建工具支持
Auto Rename Tag 同步改标签，但 JSX/Vue 里失效
默认只对html生效，React或Vue单文件组件里改<mycomponent></mycomponent>，闭合标签不动——因为插件根本没监听这些语言模式。
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 打开
settings.json，补全"auto-rename-tag.activationOnLanguage"数组：["html", "javascriptreact", "typescriptreact", "vue"] -
javascriptreact对应JSX，typescriptreact对应TSX，别写成jsx或tsx（VSCode内部语言ID不等于文件后缀） - 若组件用
<template></template>包裹（Vue SFC），确保vetur已启用，否则插件无法识别模板区域
Prettier + ESLint 共存时格式化失灵
点了保存，代码没变样，或者ESLint报错说semi不该有分号，但Prettier又强制加——本质是两者规则打架，且VSCode不知道该听谁的。
- 必须指定默认格式化工具：
"editor.defaultFormatter": "esbenp.prettier-vscode" - 禁用ESLint的格式化能力：
"eslint.format.enable": false，让它只做校验不碰格式 - 在项目根目录加
.eslintignore排除node_modules和构建产物，否则ESLint会扫描整个dist目录拖慢响应
Path Intellisense 补全路径，但@/别名不识别
输入import xxx from '@/，弹不出components/或utils/——插件不认识@指向哪，它只认物理路径。
- 在项目根目录建
jsconfig.json（TS项目用tsconfig.json），写入：{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["src/*"] } } } - VSCode需重启或执行
Developer: Reload Window才能读取新配置 - 注意：Webpack/Vite的
resolve.alias只是构建时生效，Path Intellisense依赖的是jsconfig.json或tsconfig.json，二者必须一致
真正卡住效率的，往往不是功能缺失，而是插件之间没对齐语言ID、路径配置或职责边界。比如Auto Rename Tag不配javascriptreact，Path Intellisense不搭jsconfig.json，再好的插件也等于摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
