Prettier: simplificando a formatação do código no VS Code
Prettier é uma ferramenta brilhante que torna meu código mais consistente e legível. Ele faz isso automaticamente adicionando um guia de estilo ao meu projeto. Além disso, ele se integra ao meu editor para limpar meu trabalho toda vez que eu o salvo. Ter uma ferramenta de formatação padrão em meu editor de código é útil, pois garante que eu não perca tempo formatando meu trabalho. Isso me dá mais tempo para focar nos aspectos centrais do projeto e evitar ficar atolado em intermináveis linhas de código. O Prettier também me ajuda a evitar erros em meu código, facilitando a identificação de onde os blocos começam e terminam.
Se você está pensando em usar o Prettier no Visual Studio Code (VS Code), você veio ao lugar certo. Aqui, explicarei tudo o que você precisa saber sobre essa ferramenta de formatação padrão.
Instalando o Prettier no VS Code
Para usar o Prettier no VS Code, você deve instalar a extensão seguindo estas etapas:
- Abra o VS Code e clique no ícone Extensões.
- Digite “Prettier” na barra de pesquisa e clique no ícone da lupa.
- Selecione a extensão oficial do Prettier na lista.
- Pressione o botão “Instalar”.
- Depois de instalado, pressione o botão Recarregar para concluir o processo.
Agora a extensão Prettier está instalada no VS Code.
Formatando um documento
Com o Prettier instalado, agora você pode usá-lo para formatar seu código. Você pode fazer isso manualmente para cada documento ou configurá-lo para que o código seja formatado automaticamente ao salvar. Exploraremos os dois métodos.
Formatação manual do documento no VS Code usando o Prettier
- Abra o centro de comando pressionando Command + Shift + P no Mac ou Control + Shift + P no Windows.
- Pesquise por “Formatar” na barra de pesquisa e escolha “Formatar documento”.
- Selecione o formato de sua preferência nas opções disponíveis e clique em “Definir”.
- Clique em “Prettier – Code Formatter” para formatar o código.
Seu documento agora terá as quebras de linha, aspas simples e espaços apropriados. Esse processo também funciona para arquivos CSS.
Formatação automática de documentos no VS Code usando o Prettier
- Abra o menu de configurações do VS Code tocando em Command +, (vírgula) no Mac ou Control +, (vírgula) no Windows.
- Vá para a barra de pesquisa e digite “Editor: Formatar ao salvar”.
- Certifique-se de que está marcado.
Agora o Prettier configurará e formatará automaticamente seu código quando você o salvar. Isso garantirá que as aspas simples sejam usadas e que o comprimento da linha seja ajustado corretamente. Essas alterações serão aplicadas a todos os seus projetos, o que pode não ser ideal se você estiver trabalhando em equipe. Nesse caso, você pode instalar o alternador de formato do Prettier para ativar e desativar a ferramenta conforme necessário.
Configurando o Prettier no VS Code
O Prettier oferece várias opções de formatação por padrão, mas você também pode definir as configurações de acordo com suas preferências. Por exemplo, você pode escolher entre aspas simples e duplas, ou incluir ou não ponto e vírgula. Veja como definir as configurações do Prettier no VS Code:
- Vá para Configurações clicando em Command +, (vírgula) no Mac ou Control +, (vírgula) no Windows.
- Pesquise por “Prettier” para ver uma lista de configurações exibidas.
- Faça as alterações desejadas no editor e clique em “Salvar”.
Agora suas configurações do Prettier serão ajustadas às suas preferências.
Formate o documento no VS Code usando o Prettier CLI
A CLI do Prettier permite que você formate todo o seu projeto de uma só vez. Para instalá-lo no marketplace do VS Code, use o seguinte comando:
npm install prettier --global
Em seguida, atualize seu código usando este comando:
prettier “*/.ts” --write
Isso é tudo! Seu projeto agora será formatado usando o Prettier CLI. Observe, no entanto, que embora seja conveniente de usar, a CLI pode dificultar o uso de alguns arquivos, como arquivos afetados pelo git que o Prettier já modificou.
Mais beleza com um único clique
Com o Prettier, você pode criar de maneira fácil e eficaz um método simples para formatar manualmente seu código. Você também pode simplificar automaticamente seu trabalho ao salvá-lo. Essa ferramenta que economiza tempo é fácil de configurar no VS Code e permite que você se concentre no essencial.
Você já usou o Prettier no VS Code? Qual tem sido sua experiência? Conte-nos nos comentários abaixo.
