在 Visual Studio Code 中设置正确的 React Code 突出显示？答案

【问题标题】：Setting up proper React Code highlighting in Visual Studio Code?在 Visual Studio Code 中设置正确的 React Code 突出显示？
【发布时间】：2017-01-01 21:42:09
【问题描述】：

我一直在尝试找到一种在“.js”文件中突出显示 React Code 的正确方法，以便在 Visual Studio Code 中更容易阅读。下面的照片显示了一个示例文件，其中有多少是一种颜色，难以阅读。

我尝试使用 TwentyChung 的“jsx”扩展和“react-beautify”，但它们都不起作用。有人可以帮忙吗？ :-)

【问题讨论】：

您可以在底部栏中将语言模式设置为JavaScript React（单击显示“JavaScript”的位置）吗？我对 VSCode 突出显示 React 没有任何问题，而且我还没有真正做任何事情来配置它。它对我来说几乎是开箱即用的。我唯一做的就是将以下内容添加到用户配置中："javascript.validate.enable": false，因为编辑器在设置为 true 时会阻塞某些 es6 结构（扩展运算符、箭头函数等）。
谢谢！我在答案中提供了有关问题所在的更多详细信息

标签： javascript reactjs visual-studio-code

【解决方案1】：

JSX 突出显示在 VS 代码中开箱即用，并且 JSX 文件已经与 JavaScript React 语言模式相关联。如果要在 .js 文件中启用 JSX 语法着色，请单击状态栏中的语言名称并选择 JavaScript React 语言模式。如果您不想每次都这样做，也可以将 .js 文件与 JavaScript React 关联。确保您拥有最新版本的 VS Code。

【讨论】：

原来问题是我以某种方式启用了“Javascript Atom Gramar”包，它使所有代码都没有突出显示。禁用它后，一切都按照您的指示正常运行！
另外，您需要使用与 React 语法兼容的主题。在切换到 Community Material Theme 之前，我看到渲染的返回是一种颜色。
在我将 VS Code Workbench 颜色主题更改为 Dark+ 后，它也对我有用。如果有支持JavaScript React语言模式的主题列表就好了。

【解决方案2】：

将 VS CODE 颜色主题更改为 Dark+ 并将底部状态栏中的语言更改为 java script react。这对我有用

【讨论】：

我相信将底部状态栏中的语言更改为 JavaScript React 是唯一需要的操作！

【解决方案3】：

对我来说这是有效的

通过下载最新版本来更新 vscode

https://code.visualstudio.com/download

2.打开Vscode点击扩展，搜索这个扩展

Javascript Atom Gramar

Just disable the extension.

3.关闭并打开vscode，现在你应该在你的jsx代码中看到颜色了。

希望这对将来的某些人有所帮助

【讨论】：

【解决方案4】：

我刚刚将它添加到settings.json，它对我有用，所以你可以试一试。

"files.associations": {
        "*.js": "typescriptreact"
}

【讨论】：

【解决方案5】：

禁用名为 Javascript Atom Grammar 的扩展程序为我工作

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。
请至少描述您已采取的步骤。

【解决方案6】：

VS Code 通过扩展来突出代码，而不是使用 ESLint 或 Prettier，它们有时被认为可以完成这项工作。开箱即用，VS Code 支持React and JSX natively。您还可以调整 VS Code 的 settings.json 文件。下面是一个示例：

{
    "window.zoomLevel": 0,

    // Solarized-dark theme
    "workbench.colorTheme": "Solarized-dark",

    // Changes the highlight color in solarized-dark, which I can't see
    "workbench.colorCustomizations": {
      "editor.selectionBackground": "#5b455e",
      "editorBracketMatch.border": "#555",
      "editorBracketMatch.background": "#5b455e"
    },

    // Number of spaces in a tab
    "editor.tabSize": 2,

    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,

    // Override whatever the files say and give me 2 spaces per tab
    "editor.detectIndentation": false,
    "workbench.startupEditor": "newUntitledFile",
    "explorer.confirmDelete": false,
    "explorer.confirmDragAndDrop": false,
    "javascript.updateImportsOnFileMove.enabled": "always"
  }

VS Code 会自动修改语法高亮，但并不完美。您也可以通过点击底部工具栏右侧的自动检测语言来调整检测：

【讨论】：