VS Code 使用新行格式化 JSX

Question

我最近开始使用 React 进行编码，我立即注意到 VS Code 正在按如下方式格式化我的 React 文件，这会导致 linter 发出各种警告。

索引.js

class App extends Component {
  render() {
    return ( <
      div className = "App" >
      <
      header className = "App-header" >
      <
      img src = {
        logo
      }
      className = "App-logo"
      alt = "logo" / >
      <
      p >
      Edit < code > src / App.js < /code> and save to reload. < /
      p > <
      a className = "App-link"
      href = "https://reactjs.org"
      target = "_blank"
      rel = "noopener noreferrer" >
      Learn React <
      /a> < /
      header > <
      /div>
    );
  }
}

我在应用程序中找不到更漂亮的设置或导致此问题的任何其他设置，有什么建议吗？

扩展（注意 WSL Ubuntu Windows）

• 支架对着色器
• Chrome 调试器
• JavaScript (ES6) 代码片段
• 反应硝基片段
• Reactjs 代码片段
• 远程-WSL
• Vue主题
• 自动前缀器
• 美化
• 城市之光图标包
• VS Code 的编辑器配置
• ESLint
• Github 拉取请求和问题
• GitLens - Git 增压
• 进口成本
• 实时服务器
• 新项目管理
• npm 智能感知
• 路径智能感知
• Prettier - 代码格式化程序
• 反应扩展包
• 反应硝基要点
• 搜索节点模块
• 声纳林特
• 维图尔
• vue-美化

VS Code 关于块：

• 版本：1.48.0-insider（用户设置）
• 提交：459610f3ef11b956968afadff704bad3bc1a0de2
• 日期：2020-08-04T12:40:10.231Z
• 电子：7.3.2
• 铬：78.0.3904.130
• Node.js：12.8.1 V8：7.8.279.23-电子.0
• 操作系统：Windows_NT x64 10.0.18363

Answer 1

您需要选择默认格式化程序。

1. 按Ctrl+Shift+P(Win) 或Cmd+Shift+P(Mac)
2. 输入格式文档...
3. 然后单击“配置默认格式化程序...”并从列表中选择它。