live server 必须配置 liveserver.settings.custombrowser 为 "chrome"(小写)才能指定 chrome 为默认浏览器,而非依赖系统设置;配置后需重启 vs code 或重载窗口才生效。

Live Server 要配 liveServer.settings.CustomBrowser 才能指定 Chrome
默认情况下,Live Server 启动后会用系统默认浏览器打开页面,但前端调试时往往需要固定用 Chrome(比如启用 DevTools、模拟设备、禁用缓存)。直接改默认浏览器不现实,尤其在多浏览器共存环境里。
正确做法是在 settings.json 里加这一行:
"liveServer.settings.CustomBrowser": "chrome"
注意:chrome 是小写,不是 Chrome 或 Google Chrome;如果装的是 Edge,填 edge;Firefox 填 firefox。填错会导致启动失败,控制台报错 Cannot find browser 'xxx'。
常见坑:
- 拼写错误(大小写、空格、中文引号)
- 没重启 VSCode 或没重载窗口(
Developer: Reload Window) - 路径含空格的浏览器(如某些国产 Chromium)不被识别,得换标准版 Chrome
Prettier 和 ESLint 冲突时,优先关 eslint-config-prettier
两者都干格式化的事,但逻辑不同:ESLint 检查代码质量,Prettier 只管样式。一旦同时开启“保存时格式化”,常出现光标乱跳、分号反复增删、引号来回切换等问题。
根本解法不是调顺序,而是让 ESLint 主动让位:
- 装
eslint-config-prettier包(不是插件) - 在
.eslintrc.js的extends数组末尾加上'prettier' - 确保
prettier在eslint-config-prettier之后加载
示例片段:
module.exports = {
extends: ['airbnb', 'plugin:prettier/recommended', 'prettier']
};
别漏掉 'prettier' 这一项——它才是真正关闭 ESLint 格式类规则的开关。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
Path Intellisense 的 path-intellisense.mappings 必须匹配 jsconfig.json
别名路径(如 @/components/Button.vue)跳转失效,90% 是因为插件映射和项目配置不一致。VSCode 自带的跳转靠 jsconfig.json,而 Path Intellisense 默认不读这个文件,得手动告诉它。
在用户设置或工作区设置里加:
"path-intellisense.mappings": {
"@": "${workspaceFolder}/src"
}
注意点:
-
${workspaceFolder}是变量,不能写死成绝对路径 - 如果项目用
tsconfig.json,插件不会自动识别,仍要配这里 - 多个别名要全列出来,比如
"@assets": "${workspaceFolder}/src/assets"
配完立刻生效,不用重启,但 Ctrl+Click 跳转失败时先检查这个映射是否漏了斜杠或大小写。
Vue VS Code Tools 插件必须开 vue.suggestions.autoImport
Vue 单文件组件里写 <el-button></el-button> 却没自动 import,不是插件没装,而是默认关掉了自动导入。这个开关藏得深,新手常忽略。
打开设置搜 vue.suggestions.autoImport,勾选即可。它依赖 unplugin-auto-import 或 unplugin-vue-components 的运行时配置,但插件层只管触发,不负责生成声明文件。
容易卡住的地方:
- 项目没装
unplugin-auto-import,开了也白开 -
auto-import.d.ts被 gitignore 了,TS 类型提示就断了 - Vue 版本是 2.x,但插件默认适配 Vue 3,得切到兼容模式
复杂点在于:自动 import 是编辑器行为 + 构建工具行为的组合结果,缺一不可。单侧配置成功,另一侧不配合,最终还是没效果。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










