-
Instale o
prettier
no projeto:-
npm i -D prettier
-
-
Instale a extensão do
prettier
no VSCode;- ID da extensão:
esbenp.prettier-vscode
- ID da extensão:
-
Crie uma pasta na raiz do projeto chama
.vscode
com um novo arquivo chamadosettings.json
-
Coloque o seguinte conteúdo no arquivo
settings.json
:-
{ "editor.codeActionsOnSave": { "source.fixAll": true }, "files.eol": "\n", "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } }
-
-
Hora de testar o
prettier
, digite algo nosrc/main.js
e salve com oCtrl + S
-
Habilite o auto save do VSCode, clicando em
File > Auto Save
.- Note que o auto save não formata o código, só quando usamos o
Ctrl + S
diretamente.
- Note que o auto save não formata o código, só quando usamos o
-
Crie um arquivo na raiz do projeto chamado
.prettierrc.json
e coloque o seguinte conteúdo:-
{ "trailingComma": "all", "singleQuote": true, "endOfLine": "lf", "tabWidth": 4, "arrowParens": "avoid", "printWidth": 80 }
-
-
Com o arquivo de configuração do
prettier
estando no formato JSON é possível usar o atalhoCtrl + Espaço
para ter um autocomplete com os nomes das chaves que oprettier
aceita; -
Volte para o arquivo
main.js
e apenas salve com oCtrl + S
;- Note que o
quote
muda de aspas duplas para aspas simples.
- Note que o