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）应该可以解决问题。

Answer 2

使用明确支持JSX的美化工具，例如react-beautify或prettier。

VSCodeBeautify可能支持JSX，但似乎是它不起作用的情况。请参阅GitHub Issue 132。

VScode混乱JSX格式（美化）

2 个答案: