Uso do Prettier

No caso do prettier, não consegui achar nenhum atalho pra ele, então possivelmente esse atalho esteja relacionado a outra funcionalidade.

Talvez seja interessante conferir nas configurações do seu VSCode se o Default Formatter está configurado para ser o Prettier.

Outra coisa que pode ser útil também é, das duas uma: usar o Command Palette pra rodar o comando Format Document ou, nas configurações do VSCode, ativar a opção Format On Save para formatar o arquivo sempre que salvá-lo.

O Prettier está configurado como formatter padrāo, e, como eu disse, tentei com ele e com o Beautify sempre com o mesmo resultado. Mesma coisa acontece quando tento formatar quando o arquivo é salvo.

Para arquivos .html e .css ele funciona sem erros, já no React ele buga da forma como mostrei.

Olha cara, eu dei uma pesquisada aqui e tenho 2 sugestões se você quiser testar:

1. Desinstalar/desativar o Beautify, porque pode ser um conflito entre os dois plugins;
2. No settings.json do seu VSCode, colocar o defaultFormatter especificamente do javascript (ou javascriptreact, se usar a extensão .jsx) como sendo o Prettier.

Pra fazer fazer isso é só adicionar o seguinte no seu settings.json:

"[javascript]": {  // Ou [javascriptreact]
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Fantastico. Provavelmente era um conflito entre os dois pois bastou desativar o beutify.

Muito obrigado Heitor