VScode弄乱了JSX格式（美化）

Question

我安装了此插件：https : //github.com/HookyQR/VSCodeBeautify

这是我的代码

import React, { Component } from 'react';

export default class TempInput extends Component {
  render() {
    return (
      <div>
                <input
          value={temperature}
          onChange={this.handleChange} />


      </div>
    );
  }
}

单击Ctrl + Shift + I之后，首先我收到消息

无法确定要美化的类型，请选择。

然后，它允许我从HTML，JS，CSS中进行选择。当我选择JS时，这是我得到的结果：

import React, {
  Component
} from 'react';

export default class TempInput extends Component {
  render() {
    return ( <
      div >
      <
      input value = {
        temperature
      }
      onChange = {
        this.handleChange
      }
      />


      <
      /div>
    );
  }
}

知道为什么吗？语言模式在VScode中设置为JS / React。

---

如果我卸载该插件并单击Ctrl + Shift + I，则会收到此错误

找不到命令'HookyQR.beautifyFile'

Answer 1

您不需要为此使用插件；将语言模式设置为JavaScript React并调用本机Format Document命令（通常绑定到alt+shift+F）应该可以解决问题。