VSCode плохое форматирование JavaScript

Question

Я редактирую некоторые файлы javascript (в частности, responsejs coed) в VS Code на Ubuntu 18.04.Однако «форматирование» действительно ужасно.

До:

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, и форматировщик был великолепен.Есть ли расширение, которое мне не хватает?Или что я тут не так делаю.Для форматирования я использую сочетание клавиш «Формат документа».

Вот мои текущие расширения:

Answer 1

Я лично использую Prettier для форматирования JS и CSS, а JSX Snippets для JSX в React.Я пробовал много других, но с этими двумя я могу заверить вас, ваш код React будет выглядеть красиво.

Answer 2

Виновником такого поведения было расширение Beatify на Vscode в моем случае.Отключение решило проблему .

Answer 3

Я лично рекомендую JS-CSS-HTML Formatter расширение от Lonefy.

Plz см. ссылку здесь.