How to format react jsx code with vscode?

as detailed in the title:
I am not familiar with the configuration when using vscode for the first time. Ask for advice!

eslint, is currently installed and configured with the following code:

{
    "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
    
    
   
}

wants to implement. After formatting, it is all indented by 4 spaces, but it still has no effect, as follows:

so there are two current requirements: 1, to achieve one-click formatting of jsx code; 2, all codes 4 space indentation; in fact, the above user settings have been configured, but I do not know why there is no effect, ask for advice!

Apr.05,2021

you can install a prettier plug-in. Have you solved the problem when setting "prettier.tabWidth": 4


? As long as I want to know formatting, it's hard to break lines if you don't support jsx grammar with beautify formatting.


install the prettier plug-in and create a new file in the root directory of the project. Prettierrc

{

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

}

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1ea5175-47af1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1ea5175-47af1.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?