VSCode插件与js代码高效协作的进阶秘籍-VSCode-PHP中文网

真正提升javascript开发效率的是eslint、prettier和javascript booster三者的协同：eslint负责逻辑检查并统一修复，prettier专注格式化，需通过eslint-config-prettier禁用冲突规则且prettier应置于extends末尾；vscode中推荐仅启用editor.codeactionsonsave的source.fixall.eslint而非双格式化；javascript booster依赖ts服务，对语法错误、var声明等有重构限制；live server需配置mime类型与type="module"，eslint需扩展.mjs支持，且.eslintrc.js修改后须重启窗口；booster重构后需手动触发eslint修复。

vscode插件与js代码高效协作的进阶秘籍

VSCode 插件不是装得越多越好，真正提升 JavaScript 开发效率的，是几个关键插件之间的协同机制——尤其是 ESLint、Prettier 和 JavaScript Booster 三者如何分工又不打架。

ESLint 和 Prettier 怎么配才不冲突

常见错误现象是：保存后代码被格式化了，但 ESLint 仍然标红，或者自动修复把引号改回双引号，而你明明配置了单引号规则。

必须安装 eslint-config-prettier，它会禁用所有与 Prettier 冲突的 ESLint 规则（比如 quotes、semi）
.eslintrc.js 中 extends 数组里，prettier 要放在最后，否则会被前面的规则覆盖
VSCode 设置中不要同时开启 editor.formatOnSave 和 editor.codeActionsOnSave 的双重格式化，推荐只开后者：
```
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true } }
```
让 ESLint 统一接管“修复”动作
Prettier 只负责格式（缩进、换行、空格），ESLint 负责逻辑（no-unused-vars、eqeqeq），这个边界一旦模糊，就会反复拉扯

JavaScript Booster 的灯泡为什么有时不亮

它依赖 TypeScript 语言服务提供 AST 分析能力，不是纯文本匹配。光标停在语法无效或未解析的代码上时，灯泡直接消失。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

确保已安装 JavaScript and TypeScript Nightly 插件，官方 JavaScript 基础支持不够稳定
函数体为空、参数名含非法字符（如中文、$开头但非标准）、或存在 eval 动态调用时，Booster 会主动放弃重构
它默认不处理 var 声明的全局变量（怕污染作用域），想转换需先手动改成 let 或 const 再触发
重构前建议先运行一次 eslint --fix，把基础语法问题清掉，Booster 才能识别出可安全转换的结构

Live Server 和 ESLint 调试时怎么避免跨域/报错干扰

本地双击打开 HTML 文件跑 JS 时，fetch 或 localStorage 会因 file:// 协议被浏览器拦截；而 ESLint 报错又常出现在 Live Server 启动后才加载的模块里。

Live Server 默认端口是 5500，若项目用了 import 模块语法，确保服务器返回的 MIME 类型是 text/javascript，否则 Chrome 会静默失败
在 .vscode/settings.json 中加一行：
```
"eslint.options": { "extensions": [".js", ".mjs"] }
```
，否则 ES Module 文件可能不被 ESLint 扫描
调试时如果看到 Uncaught SyntaxError: Cannot use import statement outside a module，不是 ESLint 的锅，而是 Live Server 没配好 type=module —— 在 script 标签里补上 type="module"
不要在 Live Server 运行时修改 .eslintrc.js，它不会热重载，必须重启 VSCode 窗口（Developer: Reload Window）才能生效

最易被忽略的一点：JavaScript Booster 的重构结果默认不经过 ESLint 校验。它改完代码就完事，不会触发 source.fixAll.eslint。如果你开了自动修复，得手动保存一次，或者按 Ctrl+Shift+P 运行 ESLint: Fix all auto-fixable Problems 补上这步。