Formatter in VsCode for React

Question

当我用Ctrl+Shift+F保存或格式化我的React代码时，下面的代码以一种奇怪的方式格式化。

我该如何解决这个问题?

默认代码:

import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Hello CodeCademy
</a>
</header>
</div>
);
}
export default App;

格式化代码后:

import logo from './logo.svg';
import './App.css';
function App() {
return ( <
div className = "App" >
<
header className = "App-header" >
<
img src = { logo }
className = "App-logo"
alt = "logo" / >
<
p >
Edit < code > src / App.js < /code> and save to reload. <
/p> <
a className = "App-link"
href = "https://reactjs.org"
target = "_blank"
rel = "noopener noreferrer" >
Hello CodeCademy <
/a> <
/header> <
/div>
);
}
export default App;

我试图安装另一个格式化程序，并进入我的设置以删除我的"html"twig"emmet.

Answer 1

按以下步骤操作:

1. CTRL + SHIFT + P
2. 格式化文档(在弹出栏中)
3. 选择Format Document
4. 选择Configure Default Formatter...
5. 选择Prettier - Code formatter

启用Format On Save

1. CTRL + SHIFT + P
2. 首选项打开设置(UI)(在弹出栏)
3. 类型Format On Save
4. 如果未选中，则启用Format On Save

完成了!

Answer 2

下载VSCode的Prettier扩展。阅读本文。

Answer 3

我有同样的问题，即使这样，我已经安装了pretier扩展。它显示后来我有另一个扩展名为JS-CSS-HTML Formatter。我卸载了JS-CSS-HTML Formatter保持更漂亮，所有问题都解决了。

这里也提到了这个问题。