前端开发必备VSCode插件实战应用心得-VSCode-PHP中文网

live server 启动后页面不刷新，需检查liveserver.settings.enablebrowserpreview是否为true及端口是否被占用；若启用false或5500端口冲突，将导致空白页或404，建议设enablebrowserpreview为true并将port设为0以自动分配空闲端口。

前端开发必备vscode插件实战应用心得

Live Server 启动后页面不刷新？检查 `liveserver.settings.enableBrowserPreview` 和端口冲突

Live Server 默认开启浏览器预览，但很多人装完点 Go Live 却只看到空白页或 404。常见原因是：liveserver.settings.enableBrowserPreview 被设为 false（尤其在团队配置同步后），或本地已有服务占用了默认的 5500 端口。

实操建议：

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

打开设置（Ctrl+,），搜索 liveserver.settings，确认 enableBrowserPreview 为 true
若端口被占，直接在 .vscode/settings.json 中写入："liveServer.settings.port": 0（0 表示自动分配空闲端口）
不要依赖右下角按钮——它只对当前文件夹根目录生效；若项目结构是 src/index.html，需确保在 src 目录下右键启动，否则路径解析会错

ESLint + Prettier 冲突报错：禁用 `eslint.autofixonsave` 或统一规则入口

常见现象是保存时弹出“Conflict with Prettier”警告，或格式化后代码缩进错乱、分号消失又恢复。本质是两个插件都监听 onSave，且规则未对齐。

实操建议：

优先关闭 eslint.autofixonsave，改用 prettier.requireConfig: true + 项目级 .prettierrc 控制格式
在 .eslintrc.js 中显式引入 eslint-config-prettier 关闭所有格式类规则：extends: ['eslint:recommended', 'prettier']
避免同时启用 editor.formatOnSave 和 eslint.formatEnable——二者选其一即可，推荐只开 editor.formatOnSave 并绑定到 Prettier

Vue 文件跳转不到 `@/api` 别名路径？`jsconfig.json` 比插件更可靠

装了 vue-alias-skip 插件却仍无法 Ctrl+点击 跳转，根本原因常是 VSCode 没识别到别名映射，而非插件失效。

实操建议：

在项目根目录创建 jsconfig.json（TS 项目用 tsconfig.json），写入：{"compilerOptions":{"baseUrl":".","paths":{"@/*":["src/*"]}}}
重启 VSCode（不是重载窗口），让语言服务重新加载配置
vue-alias-skip 仅作补充——它不接管路径解析，只在语言服务失败时尝试兜底；真正起效的是 jsconfig.json 提供的 LSP 支持