Javascript VS用新行格式化JSX代码_Javascript_Reactjs_Visual Studio Code_Vscode Settings_Prettier

Javascript VS用新行格式化JSX代码

javascript reactjs visual-studio-code

Javascript VS用新行格式化JSX代码,javascript,reactjs,visual-studio-code,vscode-settings,prettier,Javascript,Reactjs,Visual Studio Code,Vscode Settings,Prettier,我最近开始使用React进行编码，我立即注意到VS-Code正在按如下方式格式化我的React文件，这导致了来自linter的各种警告 Index.js 类应用程序扩展组件{ render（）{ 报税表（< div className=“应用程序”> < header className=“应用程序头”> < img src={ 标志 } className=“应用程序徽标” alt=“logo”/> < p> 编辑src/App.js并保存以重新加载/ p>< a className=“应用程

我最近开始使用React进行编码，我立即注意到VS-Code正在按如下方式格式化我的React文件，这导致了来自linter的各种警告

Index.js

类应用程序扩展组件{
render（）{
报税表（<
div className=“应用程序”>
<
header className=“应用程序头”>
<
img src={
标志
}
className=“应用程序徽标”
alt=“logo”/>
<
p>
编辑src/App.js并保存以重新加载/
p><
a className=“应用程序链接”
href=”https://reactjs.org"
target=“\u blank”
rel=“noopener noreferrer”>
学习反应<
/a> <
/div>
);
}
}

我很难在应用程序中找到更漂亮的设置或其他导致此问题的设置，有什么建议吗

扩展（注意WSL Ubuntu Windows）

支架对着色剂
Chrome调试器
Javascript（ES6）代码片段
反应硝基片段
Reactjs代码片段
远程无线传感器网络
Vue主题
自动刷新器
美化
城市灯光图标包
VS代码的编辑器配置
埃斯林特
Github请求和问题
GitLens-Git增压
进口成本
实时服务器
npm
智能感知
路径智能感知
更漂亮的代码格式化程序
反应扩展包
反应硝基必需品
搜索节点单元
声纳棉
维图尔
vue美化

VS代码关于块：

版本：1.48.0-insider（用户设置）
提交：459610f3ef11b956968afadff704bad3bc1a0de2
日期：2020-08-04T12:40:10.231Z
电子：7.3.2
铬：78.0.3904.130
Node.js:12.8.1 V8:7.8.279.23-electron.0
操作系统：Windows\u NT x64 10.0.18363

Prettier:JSX括号同一行

设置

按
```
Ctrl+Shift+P
```
（windows）或
```
Cmd+Shift+P
```
（Mac）
键入
```
将文档格式化为…
```
选择
```
Configure default Formatter…
```
选择一个选项以继续设置格式。（如果选择vs代码的内置格式工具，最好禁用/删除其他代码格式扩展）
选择所有
```
Ctrl+A
```
（Windows）或
```
Cmd+A
```
（Mac），然后按
```
Ctrl+K Ctrl+F
```
（Windows）或
```
Cmd+K Cmd+F
```
格式化文档

按
```
Ctrl+Shift+P
```
（windows）或
```
Cmd+Shift+P
```
（Mac）
键入
```
将文档格式化为…
```
选择
```
Configure default Formatter…
```
选择一个选项以继续设置格式。（如果选择vs代码的内置格式工具，最好禁用/删除其他代码格式扩展）
选择所有
```
Ctrl+A
```
（Windows）或
```
Cmd+A
```
（Mac），然后按
```
Ctrl+K Ctrl+F
```
（Windows）或
```
Cmd+K Cmd+F
```
格式化文档

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

{
 // I want my default to be 4, but JavaScript/JSON to be 2
 "editor.tabSize": 4,
 "[javascript]": {
  "editor.tabSize": 2
 },
"[json]": {
 "editor.tabSize": 2
 },

 // This one forces the tab to be **space**
"editor.insertSpaces": true
}

"editor.insertSpaces": false,
"editor.tabSize": 4,
"editor.detectIndentation": false,

"prettier.tabWidth": 4,
"prettier.useTabs": true  // This made it finally work for me

{
 // I want my default to be 4, but JavaScript/JSON to be 2
 "editor.tabSize": 4,
 "[javascript]": {
  "editor.tabSize": 2
 },
"[json]": {
 "editor.tabSize": 2
 },

 // This one forces the tab to be **space**
"editor.insertSpaces": true
}

按
```
Ctrl+Shift+P
```
（Win）或
```
Cmd+Shift+P
```
（Mac）
使用…键入格式文档
然后单击配置默认格式化程序。。。然后从列表中选择它

按
```
Ctrl+Shift+P
```
（Win）或
```
Cmd+Shift+P
```
（Mac）
使用…键入格式文档
然后单击配置默认格式化程序。。。然后从列表中选择它