Prettier extension in VS code is not working, I tried everything including yt tutorials and what ever i did nothing helped

Question

im desperate, finaly made myself study some react and guess what, cant even start cuz suddenly my settings are messed up. When ever I try to save to auto format nothing happens. I really tried everything from here on stackoverflow and even yt but nothing really helped...Gonna show you my code: this is how it looks like after I press ctrl+s to save the file and to format it...

Like a week ago everything worked well and somehow I messed up the settings. Would be helpful if someone sent me his settings.json because Ive tried some Ive found on google and none helped. I really wanna study React but this wont let me. I know I can use codesandblox but its not it...Thx in advance...

Answer 1

You need to set your default formatter to Prettier and enable format on save.

Default Formatter To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language. The following will use Prettier for only Javascript.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Format On Save Respects editor.formatOnSave setting.

You can turn on format-on-save on a per-language basis by scoping the setting:

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

Answer 2

{
    "git.autofetch": true,
    "terminal.explorerKind": "external",
    "files.autoSave": "afterDelay",
    "terminal.integrated.profiles.windows":{"Git Bash":{"path":"C:\\Program Files\\Git\\bin\\bash.exe"},  },
"terminal.integrated.defaultProfile.windows": "Git Bash",
"editor.formatOnSave": true,
"html.format.indentHandlebars": true,
"html.format.indentInnerHtml": true,
"settingsSync.ignoredExtensions": [
],
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
}