como?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
como?
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:
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/