phpstorm需手动启用coffeescript插件并配置file watcher才能支持语法高亮、编译与调试；插件名是coffeescript，安装后验证图标与着色；编译需全局安装coffee命令，watcher参数用-c -m $filename$，输出路径设为$filenamewithoutextension$.js，且须开启source map及浏览器对应选项。
PhpStorm 默认不内置 CoffeeScript 支持，必须手动启用插件并配置编译器，否则 .coffee 文件只是纯文本，无法语法高亮、跳转、断点或自动编译。
安装 CoffeeScript 插件（必需）
没有这个插件，PhpStorm 完全识别不了 .coffee 文件——连文件图标都不会变，更别说补全或调试。插件名称就是 coffeescript，不是 “Coffee Script” 或其他变体。
- 打开 Settings | Plugins（macOS 是
Cmd+, → Plugins） - 切换到 Marketplace 选项卡，搜索
coffeescript - 点击安装，重启 PhpStorm
- 验证：新建一个
test.coffee，如果出现咖啡杯图标 ✅，且关键字（如class、->）有颜色，说明插件生效
配置 File Watcher 自动编译 .coffee → .js
插件只负责编辑支持，编译得靠 File Watcher 调用 coffee 命令行工具。它必须已全局可用，否则 watcher 会静默失败——你改了 .coffee，但根本没生成 .js 文件。
- 确保系统已安装 Node.js，并能运行
coffee -v（推荐用 npm 全局安装：npm install -g coffeescript） - 在 PhpStorm 中打开 Settings | Tools | File Watchers
- 点击
+→CoffeeScript（不是 “Custom”） -
Arguments字段填：-c $FileName$（注意不是-c $FilePath$，否则会报路径错误） -
Output paths to refresh填：$FileNameWithoutExtension$.js（让 PhpStorm 知道生成了哪个 JS 文件） - 勾选
Auto-save edited files to trigger compilation，否则要手动保存两次
调试 CoffeeScript 需要 source map
直接在 .coffee 文件里打的断点能命中，全靠 source map。如果断点灰色不可用，90% 是 map 没生成或路径不对。
- File Watcher 的
Arguments必须加--map或-m，例如：-c -m $FileName$ - 生成的
.js.map文件必须和.js同目录，且.js文件末尾要有//# sourceMappingURL=xxx.js.map - 浏览器 DevTools 中需开启
Enable JavaScript source maps（Chrome/Firefox 均有此开关） - PhpStorm 调试时，确保 Run | Debug 配置指向的是生成的
.js文件，而不是.coffee
最容易被忽略的是：File Watcher 的 Working directory 默认是项目根目录，但如果你的 .coffee 在子目录（比如 src/js/），而 watcher 输出路径写死了 $FileNameWithoutExtension$.js，就会把 JS 编译到错误位置——结果是 IDE 找不到对应 map，断点失效。务必检查输出路径是否匹配实际结构。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
