结论是：ESLint 和 Prettier 必须协同配置，因二者职责重叠（如分号、引号），不协调会导致保存时相互冲突；需通过 eslint-config-prettier 关闭 ESLint 的格式规则，并配合 VS Code 的 formatOnSave 与正确默认格式器，才能实现写、检、格式、预览、调试的 JS 开发闭环。
直接说结论：不用装一堆插件，只用 ESLint + Prettier + Live Server 三个，配合合理配置，就能跑通 JS 开发闭环——写、检、格式、预览、调试。
为什么 ESLint 和 Prettier 必须一起配，且不能只靠默认设置
ESLint 负责报错（比如 undefined 变量、no-unused-vars），Prettier 负责“排版”（缩进、引号、换行）。但两者规则有重叠，比如都管分号、引号，不协调就会互相打架：你保存后 Prettier 加了分号，ESLint 立刻标红说“不该加分号”。
- 必须安装
eslint-config-prettier，并在.eslintrc.js的extends里加'prettier'，关掉所有和格式相关的 ESLint 规则 -
settings.json里设"editor.defaultFormatter": "esbenp.prettier-vscode"，否则 Ctrl+S 时可能调用错格式器 - 别开
"editor.formatOnType"，它会在你敲代码中途就格式化，打断思路；只留"editor.formatOnSave": true - 如果项目用 Vue3 或 React，ESLint 配置要加对应插件，比如
plugin:vue/vue3-recommended，否则v-model或 JSX 语法会误报
Live Server 不只是“点一下打开浏览器”，关键在端口和跨域控制
本地双击 HTML 文件打开，JS 里的 fetch 或 XMLHttpRequest 会因跨域被浏览器拦住。Live Server 启的 http://localhost:5500 才是合法上下文。
- 默认端口 5500 可能被占用，改端口要在
settings.json写"liveServer.settings.port": 3001 - 想让手机或同事访问你的页面？开
"liveServer.settings.host": "0.0.0.0"，再配防火墙放行对应端口 - 如果页面加载后 JS 报错 “Cannot find module”，大概率是你用了 ES Module（
import），但没加type="module"到<script>标签 —— Live Server 不解决语法问题，只解决协议问题 - 避免用 CodeRunner 插件跑 JS：它用 Node 执行，无法模拟浏览器 DOM 环境，
document、alert全报错
代码片段（Snippets）不是炫技，而是防手误的底线保障
手动写 console.log 容易拼错、漏括号、少引号；写 for (let i = 0; i 容易把 <code> 写成 <code>≤。这些低级错误占日常调试时间的 30% 以上。
- VSCode 自带 JS 片段就够用：输入
clg+ Tab → 插入console.log();，光标停在括号里 - 自定义一个
log片段，内容为console.log('$1:', $1);，$1 是变量名占位符，Tab 跳过去填一次就行 - 别把整个函数模板塞进 snippet：比如
function xxx() {}这种结构 IDE 自动补全已覆盖；重点补那些“人脑容易错、机器不会错”的固定模式 - 片段存在
%APPDATA%\Code\User\snippets\javascript.json（Windows），改完不用重启，新建 JS 文件立即生效
调试时 Chrome DevTools 和 VSCode 断点不是二选一
VSCode 的 debugger 能设断点、看变量、单步执行，但它依赖 sourcemap 和 launch 配置；Chrome DevTools 直接看运行时 DOM 和 Network，但没法跳转到 .js 源码行。两者得配合着用。
- 确保
launch.json里"webRoot": "${workspaceFolder}"指向正确，否则断点打不进源码 - 如果用了构建工具（Vite/Webpack），必须配
"sourceMaps": true和"outFiles"，不然 VSCode 看不到原始代码 - 简单纯 HTML/JS 项目，直接右键用 Live Server 打开，然后 F12 切到 Chrome 的 Sources 面板，Ctrl+P 搜文件名，点行号打断点更轻量
- 别信“一键调试”宣传：只要涉及异步、事件监听、第三方 SDK，断点位置和实际执行流常有偏差，得靠
debugger语句辅助定位
真正卡住效率的，从来不是插件数量，而是每个插件是否在它该起作用的地方精准发力。配置多一行少一行，往往决定你是花 2 分钟修个 console.log 拼写，还是花 20 分钟查“为什么变量明明赋值了却 undefined”。
