Como pedir para o Prettier formatar?

Oi, Luiz, tudo bem?

No Vscode, há a extensão que você instala para que o prettier faça as formatações no sue código, e em projetos, eu crio um arquivo .prettierrc e defino as configurações, segue a minha:

{
  "arrowParens": "avoid",
  "endOfLine": "lf",
  "printWidth": 120,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

E você pode configurar de acordo com a formatação que você gosta de utilizar.

Qualquer dúvida, é só falar!

Olá,

Você coloca na raiz do projeto? Eu instalei o Prettier, estou usando react e o que estou querendo fazer é identar da seguinte forma:

<Button type="submit" variant="contained" color="primary">Cadastrar</Button>

gostaria que ele ficasse assim:

<Button
                type="submit"
                variant="contained"
                color="primary">
                    Cadastrar
</Button>

Separasse os atributos em linhas diferentes. Pode me ajudar?

Nós podemos configurar o prettier para formatar automaticamente o código todas as vezes que salvamos um arquivo.

Para funcionar dessa maneira precisamos:

1. A extensão do prettier instalada no VSCode
2. Configurar o VScode para formatar usando o prettier
3. Configurar o VScode para formatar a cada vez que salvamos

opcionalmente podemos configurar o prettier para nosso próprio padrão de projeto.

Você pode instalar o prettier a partir do marketplace do vscode: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Depois disso vá para as configurações do vscode (settings.json). Você pode acesar ela pressionando as teclas ctrl+shift+p, simultaneamente, e digitando settings.json, e em seguida apertando enter.

Lá cole o seguinte código:

"editor.formatOnSave": true,
 "editor.defaultFormatter": "esbenp.prettier-vscode",

(tem que estar dentro das chaves { } )

salve e após isso, a cada vez que você salvar um arquivo o vscode formatará utilizando o prettier!

Para mais informações consulte a documentação oficial do prettier https://prettier.io/

Muito obrigado! Dei uma olhada na documentação oficial e descobri que tem uma opção chamada printWidth. O valor padrão é 80 e este é o número de caracteres antes do prettier quebrar em multiplas linhas.

No meu caso não sei porque estava configurado para 120, provavelmente algum projeto que eu baixei do github e acabei reusando o arquivo de configuração. Só mudei para 50 e funcionou. Costumo usar Shift + Alt + F para identar.

Testei e este foi o resultado:

function TestePrettier() {
  return (
    <input type="text" className="ok" name="teste" placeholder="Testando prettier " />
  );
}

ficou assim:

function TestePrettier() {
  return (
    <input
      type="text"
      className="ok"
      name="teste"
      placeholder="Testando prettier "
    />
  );
}

Existe uma ferramenta no site do prettier para configurar e visualizar o resultado. https://prettier.io/playground/