在 Visual Studio Code 中将语言更改为 JSX

Posted 2023-02-22

【中文标题】在 Visual Studio Code 中将语言更改为 JSX

【英文标题】：Change language to JSX in Visual Studio Code

【发布时间】：2015-12-26 05:49:14

【问题描述】：

Visual Studio Code 现在是 supports JSX on 0.8 version，但看起来激活它的唯一方法是使用 .jsx 文件扩展名。手动更改语言模式不在列表中，最近的选项是javascriptReact，但它不解析JSX标签。

我在一个项目中，有很多 .js JSX 文件，我无法更改它。

没有.jsx扩展名，还有其他方法可以使用JSX语法吗？

【问题讨论】：

在这里查看讨论github.com/Microsoft/vscode/issues/140

【参考方案1】：

点击 VS 代码编辑器上的 右下角，其中显示 Javascript。你会看到一个选择语言模式的选项，在这里你可以搜索JavaScriptReact并选择。 就是这样。

【参考方案2】：

1-按 F1（在 Visual Studio Code 中）

2-在出现的文本字段中键入“扩展名”

3-选择“扩展：安装扩展”

3-键入“ext install jsx”

4- 安装 JS JSX Snippets

5-重启 Visual Studio Code

【参考方案3】：

我觉得下面是格式化代码最简单的方法

点击 VS Code Editor 右下角的 Javascript。

你会看到一个选择语言模式的选项，在这里你可以搜索 JavaScriptReact 并选择。而已。这应该可以解决您的问题。

1.

【讨论】：

这个问题来自一个时间，这个选项还不存在。现在就像你说的那样简单。

为什么我在 vs 编辑器的底部没有看到这个？我有最新的 vs 社区更新和最新版本的 react 安装。和所有扩展更新。相反，我看到一行显示一个编译错误，左/右箭头显示错误，并以蓝色显示“添加到源代码控制 github 行。

【参考方案4】：

虽然 Dionys 的回答有效，但在最新版本的 Visual Studio Code 中还有更好的方法。

转到File>Prefrences>Settings，然后向下滚动并找到“Emmet”打开选项卡，您应该会看到以下文本

  // Enable Emmet abbreviations in languages that are not supported by default. Add a 
  mapping here between the language and emmet supported language.
  //  E.g.: "vue-html": "html", "javascript": "javascriptreact"
  "emmet.includeLanguages": ,

所以只需按照说明在右侧面板的 json 中添加 "emmet.includeLanguages": "javascript": "javascriptreact" （这将覆盖用户设置）。

【讨论】：

谢谢。感谢没有任何酒神副作用的作品。

【参考方案5】：

如下更改您的用户设置或工作区设置：

// Place your settings in this file to overwrite the default settings

    "files.associations": 
        "*.js": "javascriptreact"
    

注意：您可能需要重新启动 VSCode。

【讨论】：

工作，甚至不必重新启动！谢谢

即使在运行时也有帮助！非常感谢！

什么文件在哪里？

Ctrl + , -> 用户或工作区设置

这会将每个 js 文件转换为 react 文件，甚至像节点模块这样的非反应 js 文件。也许不是最好的方法...

【参考方案6】：

我花了一些时间才弄清楚这一点——JSX 已经是 Emmet 的一部分——它是 VS Code 的一部分。我已经告诉 Emmet（另外）让 JSX sn-ps 在常规 JS 文件中可用。

只需将其放入您的设置文件中：

"emmet.syntaxProfiles": 
    "javascript": "jsx"
    

【参考方案7】：

现在有一个VS Code extension that allows .js files to be treated as .jsx files。

不幸的是，扩展的自述文件也警告：

当您安装此扩展程序时，您将失去为 .js 文件提供的所有现有语言支持

幸运的是 VS Code 现在非常接近adopting Salsa，这意味着很快 js-is-jsx 问题应该会完全解决。

【讨论】：

链接500s和插件不可用了

【参考方案8】：

只需安装一个扩展：

按 F1（在 Visual Studio Code 中） 在出现的文本字段中输入“扩展名” 选择“扩展：安装扩展” 键入“ext install jsx” 重启 Visual Studio Code

来源：

https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx https://marketplace.visualstudio.com/items/TwentyChung.jsx

【讨论】：

这对 *.js 文件有效吗？我尝试安装它，但它似乎对 xml 样式的错误没有帮助。

这个扩展似乎是一个 TextMate JSX.tmLanguage 文件的包装器。正如发布问题的人已经指出的那样，VSCode 已经支持突出显示 JSX，他们只需要在 JS 文件上这样做，而不仅仅是 JSX。因此，安装此扩展程序可能没有帮助。

是的，据我所知，这个扩展实际上并没有做任何事情。我也不知道如何联系制作它的人。我很想在我的反应开发中使用 vsCode（与 IMO 相比，webstorm 很烂）......还有其他人有什么好主意吗？

【参考方案9】：

尝试在 Mac 或 Linux 上使用链接。

ln -s index.ios.js index.ios.jsx

【参考方案10】：

我可以做到，但“不是 React JS 文件”也会在 JavaScriptReact 模式下显示。

打开文件 C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json （可能需要以管理员权限打开。） 将数组“fileTypes”中的“jsx”更改为“js”。 重启应用，关闭打开的js文件，重新打开。

【讨论】：

对于其他想知道的人来说，在 Mac 上的路径是：/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.tmLanguage

它对我有用。在 Mac 上，还将“js”添加到此文件的数组列表中：/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.t‌​mLanguage <array> <string>jsx</string> <string>js</string> </array>

对于 Windows10 上的版本 0.10.1，要编辑的文件已更改。 C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json。并将".js" 添加到contributes.languages[0].extensions。

@KoheiSugimura 您的解决方案有效，但我还必须从contributors.languages[1].extensions 中删除.js，然后它才有效！