vscode插件是javascript开发的基础设施：eslint与prettier必须共存且手动协调，live server解决file://跨域问题，javascript and typescript nightly提升智能提示，quokka.js提供实时代码验证。
VSCode 插件不是“锦上添花”，而是 JavaScript 开发中绕不开的基础设施——没装 ESLint 和 Prettier，写 JS 就等于裸奔；没配 JavaScript and TypeScript Nightly，智能提示会频繁失灵；不启用 Live Server，连本地调试都卡在跨域报错里。
ESLint + Prettier 必须共存，但不能自动联动
很多人以为装了 ESLint 就不用管格式问题，其实它只做规则校验（比如 undefined 变量、未使用的参数），不负责缩进/引号/分号排版；Prettier 则只管格式，不管逻辑错误。两者必须同时启用，且需手动协调优先级：
- 在设置中开启
Format on Save，并把默认 formatter 设为Prettier - 关闭
Prettier的eslintIntegration（新版已弃用，直接删掉配置项） - 在项目根目录放
.eslintrc.js，明确声明rules，别依赖插件默认值 - 若保存后格式没生效，检查当前文件右下角语言模式是否为
javascript（不是plaintext或typeScript）
Live Server 解决本地 HTML + JS 调试的跨域痛点
直接双击打开 index.html 时，fetch 或 XMLHttpRequest 会因 file:// 协议被浏览器拦截，报错 CORS request not HTTP。这不是代码问题，是协议限制：
- 右键 HTML 文件 →
Open with Live Server，会启动http://localhost:5500服务 - 端口可改：打开设置搜索
liveServer.settings.CustomBrowserUrl，填入http://127.0.0.1:3000等自定义地址 - 注意：它不代理 API 请求，后端接口仍需单独起服务或配代理
- 如果页面刷新后 JS 没更新，清浏览器缓存或关掉
Live Server的Enable Cache选项
代码补全靠 JavaScript and TypeScript Nightly，不是靠 IntelliSense 默认版
VSCode 自带的 JS 补全在复杂对象链、动态属性、Promise 返回值推导上非常弱，尤其遇到 res.data?.user?.profile?.avatar 这类嵌套访问时，常显示 any 类型或干脆无提示：
- 卸载默认的
JavaScript Language Features（禁用即可，别删） - 安装官方
JavaScript and TypeScript Nightly，它基于最新 TS 语言服务，支持 JSDoc 类型标注推导 - 配合
@ts-check和// @type {xxx}注释，能大幅提升补全准确率 - 如果函数参数提示消失，检查当前文件是否有
//@ts-nocheck或顶部缺失"use strict"
Quokka.js 不是玩具，是验证 JS 行为的最小闭环
写一段 Array.prototype.flatMap 处理逻辑，不确定边界情况是否成立？与其切到浏览器控制台、写 console.log、再删掉——不如用 Quokka.js 实时看结果：
- 新建文件后缀为
.js，输入代码，右侧立刻显示每行执行值（包括undefined、null、对象展开） - 支持
it.only风格的区块隔离，光标放在某段代码内按Alt+P，只运行该区域 - 注意：它不加载
node_modules，第三方库需用require显式引入，且仅限 CommonJS - 和
Code Runner的区别在于：Quokka 是“编辑器内沙盒”，后者是“终端执行”，前者能看到变量快照，后者只能看到 stdout
真正卡住 JS 开发效率的，从来不是语法本身，而是环境反馈延迟——等浏览器刷新、等构建完成、等报错堆栈滚动到底。插件解决的不是“怎么写”，而是“写完立刻知道对不对”。选错插件或配错组合，比不装还糟：比如 ESLint 规则太松导致 CI 失败，或 Prettier 配置和团队不一致引发大量格式冲突。动手前先确认项目技术栈（是否用 TS？是否启用了 ESM？有没有自定义 babel config？），再决定插件开关和配置粒度。
