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

Question

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

我在一个带有很多.jsJSX文件的项目中,我无法改变它.

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

Answer 1

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

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

注意:您可能需要重新启动VSCode.

Answer 2

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

单击 VS 代码编辑器右下角的 Javascript。

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

1.

Answer 3

我可以做到,但"不是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 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": {},

因此，只需按照说明操作并"emmet.includeLanguages": { "javascript": "javascriptreact" }在右侧面板上添加 json（这将覆盖用户设置）。

Answer 5

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

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

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