VScode 弄乱 JSX 格式（美化）答案

【问题标题】：VScode messes JSX format (beautify)VScode 弄乱 JSX 格式（美化）
【发布时间】：2018-05-25 16:49:35
【问题描述】：

我安装了这个插件：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”

【问题讨论】：

标签： javascript reactjs visual-studio-code

【解决方案1】：

您不需要为此使用插件：Change Language Mode 命令 (Ctrl + KM) 提供 @ 987654322@ 选项，基本上是JS支持JSX。

Native Format Document 命令（通常绑定到 Alt + Shift + F）然后就可以了。

【讨论】：

ctrl+shift+i 在卸载该插件时给了我该错误消息，这似乎有效。
是的，它可能会发生：卸载的插件会将其设置保留在用户配置中，有时它甚至很有用。调用Open Keyboard Shorcuts 并查找不需要的extension.。

【解决方案2】：

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

VSCodeBeautify 可能支持 JSX，但似乎在某些情况下它不起作用。见GitHub Issue 132。

【讨论】：

我会检查更漂亮的，首先似乎没有市场。
我们在我们的项目中使用了 prettier - 像魅力一样工作