如何在 Visual Studio Code 1.5.2 中设置 jsx 语法高亮和 Intellisense？

Posted 2023-03-06

【中文标题】如何在 Visual Studio Code 1.5.2 中设置 jsx 语法高亮和 Intellisense？

【英文标题】：How to set up jsx syntax highlight and Intellisense in Visual Studio Code 1.5.2?

【发布时间】：2017-01-30 15:53:21

【问题描述】：

我是 Reactjs 的新手，我正在尝试为 react 和 jsx 配置 VSCode。

现有信息似乎已过时... 我设法在 VScode 中配置了 reactjs。

我安装了以下扩展：

打字安装程序 打字 Babel ES6/ES7 Reactjs 代码片段 jsx by TwentyChung

VSCode 语言模式现在显示“javascript React”。

我无法工作的是 react-jsx 语法高亮和智能感知。 我错过了什么？有没有关于jsx配置的​​说明？

Windows 10 64，VSCode 1.5.2，.js 中的反应文件

谢谢，

恩里科

【问题讨论】：

您可以查看我的样板文件。它具有您正在寻找的一些功能：github.com/skolmer/react-hot-boilerplate-vscode

嗨@Steffen，感谢您的帮助。我按照你的指示，ESlint 服务器正在运行并且整个样板已经安装，但我仍然没有任何 jsx 突出显示...在底部栏现在我有 Javascript React、Typescript 2.0.3、ESLint

如果它显示 Javascript React，那么一切都按预期工作。 JSX 语法高亮目前并不完美。有时突出显示可能会根据您的代码样式中断（例如换行符）。属性中的模板文字未正确突出显示，并且缺少其他详细信息。但是 vscode 的人每个月都会推送新的更新，所以我相信这会在下个月变得更好。请检查 vscode github 存储库中的已知错误。您还应该查看 vscode 中的不同配色方案。有些更适合 JSX。

如果你卸载jsx by TwentyChung时得到更好的结果，你应该试试。这个扩展是在 vscode 中仍然缺少 JSX 语法支持时创建的。

@Steffen，再次感谢。 jsx 已卸载。仍然没有语法高亮，但其他一切似乎都有效。 jsx可以自动完成吗？有结束标签会很棒...

【参考方案1】：

VS Code 开箱即用地支持 JSX 语法高亮和 IntelliSense。它还支持 JSX 的自动关闭标签和自动导入等功能

您不需要安装扩展程序。问题中提到的许多问题实际上会导致问题并且没有得到积极维护