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

如題詳述：
初次使用vscode還不太熟悉配置，求指教?。。?/p>

目前已經(jīng)安裝了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
    
    
   
}

想實(shí)現(xiàn)，格式化后都是4個(gè)空格縮進(jìn)，可依然沒有效果，還是下面這樣：

所以目前需求就兩個(gè)：1、實(shí)現(xiàn)一鍵格式化jsx代碼；2、所有代碼4空格縮進(jìn)；其實(shí)上面用戶設(shè)置里已經(jīng)配置了，可不知為何沒效果，求指教?。?！