如何在 Visual Studio 代码中配置设置，以便更漂亮地为 react.js 工作

Question

当我按save 时，代码如下所示。
我不想让prettierrc.json 行动，我也不想ESLINT。

我已经安装了可视化代码扩展 Prettier Code Formatter 并将 editor.formatonSave 更改为 true

       "editor.formatOnSave": true,
      "[javascript]": {
        "editor.formatOnSave": false,
      },
      "[javascriptreact]": {
        "editor.formatOnSave": false,
      },
      "[typescript]": {
        "editor.formatOnSave": false,
      },
      "[typescriptreact]": {
        "editor.formatOnSave": true,
      }
    }

例子

    import React from "react";
    import "./App.css";

    import Ball from "./Ball";
    import Lottery from "./Lottery";

    function App() {
      return ( <
        div className = "App" >
        <
        Lottery / >
        <
        Lottery title = "Mini Daily"
        maxNum = {
          10
        }
        maxBalls = {
          4
        }
        /> <
        /div>
      );
    }

    export default App;

Answer 1

这就是我所做的，安装了 Prettier 扩展后，我将其添加到了我的 settings.json：

"[javascriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": false }

我实际上将我的设置为 true，因为我确实希望它格式化我的 .jsx 文件（注意我使用扩展名 .jsx 而不是 .js）。但是，如果您将其设置为 false，那么您应该很适合您的情况。