JSX 的 Visual Studio 编辑

Question

我正在使用 Visual Studio 2013 构建一个使用 React 和 JSX 作为用户界面的网站。这一切都很好，但会导致开发环境缓慢，因为 .jsx 文件被视为纯文本。所以没有语法高亮，你不能设置断点来帮助调试。

有没有办法改善这种体验，还是我必须为 jsx 文件切换到另一个编辑器？

Answer 1

我可以推荐两个技巧：

1) 您可以让 Visual Studio 显示一个带有 javascript 格式的 .jsx 文件。在 Visual Studio 中打开 工具 > 选项 > 文本编辑器 > 文件扩展名。将扩展名设置为“jsx”并选择 javascript 编辑器并单击“添加”。您可能需要关闭并重新打开 VS 才能看到更改。如果您将 render() 方法保留在 .jsx 文件的底部，它的效果会非常好。

2) 断点：不，您不能提前添加它们，但有一种解决方法。当您在 Visual Studio 中运行 Web 应用程序时，将在您的解决方案资源管理器窗口中打开一个名为“脚本文档”的新文件夹。转换后的 .jsx 文件中的代码将合并到这个“脚本块”文件中。加载网页后， 在 Visual Studio 中启动 Web 应用程序后，您可以在此处添加断点。

诚然，一旦您停止调试器，这些断点就会丢失。下次运行程序时，您必须再次设置它们。但至少你可以踏入大门。

如果您想闯入在网页完全加载之前已经运行的代码，请在要闯入的行之前在 jsx 中添加alert("here"); 命令。运行代码，当弹出窗口出现时，不要按 OK。切换到 VS 调试器，在脚本块文件中添加断点，然后按 OK 按钮。代码应在断点处立即停止。