如何用vscode格式化react的jsx代码？

Question

如题详述：
初次使用vscode还不太熟悉配置，求指教！！！

目前已经安装了eslint，并且配置了如下代码：

{
    "workbench.colorTheme": "Solarized Light",
    "terminal.integrated.rendererType": "dom",
    "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\cmd.exe",
    "eslint.autoFixOnSave": true,
    "eslint.validate": [
        "javascript",
        "javascriptreact", 
        {
        "language": "js",
        "autoFix": true
        },
        {
        "language": "react",
        "autoFix": true
        }
    ],
    "editor.renderIndentGuides": true,
    "editor.tabSize": 4,
    "editor.detectIndentation": false
    
    
   
}

想实现，格式化后都是4个空格缩进，可依然没有效果，还是下面这样：

所以目前需求就两个：1、实现一键格式化jsx代码；2、所有代码4空格缩进；其实上面用户设置里已经配置了，可不知为何没效果，求指教！！！

Answer 1

可以装个 prettier 插件，在设置 "prettier.tabWidth": 4

Answer 2

安装 prettier 插件，项目根目录新建文件 .prettierrc

{

"eslintIntegration": true,
"stylelintIntegration": true,
"tabWidth": 4,
"singleQuote": true,
"semi": false

}

Answer 3

请问问题解决了吗？我只要想知道格式化的，装了beautify格式化不支持jsx语法会换行 很难受。。。