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

Question

我一直在尝试找到一种正确的方法来突出显示'.js'文件中的React Code，以便在Visual Studio Code中更容易阅读。下面的照片显示了一个样本文件，其中有很多是一种颜色，这使得它很难阅读。

我尝试使用TwentyChung的“jsx”扩展和“react-beautify”，但它们都没有奏效。有人可以帮忙吗？ ： - ）

Answer 1

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

Answer 2

将VS CODE颜色主题更改为Dark +，并将底部状态栏中的语言更改为Java脚本反应。这对我有用

Answer 3

对我来说这是行之有效的

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

https://code.visualstudio.com/download

2。打开Vscode点击扩展名并搜索该扩展名

Javascript Atom Gramar

Just disable the extension.

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

希望这对以后的工作有所帮助

Answer 4

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会自动修改语法突出显示，但这并不完美。您还可以通过点击底部工具栏右侧的自动检测语言来调整检测：