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

Posted 2023-02-22

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

【英文标题】：How to configure the settings in visual studio code for prettier to work for react.js

【发布时间】：2020-02-05 00:38:18

【问题描述】：

当我按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;

【参考方案1】：

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

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

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