真正让JavaScript开发变简单的是ESLint+Prettier+Quokka.js+Live Server这4个核心插件：ESLint与Prettier需配置自动修复和保存格式化，Quokka.js提供实时代码验证，Live Server解决本地HTTP服务与跨域问题。
JavaScript 开发在 VSCode 里真正变简单，靠的不是堆插件，而是选对 3–4 个能直接改写你编码节奏的核心插件。 其他插件只是锦上添花，这几个却能让你少写、少错、少调试——而且几乎零学习成本。
ESLint + Prettier 组合必须启用自动修复
很多人装了 ESLint 和 Prettier，但只让它标红报错，不配自动修复，等于白装。关键不是“检测”，而是“拦截+修正”。
- 在
.vscode/settings.json中必须加这两项："editor.codeActionsOnSave": { "source.fixAll.eslint": true }和"editor.formatOnSave": true - 确保项目根目录有
.eslintrc.js（哪怕只 extendseslint:recommended），否则ESLint插件不会生效 - 如果
Prettier和ESLint规则冲突（比如分号、引号），一定要装eslint-config-prettier并在extends末尾加上它，否则保存时会来回打架 - 不要用
Beautify替代Prettier：前者规则松散、不可配置，Prettier是目前 JS 生态事实标准，格式行为可预测
Quokka.js 不是玩具，是 JS 快速验证刚需
你还在反复切到浏览器控制台试 Array.prototype.flatMap 行为？或者不确定某个正则是否匹配预期？Quokka.js 就是为此而生的实时沙盒，不是演示工具。
- 新建文件后按
Cmd/Ctrl+K J启动 Quokka，光标所在行/块的结果立刻显示在右侧注释里 - 支持
console.log()、debugger、甚至异步await（需开启quokka.enableESM） - 注意：默认不读取
node_modules，如果用了lodash等包，得手动在 Quokka 配置里加"quokka.nodeArgs": ["-r", "ts-node/register"]或类似路径 - 别和
Code Runner混用——后者执行整个文件、无上下文感知；Quokka是增量执行、带作用域链，更适合片段验证
JavaScript Booster 的重构建议要主动触发，不是等它弹窗
JavaScript Booster 的灯泡图标不会总出现，它依赖 AST 分析精度。很多重构（比如 Convert to const）需要你把光标精准停在变量声明行开头，而不是随便点一下。
- 常见失效场景：光标在字符串内、在注释里、或整行被折叠，灯泡就不会亮
- “Replace with template string” 只对
+连接字符串有效，且要求所有拼接项都是变量或字面量，含函数调用（如'a' + getName()）就不触发 - “Flip if-else” 对嵌套过深的条件（比如 if 内还有 if）可能不出现，这时手动提取成函数再重构更稳
- 它不处理
var提升问题——比如把var a = 1;转成const a = 1;是安全的，但若该变量在声明前已被引用，转换后会报错，插件不会预警
Live Server 启动失败？先检查端口和协议
Live Server 启动失败不是插件坏了，90% 是本地环境冲突。它本质是起一个微型 HTTP 服务，不是魔法。
- 默认端口
5500被占用时，插件不会自动换端口，得手动在.vscode/settings.json加："liveServer.settings.port": 5501 - 如果打开页面是空白或报 CORS，说明你双击 HTML 文件用
file://协议打开了——Live Server必须通过http://访问，右键菜单选 “Open with Live Server”，别用快捷键Alt+L Alt+O（旧快捷键已弃用） - 它不代理 API 请求，前端调后端接口仍需配 proxy 或用
json-server等工具，别指望它解决跨域 - 热更新（HMR）仅对 CSS/JS 文件生效，HTML 修改仍需整页刷新，这不是缺陷，是设计使然
插件越轻、越专注，越容易形成肌肉记忆。别追求“全装”，重点盯住那几个能改变你每天写代码手感的——它们才是真正让 JS 开发变简单的部分。
