Webstorm 中的 coffeescript-react (.cjsx) 支持答案

【问题标题】：coffeescript-react (.cjsx) Support in WebstormWebstorm 中的 coffeescript-react (.cjsx) 支持
【发布时间】：2015-02-27 20:26:38
【问题描述】：

有没有办法在 WebStorm 中为 .cjsx（咖啡脚本中的 jsx）文件获得任何类型的语法高亮显示？

目前，我正在使用Sublime plugin，这很好，但如果可能的话，我更愿意留在 WebStorm。我知道 WebStorm 支持 TextMate 包，所以这可能是一个可行的选择，但我找不到 cjsx 的。

【问题讨论】：

WebStorm 的票：youtrack.jetbrains.com/issue/WEB-12464
谢谢。在这个问题上似乎没有太多活动。
好吧.. 仅 22 票（实际上这非常好.. 但与其他流行的技术/请求相比并没有那么多）。优先级还取决于技术在现实世界中的流行程度。我可能只建议在工单中询问他们的计划：是否会在下一个主要版本 (v10) 中提供适当的支持.. 或者他们可能会以不同的方式提供一些支持。我没有使用这些（CoffeeScript 或 React），也不知道他们当前的计划，但到目前为止，这张票与任何未来版本都没有关联/计划。
更新：Rus Werner 有posted 讲述了他破解 TextMate 捆绑包的经历，这可能会带来一些改进。我对它的体验不是很好，因为它弄乱了我使用的主题 (Darcula) 的文本背景颜色，但你们中的一些人可能会取得更大的成功。
@burtyish 我已经修复了背景，而在 IDE 设置中，请查看 TextMateBundles 下方的框 - 您可以在其中匹配 IDE 配色方案和 TextMate 配色方案 - 只需放置正确的并重新启用捆绑包！就是这样！

标签： reactjs coffeescript syntax-highlighting webstorm react-jsx

【解决方案1】：

我建议不要在 WebStorm 中为大型项目使用 CoffeeScript（请参阅 cmets 部分）。如果你真的需要，那么你总是可以使用反引号来告诉 CoffeeScript 编译器跳过反引号内的代码。

render: () ->
    return `<div>Hi</div>`;

如果在设置中选择“JSX Harmony”，就像在 Javascript 设置中一样，WebStorm 会很好地突出显示这一点。现在让这些cjsx 文件分两步编译：CoffeeScript -> JavaScript with JSX，然后是JavaScript with JSX -> JavaScript。如果您使用的是 Webpack，则很简单：

{include: /\.cjsx$/, loaders: ["coffee-loader", "jsx-loader"]}

【讨论】：

I would advice against using CoffeeScript in general. 你需要证明或删除它。
@jcollum 因为 WebStorm 主要不支持 CoffeeScript——在我看来是这样。尤其是如果你将它与他们的 JavaScript 支持进行比较，它真的不那么完整。例如：代码重新格式化永远不会 100% 有效。总有一些行（如嵌套对象定义）会失真。
Webstorm CoffeeScript 支持通常很棒，包括单步调试的全栈调试 - 全部在 CoffeeScript 中。

【解决方案2】：

Atom, the hackable editor，用coffeescript写的，对cjsx有很大的支持。（是的，看看那个，另一个非常非常非常大的项目，使用的是 coffeescript）

我正在使用社区（一个非常非常大的社区）支持的包 cjsx-language https://atom.io/packages/language-cjsx

我几乎打破了 1200 美元的 IntelliJ 链。这是我的 atom 设置和包的要点：https://gist.github.com/littlebee/34a60734de79f6f78c56

这是由这个天才小包保存的：https://atom.io/packages/sync-settings。它不会让你在没有密钥的情况下备份到我的要点，但它可能会让你从中恢复。

【讨论】：

自从提出这个问题后，我也发现 Atom 提供比 Sublime 更好的 cjsx 支持并推荐它。但是，此答案并未回答有关 Webstorm 的问题。无论如何，感谢您分享您的设置。

【解决方案3】：

使用这个 textmate 包（用于 webstorm cjsx）：https://github.com/ruswerner/cjsx.tmbundle

【讨论】：

这是这里唯一正确的答案