为什么 vscode 没有将反应代码识别为反应 javascript 而是将其格式化为香草 javascript

Question

我正在使用启用了保存格式的 Prettier 但是当我对 App.js 进行任何更改并保存时 Prettier 确实破坏了我的代码，因为它处理它是普通的 javascript

Answer 1

我没有在更漂亮的文档中阅读任何关于 React 的内容

据我了解，react 代码应该放在 .jsx 文件中，而不是 .js

https://reactjs.org/docs/introducing-jsx.html

React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code

Answer 2

如果你也在使用 ESlint，你应该遵循这些步骤...

  yarn add --dev --exact prettier
  yarn add --dev eslint-plugin-prettier

在项目的根目录中创建一个包含以下内容的 .eslintrc 文件

  {
    "extends": "react-app",
    "plugins": ["prettier"],
    "rules": {
      "prettier/prettier": "error"
    }
  }

这应该可以解决问题。

Answer 3

我正在使用 create-react-app，所以它会生成主要组件 App.js 我在其他组件中使用 .JSX，但问题是当我对 App.js

进行任何更改时

我通过更改 Vscode 设置（特定于用户工作区）中的文件关联设置解决了这个问题

我刚刚添加了这一行

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

对我来说效果很好。

Answer 4

Prettier 检查代码的结构，而VSCode 语法代码突出显示控制代码外观。

VS Code 通过扩展而不是 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"
  }

更漂亮的代码格式通常作为服务器的一部分进行控制，作为构建脚本的一部分汇总到 Webpack 或 Parcel 之类的东西中。如果你正在使用 create-react-app 我认为它已经连接了。如果你想调整一些设置，Prettier 使用一个名为 .prettierrc 的简单 JSON 文件，它属于你的根目录项目。

示例.prettierrc：

// Relaxes need for semicolons, lints for single quotes and requires trailing commas
{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "es5"
}

Answer 5

将你的 React 文件重命名为 'jsx' 文件而不是 js 文件，并将你的 vanilla javascript 保留为 js 文件。这样 vs code 和 prettier 就知道你使用的是 react-javascript 而不是正常的 javascript.

为什么 vscode 没有将反应代码识别为反应 javascript 而是将其格式化为香草 javascript

why vscode is not recognizing react code as react javascript instead it format it as vanilla javascript

javascript

reactjs

visual-studio-code

prettier