VSCode糟糕的JavaScript格式化

Question

我可以帮助翻译，以下是需要翻译的内容：

我正在Ubuntu 18.04上使用VS Code编辑一些JavaScript文件（特别是ReactJS代码）。然而，格式非常糟糕。

之前：

import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';

class App extends Component {

    render() {
        return (
            <div className="App">
                <Dropzone onDrop={this.onDrop} />
            </div>
        );
  }
}

export default App;

之后：

import React, {
    Component
} from 'react';
import './App.css';
import Dropzone from 'react-dropzone';

class App extends Component {

    render() {
        return ( <
            div className = "App" >
            <
            Dropzone onDrop = {
                this.onDrop
            }
            /> <
            /div>
        );
    }
}

export default App;

之前我在Windows 10上使用VS Code编辑这些文件，并且格式化工具非常好用。我是否缺少某个扩展程序？或者在这里我做错了什么。我使用“格式化文档”键盘快捷方式进行格式化。

以下是我的当前扩展程序：

- bremen_matt

Answer 1

在我的情况下，导致这种行为的罪魁祸首是在 Vscode 上的 Beatify 扩展程序。禁用该扩展程序即可解决此问题。请参考链接：issue。

- shaytac

Answer 2

这里是解决方案：

1. 手动将语言更改为“javaScript React”

2. 尝试使用您喜欢的格式化程序（您可以安装 VS Code 扩展，例如“Prettier”、“beautify”）

干杯！

- janadari ekanayaka

Answer 3

我个人使用Prettier来格式化JS和CSS，以及JS JSX Snippets来处理React中的JSX。我尝试过很多其他工具，但是这两个工具可以确保您的React代码看起来非常美观。

- Mirakurun