关于react jsx：在Visual Studio Code中将语言更改为JSX


Change language to JSX in Visual Studio Code

Visual Studio Code现在在0.8版本上支持JSX，但是似乎激活它的唯一方法是使用.jsx文件扩展名。 手动更改语言模式不在列表中，最接近的选项是JavaScriptReact，但不会解析JSX标签。

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

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

相关讨论

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

1
2
3
4
5
6
// Place your settings in this file to overwrite the default settings
{
   "files.associations": {
       "*.js":"javascriptreact"
    }
}

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

相关讨论

我可以做到，但是JavaScriptReact模式也会显示" not React JS files"。

  • 打开文件C：\ Program Files(x86)\ Microsoft VS Code \ resources \ app \ plugins \ vs.language.javascript \ syntaxes \ javascriptreact.json
    (可能需要以管理员权限打开。)
  • 将数组" fileTypes"中的" jsx"更改为" js"。
  • 重新启动应用程序，关闭打开的js文件，然后重新打开。
    • 相关讨论

    花了我一段时间才弄清楚，但是–JSX已经是Emmet的一部分– Emmet是VS Code的一部分。我已经告诉Emmet也(另外)使JSX代码段在常规JS文件中可用。

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

    1
    2
    3
    "emmet.syntaxProfiles": {
       "javascript":"jsx"
    }

    我认为以下是格式化代码的最简单方法

    在VS Code Editor的右下角单击，其中显示Javascript。

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

    1. Check if JavascriptReact is selected??
    enter image description here

    相关讨论

    尽管Dionys的答案有效，但在Visual Studio Code的最新版本中有更好的方法来执行此操作。

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

    1
    2
    3
    4
      // 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" }(这将覆盖用户设置)。

    相关讨论

    现在有一个VS Code扩展名，它允许将.js文件视为.jsx文件。

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

    when you install this extension you will loose all the existing language support provided for .js files

    幸运的是，VS Code现在非常接近采用Salsa，这意味着js-is-jsx问题很快就会得到解决。

    相关讨论

    一按F1键(在Visual Studio Code中)

    2在出现的文本字段中输入"扩展名"

    3选择"扩展：安装扩展"

    3-类型" ext install jsx"

    4-安装JS JSX片段

    5-重新启动Visual Studio代码

    只需安装扩展程序：

    • 按F1键(在Visual Studio Code中)
    • 在出现的文本字段中输入"扩展名"
    • 选择"扩展：安装扩展"
    • 输入" ext install jsx"
    • 重新启动Visual Studio代码

    资源：

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

    相关讨论

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

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