live server端口被占导致页面不刷新,应修改liveserver.settings.port为空闲端口(如3001);prettier与eslint冲突需安装eslint-config-prettier并加入.eslintrc.js的extends末尾;路径跳转失效须在jsconfig.json中配置baseurl和paths,改完需重启vscode。

VSCode 插件全局设置不是“装完就生效”,而是必须区分作用域、明确职责边界,否则容易导致格式化失效、路径跳转失败、热重载静默退出等看似随机实则可复现的问题。
Live Server 端口被占导致页面不刷新?改 liveServer.settings.port 就行
保存后页面没反应,不是插件坏了,大概率是 5500 端口被其他进程(比如另一个 Live Server 实例、Python 的 SimpleHTTPServer、甚至某个残留的 Node 进程)占用了。它不会报错,只会静默失败。
- 打开 VSCode 设置(
Ctrl+,),搜索liveServer.settings.port - 改成一个空闲端口,比如
3001或8080 - 如果需局域网调试(如手机访问),顺手把
liveServer.settings.host设为0.0.0.0
Prettier 和 ESLint 一起用却总“打架”?关键在 eslint-config-prettier
很多人设了 "editor.defaultFormatter": "esbenp.prettier-vscode",又开了 "editor.codeActionsOnSave": {"source.fixAll.eslint": true},结果保存时缩进乱跳、引号忽单忽双——这不是插件冲突,是规则没对齐。
-
eslint-config-prettier必须安装并加入.eslintrc.js的extends数组,例如:["airbnb", "prettier"] -
prettier只管格式(空格、换行、引号),ESLint只管逻辑(no-unused-vars、no-console),二者不能互相覆盖 - 项目根目录加
.prettierrc统一风格,避免团队成员本地配置不同引发 Git diff 波动
Path Intellisense 跳不到 @/components/Button.vue?先看 jsconfig.json 存不存在
按住 Ctrl 点击别名路径没反应,90% 不是插件问题,而是项目缺少路径声明文件。Path Intellisense 完全不读 vite.config.ts 里的 resolve.alias,只认 jsconfig.json(JS 项目)或 tsconfig.json(TS 项目)。
- 确认项目根目录有
jsconfig.json,内容至少包含:{"compilerOptions": {"baseUrl": ".", "paths": {"@/*": ["src/*"]}}} - 如果用了多个别名(如
#utils、$api),每个都得显式写进paths,不能靠插件自动推断 - 改完配置后重启 VSCode,或执行
Developer: Reload Window命令
Auto Rename Tag 在 Vue/JSX 里失灵?检查是否启用了 html.autoRenameTag
修改 <div> 时闭合标签没同步变,可能只是 VSCode 自带的 HTML 功能被关了,和插件无关。
<ul>
<li>搜索设置项 <code>html.autoRenameTag,确保它是 true
false
Auto Rename Tag 是增强版,支持 JSX 和 Vue 模板,但底层仍依赖这个原生开关真正卡住人的从来不是插件装不装,而是哪些设置该放全局、哪些必须放项目级,以及哪个配置项会覆盖另一个——比如 editor.formatOnSave 在工作区级设为 false,就能让某个老项目跳过 Prettier,而不用卸载插件。











