VSCode糟糕的javascript格式

Question

我在Ubuntu 18.04上的VS Code中编辑了一些javascript文件（特别是reactjs coed）。然而，“格式化”真的很糟糕。

之前：

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;

以前，我在VS Code中的Windows 10上编辑这些文件，格式化程序很棒。我缺少一个扩展吗？或者我在这里做错了什么。要格式化，我使用“格式文档”键盘快捷键。

这是我目前的扩展：

Answer 1

我个人使用Prettier进行JS和CSS格式化，并将JS JSX Snippets用于React中的JSX。我尝试了很多其他的，但有了这些，我可以向你保证你的React代码会很漂亮。

Answer 2

在我的案例中，这种行为的罪魁祸首是对Vscode的Beatify扩展。禁用解决了issue。

Answer 3

我个人推荐Lonefy的JS-CSS-HTML Formatter扩展。

Plz在这里提到link。