Live Server 是前端开发必备插件，启动真实 HTTP 服务解决路径和请求问题；Quokka 实时执行 JS 代码；Prettier 与 ESLint 协同实现格式与逻辑校验；Turbo Console Log 快速生成带定位信息的日志。
Live Server 是前端开发里最不该跳过的插件——没有它，每次改完 HTML/CSS/JS 都得手动刷新浏览器，效率直接打五折。
Live Server 为什么比 Open in Browser 更实用
Open in Browser 只是打开文件，不启动服务，遇到 fetch、import 或相对路径资源时大概率报错；Live Server 启动的是真实 HTTP 服务（默认 http://localhost:5500），能正确解析 ./assets/img.png、fetch('/api/data') 这类路径和请求。
- 保存即刷新：勾选设置里的
"liveServer.settings.AdvanceCustomBrowserCmdLine"可指定 Chrome/Firefox 启动参数 - 端口可配：在
settings.json中加"liveServer.settings.port": 3000，避免端口冲突 - 根目录可调：右键项目文件夹 → “Open with Live Server”，或配置
"liveServer.settings.root": "./dist"指向构建输出目录 - 注意：它不代理后端 API，如需跨域调试，得配合
proxy配置或用http-proxy-middleware
Quokka.js：写 JS 就像在浏览器控制台里实时跑
不是“运行整个文件”，而是逐行执行、即时显示结果，特别适合验证数组方法、正则匹配、Promise 链或小算法逻辑。比如写 arr.map(x => x * 2)，右边立刻出现返回值，不用反复 console.log。
- 激活方式：Ctrl+K Q（Windows/Linux）或 Cmd+K Q（macOS）
- 支持 TypeScript 和 JSX，但需项目有
tsconfig.json或已安装对应语言支持 - 别把它当 Node 环境用：
require、fs、__dirname都不可用，它是沙盒执行环境 - 免费版限制单文件最多 10 行活跃代码；复杂逻辑建议切到终端用
node -i或直接跑测试
Prettier + ESLint 组合为什么不能只装一个
Prettier 负责格式（缩进、引号、换行），ESLint 负责逻辑（未使用变量、潜在 bug、规范检查）。单独装 Prettier，代码看着整齐但可能藏着 if (x = 1) 这种赋值当判断的错误；只装 ESLint，报一堆格式警告却不会自动修。
- 关键配置项：
"editor.formatOnSave": true+"editor.defaultFormatter": "esbenp.prettier-vscode" - 必须加
"eslint.validate": ["javascript", "typescript", "vue"]，否则 .vue 文件里 script 块不校验 - 冲突时以 ESLint 为准：装
esbenp.prettier-vscode后，在settings.json加"prettier.eslintIntegration": true（新版已弃用，改用eslint-plugin-prettier插件） - 新手容易忽略：Prettier 不处理分号，是否加分号由
semi: false控制，这得写在.prettierrc里，不是 VSCode 设置项
Turbo Console Log：调试时少敲 80% 的 log 模板
选中变量名 user，按 Ctrl+Alt+L，自动生成 console.log('user:', user);，带文件名和行号；再按一次，变成 console.log('【index.js:42】user:', user); —— 定位问题快得多。
- 支持多光标：同时选中多个变量，一键生成多条日志
- 上线前清理安全：Alt+Shift+D 只删 Turbo Console Log 生成的日志，手写的
console.warn或debugger不动 - 别滥用：大量日志会拖慢执行，尤其循环体内；高频调试建议用断点或 Quokka
- 注意命名冲突：如果项目已有
log函数，插件生成的console.log可能被覆盖，得关掉该函数的自动补全
插件不是越多越好，真正卡住效率的往往就那两三个环节：预览、调试、格式、校验。把 Live Server、Quokka、Prettier+ESLint、Turbo Console Log 这四类配稳，再根据框架加 Vue Tools 或 React Refactor，剩下的全是锦上添花。容易被忽略的是配置联动——比如 Prettier 和 ESLint 规则打架，或者 Live Server 的 root 路径没对齐构建目录，这时候看报错信息比重装插件管用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
