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

Question

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

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

有没有其他方法可以在没有.jsx扩展的情况下使用JSX语法？

Answer 1

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

// Place your settings in this file to overwrite the default settings
{
    "files.associations": {
        "*.js": "javascriptreact"
    }
}

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

Answer 2

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

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

Answer 3

我花了一些时间来解决这个问题但是 - JSX已经是Emmet的一部分 - 它是VS Code的一部分。我已经告诉Emmet（另外）在常规JS文件中提供JSX片段。

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

"emmet.syntaxProfiles": {
    "javascript": "jsx"
}    

Answer 4

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

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

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

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

Answer 5

尽管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" }（这将覆盖用户设置）。

Answer 6

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

单击VS Code Editor右下角的Javascript。

您将看到选择语言模式的选项，您可以在此处搜索JavaScriptReact并选择。而已。这应该可以解决您的问题。

1.

Answer 7

只需安装扩展程序：

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

资源：

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

Answer 8

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

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