直接装auto close tag插件可解决“写完html标签总忘闭合”问题，它在输入>时自动补全闭合标签；auto rename tag则用于修改开始标签时同步更新结束标签，二者功能不同且需正确配置语言模式与冲突项。
哪些插件能解决“写完 HTML 标签总忘闭合”问题
直接装 Auto Rename Tag，它会在你修改开始标签（如 <div>）时，自动同步更新对应结束标签（<code>
前端开发常用的VSCode插件及其作用
胖静姑娘_7549
2026-08-20
280人浏览
原创
注意：它只作用于标准 HTML 标签，不处理自闭合标签（如 <img> 或 <input>），也不识别 Vue/JSX 中的自定义组件标签。如果项目里大量用 <mycomponent></mycomponent> 这类写法，得靠 Vue VS Code Tools 或 ESLint 规则来兜底。
为什么 prettier 和 eslint 一起装还报格式冲突
根本原因是 prettier 负责“怎么排版”，eslint 负责“写得对不对”，两者规则边界模糊（比如 semi、quotes 都能管）。不加协调会互相打架。
必须加 eslint-config-prettier 这个配置包，它会禁用所有和 prettier 冲突的 ESLint 规则。安装后，在 ESLint 配置文件里加一行：extends: ['eslint:recommended', 'prettier']。别漏掉 prettier 在数组末尾——顺序错了照样冲突。
常见表现：ESLint: Delete `;` 和 ESLint: Replace `;` with `;` 同时报错，就是没关掉 ESLint 的格式类规则。
Live Server 和 open in browser 该选哪个
Live Server 是真正意义上的本地开发服务器：支持热更新（保存即刷新）、提供 HTTP 环境（fetch 不跨域）、能跑 import 和 module 语法；open in browser 只是用系统默认浏览器打开 file:// 协议的 HTML 文件，连 fetch 请求都会被浏览器拦截。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
真实项目里几乎不用 open in browser。唯一适合它的场景是：纯静态单页、无任何 JS 交互、不调 API、也不用 ES 模块——比如写个个人简历页，连 index.html 都没配 script type="module"。
装 Live Server 后，右键菜单里点 “Open with Live Server”，它默认监听 http://localhost:5500，端口可改，但别设成 80 或 443（需要管理员权限）。
路径跳转失效（比如 @/utils 点不了）怎么办
VSCode 默认不认识 Webpack/Vite 的路径别名（@、#、~），所以 Ctrl+点击会失败。要让它能跳转，得装 Path Intellisense 或更精准的 Vue Alias Skip（专为 Vue 项目优化）。
装完后必须配 jsconfig.json 或 tsconfig.json 的 compilerOptions.baseUrl 和 paths，例如：
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
没配这个，插件只是补全路径，跳转依然无效。另外，Vite 项目还得确认 vite.config.ts 里 alias 和 tsconfig 一致，否则类型检查和跳转可能不一致。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
