blocks|key|430106|text|更改用户设置或工作区设置，如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|430107|//+Place+your+settings+in+this+file+to+overwrite+the+default+settings
{
++++"files.associations":+{
++++++++"*.js":+"javascriptreact"
++++}
}|code-block|syntax|javascript|430108|注意:您可能需要重新启动VSCode。|430109|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Change your user settings or workspace settings as below:

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

Note: You might need to restart VSCode.

blocks|key|1594636|text|我觉得下面是格式化代码的最简单的方法|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594637|点击右下角的VS代码编辑器，上面写着Javascript。|1594638|您将看到选择语言模式的选项，在这里您可以搜索JavaScriptReact并选择。就这样。这应该能解决你的问题。|1594639|1.|1594640|📷|atomic|offset|length|1594641|1594642|​|1594643|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://developer.qcloudimg.com/http-save/yehe-900000/34681a7e3714a2dd49f79716ed692462.png|imageAlt|1|https://developer.qcloudimg.com/http-save/yehe-900000/a87a37832a38849f61920b165c680f08.png^0|0|0|0|0|0|1|0|0|0|1|1|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|12|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|13|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|14|8|@]|9|@$K|15|L|16|1|17]]|A|$]]|$1|M|3|I|5|J|7|18|8|@]|9|@$K|19|L|1A|1|1B]]|A|$]]|$1|N|3|O|5|6|7|1C|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|1D|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W|X|-4]]|Y|$5|S|T|U|A|$V|Z|X|-4]]]]

I would feel the below is the easiest way of formatting the code

Click on the bottom right on VS Code Editor where it says Javascript.

You will see an option to Select the language Mode, here you can search for JavaScriptReact and select. That's it. This should solve your problem.

1.<a href="https://i.stack.imgur.com/Ch2kv.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ch2kv.png" alt="Check if JavascriptReact is selected??"></a>
<a href="https://i.stack.imgur.com/kah3X.png" rel="noreferrer"><img src="https://i.stack.imgur.com/kah3X.png" alt="enter image description here"></a>

blocks|key|1044004|text|我可以这样做，但“没有反应JS文件”也是用JavaScriptReact模式显示的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1044005|打开文件C:\Program+(x86)\Microsoft+VS+Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json+(可能需要以管理员权限打开)。|ordered-list-item|1044006|将数组"fileTypes“中的"jsx”更改为"js“。|1044007|重新启动应用程序，关闭打开的js文件，然后重新打开。|1044008|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|M|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|O|8|@]|9|@]|A|$]]]|J|$]]

I could do it, but "not React JS files" are also show with JavaScriptReact mode.

<ol>
<li>open file C:\Program Files (x86)\Microsoft VS Code\resources\app\plugins\vs.language.javascript\syntaxes\javascriptreact.json
(probably, need to open with administrator privileges.)</li>
<li>change "jsx" to "js" in array "fileTypes".</li>
<li>restart app, close opened js files, and reopen.</li>
</ol>

blocks|key|1044181|text|我花了一段时间才弄明白这一点，但- JSX已经是Emmet的一部分--这是VS代码的一部分。我告诉Emmet还(另外)在常规JS文件中提供JSX片段。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1044182|只需将其放入您的设置文件：|1044183|"emmet.syntaxProfiles":+{
++++"javascript":+"jsx"
}++++|code-block|syntax|javascript|1044184|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Took me a while to figure this out but – JSX is already part of Emmet – which is part of VS Code. I've told Emmet to also (additionally) make JSX snippets available in regular JS files.

Just put this in your settings file: 

<pre><code>"emmet.syntaxProfiles": {
 "javascript": "jsx"
} 
</code></pre>

blocks|key|1594559|text|虽然Dionys的答案有效，但是在Visual代码的最新版本中有更好的方法来实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594560|转到File>Prefrences>Settings，然后向下滚动并找到"Emmet“，打开选项卡，您将看到以下文本|offset|length|style|CODE|1594561|++//+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":+{},|code-block|syntax|javascript|1594562|因此，只需按照说明并在右侧面板的json上添加"emmet.includeLanguages":+{+"javascript":+"javascriptreact"+}+(这将覆盖用户设置)。|1594563|entityMap^0|0|2|O|0|0|N|1P|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Although Dionys' answer works there is a better way to do this in more recent versions of Visual Studio Code.

Go to <code>File&gt;Prefrences&gt;Settings</code> and then scroll down and find "Emmet" open the tab and you should see the following text

<pre><code> // 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": {},
</code></pre>

So just follow the instructions and add <code>"emmet.includeLanguages": { "javascript": "javascriptreact" }</code> on the json at the right panel ( which will overwrite the user settings ).

blocks|key|430084|text|现在有一个文件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|430085|不幸的是，扩展的自述文件也发出了警告：|430086|安装此扩展名时，您将失去为.js文件提供的所有现有语言支持。|blockquote|430087|幸运的是，VS代码现在非常接近采用萨尔萨，这意味着js+jsx问题很快就会完全解决。|430088|entityMap|0|LINK|mutability|MUTABLE|url|https://marketplace.visualstudio.com/items/eg2.js-is-jsx|1|http://blogs.msdn.com/b/user_ed/archive/2016/01/11/visual-studio-code-new-features-4-language-improvements-javascript-typescript-jsx-amp-tsx.aspx^0|5|2|0|0|0|0|F|5|1|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|Z|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|K|3|-4|5|6|7|14|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]|S|$5|N|O|P|C|$Q|T]]]]

There is now a <a href="https://marketplace.visualstudio.com/items/eg2.js-is-jsx" rel="nofollow">VS Code extension that allows <code>.js</code> files to be treated as <code>.jsx</code> files</a>.

Unfortunately the readme for the extension also warns:

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

Fortunately VS Code is now very close to <a href="http://blogs.msdn.com/b/user_ed/archive/2016/01/11/visual-studio-code-new-features-4-language-improvements-javascript-typescript-jsx-amp-tsx.aspx" rel="nofollow">adopting Salsa</a>, which means soon the js-is-jsx issue should be completely resolved.

blocks|key|1044289|text|1-按F1+(在代码中)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1044290|2-出现文本字段中的“扩展”类型|1044291|3-选择“扩展:安装扩展”|1044292|3-输入"ext安装jsx“|1044293|4-安装JS+JSX片段|1044294|5-重新启动Visual代码|1044295|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|P|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Q|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|R|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|S|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|M|$]]

1-Press F1 (in Visual Studio Code)
2-Type &quot;extension&quot; in the appearing text field
3-Pick &quot;Extensions: Install Extension&quot;
3-Type &quot;ext install jsx&quot;
4- install JS JSX Snippets
5-Restart Visual Studio Code

blocks|key|1594701|text|单击VS代码编辑器上的右下角，其中显示Javascript。您将看到选择语言模式的选项，在这里您可以搜索JavaScriptReact并选择。，就这样，|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|1594702|entityMap^0|B|3|J|A|1G|F|1Z|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]|$9|O|A|P|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|G|$]]

Click on the bottom right on VS Code Editor where it says Javascript. You will see an option to Select the language Mode, here you can search for JavaScriptReact and select.
That's it.

blocks|key|1594382|text|只需安装一个分机：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1594383|按F1+(在代码中)|unordered-list-item|1594384|在出现的文本字段中键入"extension“|1594385|选择“扩展:安装扩展”|1594386|键入"ext+install+jsx“|1594387|重新启动Visual代码|1594388|来源：|1594389|https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx+https://marketplace.visualstudio.com/items/TwentyChung.jsx|offset|length|1594390|entityMap|0|LINK|mutability|MUTABLE|url|https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx|1|https://marketplace.visualstudio.com/items/TwentyChung.jsx^0|0|0|0|0|0|0|0|0|2B|0|2C|1M|1|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|13|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|14|8|@]|9|@]|A|$]]|$1|G|3|H|5|D|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$]]|$1|K|3|L|5|D|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|19|8|@]|9|@$Q|1A|R|1B|1|1C]|$Q|1D|R|1E|1|1F]]|A|$]]|$1|S|3|-4|5|6|7|1G|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

Just install an extension:

<ul>
<li>Press F1 (in Visual Studio Code)</li>
<li>Type "extension" in the appearing text field</li>
<li>Pick "Extensions: Install Extension"</li>
<li>Type "ext install jsx"</li>
<li>Restart Visual Studio Code</li>
</ul>

Source:

<a href="https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&amp;ext=jsx" rel="nofollow">https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&amp;ext=jsx</a>
<a href="https://marketplace.visualstudio.com/items/TwentyChung.jsx" rel="nofollow">https://marketplace.visualstudio.com/items/TwentyChung.jsx</a>

blocks|key|1044020|text|尝试在Mac或Linux上使用链接。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1044021|ln+-s+index.ios.js+index.ios.jsx|code-block|syntax|javascript|1044022|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try using link on Mac or Linux.

<pre><code>ln -s index.ios.js index.ios.jsx
</code></pre>

Visual Studio Code now <a href="https://code.visualstudio.com/Updates#_languages-jsx-colorization">supports JSX on 0.8 version</a>, but looks like the only way to activate it is with a <code>.jsx</code> file extension. It is not on the list to change the language mode manually, the nearest option is <code>JavaScriptReact</code>, but it doesn't parse the JSX tags.

I'm in a project with a lot of <code>.js</code> files with JSX and I can't change it.

Is there any other way to use JSX syntax without the <code>.jsx</code> extension?

Change language to JSX in Visual Studio Code

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

Visual现在是，但是激活它的唯一方法是使用.jsx文件扩展名。它不在列表中手动更改语言模式，最近的选项是JavaScriptReact，但它不解析JSX标记。我在一个带有很多.js文件的项目中，我无法改变它。在没有.jsx扩展的情况下，还有其他方法来使用JSX语法吗？

问在Visual代码中将语言更改为JSX
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Visual代码中将语言更改为JSXEN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Visual代码中将语言更改为JSX
EN