JavaScript在VSCode写得顺的关键在于装对插件：ESLint+Prettier需配置自动修复与规则对齐，JavaScript Booster善用快捷键重构，Quokka.js嵌入日常验证流，Bracket Pair Colorizer与Indent Rainbow配合使用并适配文件类型。
JavaScript 在 VSCode 里写得顺不顺，80% 取决于你装没装对插件——不是越多越好，而是关键几个必须到位，否则光靠手动改 var、补分号、查括号配对、翻文档写 fetch，早把耐心耗光了。
ESLint + Prettier 组合必须启用自动修复
很多人装了 ESLint 和 Prettier，但只让它标红、不自动修，等于装了个“报警器”却不配灭火器。问题出在配置没打通：
-
ESLint的"eslint.enable": true和"eslint.autoFixOnSave": true（VSCode 1.89+ 已弃用，改用"editor.codeActionsOnSave": { "source.fixAll.eslint": true }） -
Prettier必须设为默认格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode" - 二者冲突时，
"prettier.eslintIntegration"已废弃，现在靠.eslintrc.js里的rules主动禁用与 Prettier 冲突的规则（比如"indent"、"semi"），否则保存时反复打架
常见错误现象：Ctrl+S 后代码缩进乱跳、分号忽有忽无、单引号双引号来回切——基本就是这两者没对齐。
JavaScript Booster 重构操作别只点灯泡
JavaScript Booster 的黄色灯泡很显眼，但真正省时间的是它支持快捷键触发，不用每次挪鼠标：
- 光标停在
function关键字上，按Ctrl+.（Windows/Linux）或Cmd+.（macOS）直接呼出重构菜单 - 选中一段条件表达式（如
a === 1 ? 'x' : 'y'），再按Ctrl+.，会出现 “Extract to function” 或 “Convert to if-else” - 注意：它不会重构被
eval、with或动态作用域影响的代码，遇到这类情况会静默不显示选项——不是插件坏了，是它主动规避风险
容易踩的坑：在箭头函数里对 return 行点灯泡想转模板字符串，结果失败——因为 JavaScript Booster 要求该行必须是纯表达式返回，不能带逻辑语句或注释。
Quokka.js 调试别只当“玩具”，要嵌入日常验证流
Quokka.js 不是写完再跑，而是边写边看值——但它常被当成临时沙盒，其实更适合嵌入真实开发节奏：
- 在
.js文件里写逻辑前，先复制粘贴一段到新 Quokka 文件（Cmd+K J），验证边界 case（比如undefined输入、空数组、NaN） - 调试异步逻辑时，在 Quokka 里直接
await fetch(...)，比开浏览器控制台快得多；但注意它默认不走项目node_modules，需手动配quokka.nodeArgs指向本地node_modules/.bin - 它不支持
import.meta.url或动态import()，遇到 “ReferenceError: require is not defined” 别硬扛，换回终端或浏览器环境
性能影响：Quokka 会为每行代码创建独立上下文，大量循环或大对象初始化会明显卡顿——这时关掉实时运行（右下角 Quokka 图标点停），手动选中区域按 Cmd+K Q 运行即可。
Bracket Pair Colorizer 和 Indent Rainbow 配合用才有意义
单独装 Bracket Pair Colorizer 只解决“哪个括号对应哪个”，但嵌套深了还是晕；加上 Indent Rainbow 才真正定位“这段逻辑属于哪一层”：
- 颜色层级默认 6 层，如果项目里常见 7 层以上嵌套（比如 React + Redux + Saga + Promise 链），需在设置里调高
"indentRainbow.colorList"数组长度，否则第 7 层开始变回默认灰 - 两者都依赖语法解析器，遇到 JSX 中
{}和 JS 中{}混用时，Bracket Pair Colorizer可能错配——这不是 bug，是它优先匹配最内层合法 JS 语法块 - 禁用其中一个，另一个效果会打折：比如只开彩虹缩进，括号颜色全一样，你还是不知道
}是闭哪个{；只开括号着色，缩进对齐异常时看不出哪层漏了}
真正容易被忽略的细节：这些插件对文件类型敏感——.vue 单文件组件里，<script></script> 块有效，<template></template> 块无效；.ts 文件需确认 typescript-language-features 插件已启用，否则括号配对可能失效。
