VSCode中提升前端开发速度的隐藏插件-VSCode-PHP中文网

live server是解决前端实时预览卡点的核心插件，必须配置端口（如设为0自动分配）和使用http协议绕过cors限制，而非仅依赖go live按钮。

vscode中提升前端开发速度的隐藏插件

没有“隐藏插件”这回事，只有被低估但实战中高频使用的插件——它们不靠宣传，靠解决具体卡点存活。

Live Server 不只是“点一下就开”，关键在端口和跨域配置

很多人装完 Live Server 就只用右下角的 Go Live 按钮，结果遇到两个典型问题：端口冲突、AJAX 请求被浏览器拦截。

默认端口 5500 容易和本地其他服务（比如 Vue CLI 的 8080 或 Node 后端）撞车，直接在设置里改 liveServer.settings.port 为 0（自动分配）或固定值如 3001
前端调用本地 mock 接口时，file:// 协议下 fetch 会因 CORS 被拒；Live Server 启动的是 http:// 协议，天然绕过该限制——这点比手动用 python -m http.server 更可靠
它不支持 HTTPS，开发微信相关功能时得换 Web Server for Chrome 或自己起 webpack-dev-server

Auto Rename Tag 真正省时间的地方是 JSX 和 Vue 模板嵌套

这个插件常被当成“HTML 闭合辅助”，但它在 React/Vue 中的价值远不止于此：

前端美化

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

下载

修改 <div classname="container"> 里的 <code>className 不会触发重命名，但改 <mycomponent></mycomponent> 标签名时，会同步更新——这对自定义组件尤其关键
Vue 的 <template></template> 块里写 <el-button></el-button>，改 <el-button type="primary"></el-button> 不会动闭合标签；但改 <el-card></el-card> 就会联动闭合
如果同时装了 Auto Close Tag，两者配合时注意关闭 autoCloseTag.enableAutoCloseTag，否则可能生成多余闭合符

Path Intellisense 在 TypeScript 项目里必须配 jsconfig.json 才能跳转 @/xxx

光装 Path Intellisense 插件，对 import utils from '@/utils' 这种别名路径毫无反应——它不会猜你项目里 @ 指向哪。

必须在项目根目录建 jsconfig.json（TS 项目用 tsconfig.json），写清楚 "baseUrl" 和 "paths"
常见错误是把 "@/*": ["src/*"] 写成 "@/*": ["./src/*"]，多一个 . 就失效
VSCode 需要重启或执行 Developer: Reload Window 才能识别新配置，不是装完插件就立刻生效

Colorful Comments 不是炫技，而是快速定位 TODO / FIXME / HACK

用不同符号标记注释，不只是为了好看。实际开发中，TODO 和 HACK 的语义完全不同，混在一起容易漏掉技术债。

!（红色）适合标紧急修复，比如 //! fix: prevent null ref in user profile
^（黄色）适合临时方案，比如 ^ HACK: fallback to localStorage when API fails
todo（深黄）会被 VSCode 自带的 TODO Highlight 插件识别，但 Colorful Comments 让它在编辑器里更醒目，一眼扫过去就能发现
别用 ~（紫色）写长段说明，它默认字号小、对比度低，阅读体验差