logo标签列表

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

reactjsvisual-studio-code
63

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

我在一个有很多带有JSX的.js文件的项目中，而我不能更改文件扩展名。

是否有其他方法可以使用JSX语法而不需要.jsx扩展名？

1
请参见此处的讨论 https://github.com/Microsoft/vscode/issues/140 - jpierson
10个回答
158

按照以下步骤更改您的用户设置或工作区设置：

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

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

工作正常，甚至不需要重新启动！谢谢。 - Shprink
它甚至在运行时也有帮助！非常感谢！ - Vlad Dekhanov
3
什么文件在哪里？ - Michal Ciechan
6
Ctrl + , -> 用户或工作区设置 - Michal Ciechan
6
这将把每个js文件都变成React文件，甚至包括非React的js文件，比如Node模块。也许不是最好的方法… - Paulin Trognon
@PaulinTrognon 如果你不想把所有的js文件都转换成react文件，你可以更改正则表达式。例如，你可以将所有以_.react.js_结尾的文件更改为react文件。为此，请将*.js更改为*.react.js。 - Dionys
11

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

在 VS Code 编辑器右下角点击“Javascript”。

你将看到一个选择语言模式的选项，在这里你可以搜索“JavaScriptReact”并选择。就是这样。这应该解决了你的问题。

1. 检查是否选择了JavaScriptReact 输入图片描述

1
这个问题来自于一个还没有这个选项的时代。现在它就像你所说的那样简单。 - William Grasel
为什么我在vs编辑器底部看不到这个？我已经安装了最新版本的vs社区和react，并更新了所有扩展。相反，我看到一行显示一个编译错误和左/右箭头以浏览错误，还有一个蓝色的“添加到源代码控制github”行。 - Andrew H
它对我有效，但为什么简单的Javascript不起作用？ - Tanvi Agarwal
7

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

  1. 打开文件C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json （可能需要以管理员权限打开）。
  2. 在“fileTypes”数组中将“jsx”更改为“js”。
  3. 重新启动应用程序，关闭已打开的js文件，然后重新打开。
4
对于其他人的疑问，Mac 上的路径是：/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.tmLanguage。 - Mike Lentini
1
它对我起作用了。在Mac上，我还将“js”添加到此文件中的数组列表中：/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.t‌​mLanguage<array> <string>jsx</string> <string>js</string> </array> - Jyo Reddy
1
对于 Windows10 上的版本 0.10.1，需要编辑的文件已更改。文件路径为 C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json。需要在 contributes.languages[0].extensions 中添加 ".js"。 - Kohei Sugimura
@KoheiSugimura，你的解决方案有效，但我还必须从contributes.languages[1].extensions中删除“.js”，然后它才能正常工作！ - Rocklan
6

虽然Dionys的答案是可行的，但在最近的Visual Studio Code版本中有更好的方法来实现此目的。

前往文件>首选项>设置，然后向下滚动并找到"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文件中（它会覆盖用户设置）。

谢谢。感谢您的工作，没有任何Dionys的副作用。 - Frazer Kirkman
6

我花了一段时间才明白，JSX已经是Emmet的一部分，而Emmet又是VS Code的一部分。我告诉Emmet在常规JS文件中也要提供JSX代码片段。

只需将以下内容放入您的设置文件中：

"emmet.syntaxProfiles": {
    "javascript": "jsx"
}
3
2
链接 500 并且插件不再可用。 - Andy Ray
1

点击 VS Code 编辑器右下角的JavaScript，您将看到一个选择语言模式的选项，在这里您可以搜索JavaScriptReact并进行选择。 就是这样。

对我来说有效，谢谢！ - acg
0

1-按下 F1 键（在 Visual Studio Code 中）

2-在出现的文本字段中键入“extension”

3-选择“Extensions: Install Extension”

4-键入“ext install jsx”

5-安装 JS JSX Snippets

6-重新启动 Visual Studio Code

-2
1
这对*.js文件有效吗？我尝试安装了这个，但似乎并没有帮助处理XML样式错误。 - sethreidnz
2
这个扩展似乎是一个TextMate JSX.tmLanguage文件的包装器。正如提问者已经指出的那样，VSCode已经支持JSX的高亮显示，他们只需要在JS文件上这样做，而不仅仅是JSX。因此，安装这个扩展可能没有帮助。 - djabraham
是的，据我所知，这个扩展实际上并没有做任何事情。而且我也无法找到联系这个作者的方式。我很想在vsCode中进行React开发（在我看来，WebStorm相比之下真的很糟糕）...还有其他人有什么好的建议吗？ - sethreidnz
-6

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

ln -s index.ios.js index.ios.jsx
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接