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

IT技术 react-jsx visual-studio-code
2021-03-23 05:01:54

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

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

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

6个回答

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

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

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

Ctrl+ ,-> 用户或工作区设置
2021-05-28 05:01:54
工程,甚至没有重新启动!谢谢
2021-05-30 05:01:54
它甚至在运行时也有帮助!非常感谢!
2021-05-31 05:01:54
什么文件,在哪里?
2021-06-04 05:01:54
这会将每个 js 文件变成 react 文件,甚至是像 node module这样的非 react js 文件。也许不是最好的方法...
2021-06-21 05:01:54

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

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

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

1.检查是否选择了 JavascriptReact?? 在此处输入图片说明

为什么我在 vs 编辑器的底部看不到这个?我有最新的 vs 社区更新和最新版本的 react 安装。和所有扩展更新。相反,我看到一行显示一个编译错误和向左/向右箭头以查看错误以及一个“添加到源代码控制 github 行”为蓝色。
2021-05-30 05:01:54
这个问题来自这个选项尚不存在的时候。现在就像你说的那么简单。
2021-06-18 05:01:54

我可以做到,但“不是 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 文件,然后重新打开。
对于 Windows10 上的版本 0.10.1,要编辑的文件已更改。C:\Program Files (x86)\Microsoft VS Code\resources\app\extensions\javascript\package.json. 并添加".js"contributes.languages[0].extensions.
2021-05-23 05:01:54
@KoheiSugimura 你的解决方案奏效了,但我也不得不从contributes.languages[1].extensions 中删除.js,然后它就奏效了!
2021-05-23 05:01:54
对于其他想知道的人,在 Mac 上的路径是:/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.tmLanguage
2021-05-30 05:01:54
它对我有用。在 Mac 上,还在此文件的数组列表中添加了“js”:/Applications/Visual Studio Code.app/Contents/Resources/app/extensions/javascript/syntaxes/JavaScriptReact.t‌ mLanguage <array> <string>jsx</string> <string>js</string> </array>
2021-06-16 05:01:54

我花了一段时间才弄清楚这一点,但是——JSX 已经是 Emmet 的一部分——它是 VS Code 的一部分。我已经告诉 Emmet(另外)在常规 JS 文件中提供 JSX 片段。

只需将其放入您的设置文件中:

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

尽管 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(这将覆盖用户设置)。

谢谢你。感谢作品没有任何狄奥尼的副作用。
2021-05-25 05:01:54