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

在我的例子中，这种行为的罪魁祸首是 Vscode 上的 Beatify 扩展。禁用解决了这个问题。

Answer 2

这是解决方案，

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

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

干杯！

Answer 3

我个人使用Prettier进行 JS 和 CSS 格式化，并使用JS JSX Snippets进行 React 中的 JSX。我已经尝试了很多其他方法，但是通过这两个，我可以向你保证你的 React 代码看起来会很漂亮。