VS 代码用新行格式化 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>

    );

  }

}

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

扩展（注意 WSL Ubuntu Windows）

• 括号对着色器

• Chrome 调试器

• Javascript (ES6) 代码片段

• 反应硝基片段

• Reactjs 代码片段

• 远程-WSL

• 主题

• 自动前缀

• 美化

• 城市之光图标包

• VS 代码的编辑器配置

• ESLint

• Github 拉取请求和问题

• GitLens - Git 增压

• 进口成本

• 直播服务器

• npm

• npm 智能感知

• 路径智能感知

• Prettier - 代码格式化程序

• 反应扩展包

• 反应硝基要点

• 搜索节点模块

• 声纳林特

• 冬天

• vue-美化

Answer 1

您需要选择默认格式化程序。按Ctrl+Shift+P(Win) 或Cmd+Shift+P(Mac)键入格式化文档...然后单击Configure Default Formatter...并从列表中选择它。

Answer 2

你应该下载 Prettier。然后转到“设置”并选中（复选框）“更漂亮：JSX 支架同一行”它应该运行良好

Answer 3

只需在 VS CODE 上安装 Preitter Extensions，它将重新格式化所有文件

Answer 4

这可能是由于 vs code 中可用的格式工具存在冲突。为了解决这个按Ctrl+Shift+P(windows) 或Cmd+Shift+P(Mac)类型Format Document With...选择Configure default Formatter...为以后的格式选择一个选项。（如果你选择的是 vs code 的内置格式工具，最好禁用/删除其他代码格式扩展）选择全部Ctrl+A(Windows) 或Cmd+A(Mac)，然后按Ctrl+K Ctrl+F(windows) 或Cmd+K Cmd+F来格式化文档。

Answer 5

如果您在 Visual Studio Code 中使用更漂亮的扩展，请尝试将其添加到 settings.json 文件中："editor.insertSpaces": false,"editor.tabSize": 4,"editor.detectIndentation": false,"prettier.tabWidth": 4,"prettier.useTabs": true&nbsp; // This made it finally work for me好吧，如果您喜欢开发人员方式，Visual Studio Code 允许您为 tabSize 指定不同的文件类型。这是我的 settings.json 示例，默认有四个空格，JavaScript/JSON 有两个空格：{&nbsp;// I want my default to be 4, but JavaScript/JSON to be 2&nbsp;"editor.tabSize": 4,&nbsp;"[javascript]": {&nbsp; "editor.tabSize": 2&nbsp;},"[json]": {&nbsp;"editor.tabSize": 2&nbsp;},&nbsp;// This one forces the tab to be **space**"editor.insertSpaces": true}