VSCode 通过插件、全局 CoffeeScript 编译器和配置协同实现完整开发流：安装 mklabs 的 CoffeeScript 插件与 npm install -g coffeescript，配置 code-runner executorMap 和 tasks.json 实现语法高亮、保存编译、终端运行及 source map 调试。
VSCode 本身不原生支持 CoffeeScript，但通过插件 + 配置 + 编译命令三者协同，能实现语法高亮、错误提示、保存即编译、终端运行等完整开发流。关键不在“装什么”，而在“怎么串起来”。
安装 CoffeeScript 插件与全局编译器
缺一不可：插件负责编辑体验，全局 coffee 命令负责实际编译和运行。
- 在 VSCode 扩展市场搜索并安装
CoffeeScript（作者：mklabs），它提供语法高亮、括号匹配、基础片段 - 终端执行
npm install -g coffeescript（注意不是coffee-script，旧包已废弃） - 验证是否生效：
coffee --version应输出~3.0.x或更高；coffee -bpe "console.log 'ok'"应打印 JS 输出 - 若报错
command not found: coffee，说明 Node 的 bin 路径未加入系统PATH，需手动配置或重装 Node（推荐使用 nvm / fnm 管理）
配置 code-runner 运行 CoffeeScript
默认 code-runner 不支持 .coffee，必须手动补全 executorMap 条目，否则点击「运行」会失败或静默退出。
- 打开 VSCode 设置（
Ctrl+,），搜索code-runner.executorMap，点击「在 settings.json 中编辑」 - 在已有 JSON 对象的
executorMap内添加一行："coffeescript": "coffee -p $fileName" -
-p表示「打印编译后 JS」，适合调试；如需直接运行，改用"coffeescript": "coffee $fileName" - 确保已启用
code-runner.runInTerminal和code-runner.saveFileBeforeRun，否则修改后不生效
启用保存时自动编译为 JS
纯靠手动运行不够高效。要实现「保存 .coffee → 自动生成同名 .js」，得借助文件监听或任务配置。
立即学习“前端免费学习笔记（深入）”；
- 最轻量方式：用 VSCode 内置任务。新建
.vscode/tasks.json，内容如下：
{
"version": "2.0.0",
"tasks": [
{
"label": "compile-coffee",
"type": "shell",
"command": "coffee -c ${file}",
"group": "build",
"presentation": { "echo": false, "reveal": false },
"problemMatcher": []
}
]
}
- 再在
settings.json中加一句："files.associations": { "*.coffee": "coffeescript" }（确保文件类型识别正确） - 最后绑定保存动作：在
settings.json加"emeraldwalk.runonsave": { "commands": [{ "match": "\.coffee$", "cmd": "coffee -c ${file}" }] }（需先装扩展Run on Save） - 注意：
coffee -c默认不生成 source map；如需调试，加-m参数，但会额外生成.map文件
调试 CoffeeScript 源码（非必需但实用）
VSCode 调试器只能调试 JS，所以必须让 Chrome / Node.js 能映射回原始 .coffee 文件——这依赖 source map 和正确的启动方式。
- 编译时必须加
-m（coffee -cm file.coffee），生成file.js和file.js.map - 在
.vscode/launch.json中配置 Node 启动项，sourceMaps设为true，outFiles指向**/*.js - 若用 Chrome 调试 HTML 页面中的 CoffeeScript，需确保 script 标签引入的是
.js文件，且同目录下有对应.map文件，浏览器开发者工具中才能看到原始.coffee源码 - 常见坑：
coffee -c生成的 map 是相对路径，若项目结构深，可能找不到源文件；建议统一在项目根目录下执行编译
真正卡住人的往往不是某一步不会做，而是插件没认出文件类型、coffee 命令在终端可用但在 VSCode 集成终端里失效、或者 source map 路径错位导致断点不命中——这些都得逐层确认执行上下文和路径解析逻辑。
