Visual Studio Code现在已经在版本0.8中支持JSX,但似乎唯一激活它的方法是使用.jsx
文件扩展名。它不在手动更改语言模式的列表中,最接近的选项是JavaScriptReact
,但它无法解析JSX标签。
我在一个有很多带有JSX的.js
文件的项目中,而我不能更改文件扩展名。
是否有其他方法可以使用JSX语法而不需要.jsx
扩展名?
Visual Studio Code现在已经在版本0.8中支持JSX,但似乎唯一激活它的方法是使用.jsx
文件扩展名。它不在手动更改语言模式的列表中,最接近的选项是JavaScriptReact
,但它无法解析JSX标签。
我在一个有很多带有JSX的.js
文件的项目中,而我不能更改文件扩展名。
是否有其他方法可以使用JSX语法而不需要.jsx
扩展名?
按照以下步骤更改您的用户设置或工作区设置:
// Place your settings in this file to overwrite the default settings
{
"files.associations": {
"*.js": "javascriptreact"
}
}
注意:您可能需要重新启动VSCode。
Ctrl
+ ,
-> 用户或工作区设置 - Michal Ciechan*.js
更改为*.react.js
。 - Dionys我可以做到,但“不是React JS文件”也会显示为JavaScript React模式。
C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json
。需要在 contributes.languages[0].extensions
中添加 ".js"
。 - Kohei Sugimura虽然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文件中(它会覆盖用户设置)。
我花了一段时间才明白,JSX已经是Emmet的一部分,而Emmet又是VS Code的一部分。我告诉Emmet在常规JS文件中也要提供JSX代码片段。
只需将以下内容放入您的设置文件中:
"emmet.syntaxProfiles": {
"javascript": "jsx"
}
.js
文件视为.jsx
文件。
不幸的是,该扩展的自述文件也警告说:
幸运的是,VS Code现在非常接近采用Salsa,这意味着不久之后js-is-jsx问题应该会完全解决。当您安装此扩展时,您将失去所有提供给.js文件的现有语言支持。
点击 VS Code 编辑器右下角的JavaScript,您将看到一个选择语言模式的选项,在这里您可以搜索JavaScriptReact并进行选择。 就是这样。
1-按下 F1 键(在 Visual Studio Code 中)
2-在出现的文本字段中键入“extension”
3-选择“Extensions: Install Extension”
4-键入“ext install jsx”
5-安装 JS JSX Snippets
6-重新启动 Visual Studio Code
只需安装一个扩展程序:
来源:
https://code.visualstudio.com/docs/editor/extension-gallery?pub=TwentyChung&ext=jsx https://marketplace.visualstudio.com/items/TwentyChung.jsx
请尝试在Mac或Linux上使用链接。
ln -s index.ios.js index.ios.jsx