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

使用一个显式支持JSX的美化工具，如反应-美化或更漂亮。

VSCodeBeautify可能支持JSX，但是它似乎不起作用。见GitHub第132期。