📌  相关文章
📜  Instala o Prettier no desenvolvimento - Shell-Bash (1)

📅  最后修改于: 2023-12-03 15:15:50.586000             🧑  作者: Mango

Instalação do Prettier no Desenvolvimento - Shell/Bash

O Prettier é uma ferramenta de formatação de código JavaScript que ajuda a manter um estilo de código consistente em projetos compartilhados entre diversos desenvolvedores. Ele é capaz de formatar automaticamente o código, aplicando regras de estilo predefinidas.

Este guia fornecerá instruções sobre como instalar o Prettier no ambiente de desenvolvimento usando o Shell/Bash.

Pré-requisitos

Antes de começar, é necessário garantir que você tenha o Node.js e o npm (gerenciador de pacotes do Node.js) instalados em seu ambiente.

Instalação do Prettier

Siga os passos abaixo para instalar o Prettier em seu projeto:

  1. Abra o terminal (Shell/Bash).
  2. Navegue até o diretório raiz do seu projeto.
  3. Execute o seguinte comando para instalar globalmente o Prettier usando o npm:
npm install --global prettier

Ao executar esse comando, o npm irá baixar e instalar o Prettier no seu sistema.

  1. Verifique se o Prettier foi instalado corretamente executando o seguinte comando:
prettier --version

Isso exibirá a versão do Prettier instalada, confirmando que a instalação foi concluída com sucesso.

Configuração do Prettier

A configuração do Prettier é opcional, mas recomendada para personalizar as regras de formatação de acordo com suas preferências.

  1. Crie um arquivo chamado .prettierrc no diretório raiz do seu projeto.
  2. Abra o arquivo .prettierrc em um editor de texto e defina as regras de formatação desejadas. Por exemplo:
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 80
}

Nesse exemplo, estamos configurando o Prettier para adicionar ponto e vírgula no final de cada linha, utilizar aspas simples em vez de duplas, usar 2 espaços para indentação e limitar a largura de impressão de cada linha em 80 caracteres.

Utilizando o Prettier

Após a instalação e configuração, você pode usar o Prettier para formatar um arquivo ou um diretório inteiro.

  1. No terminal, navegue até o diretório onde o arquivo/diretório que você deseja formatar está localizado.
  2. Execute o seguinte comando para formatar um arquivo específico:
prettier arquivo.js --write

Substitua "arquivo.js" pelo caminho e nome do arquivo que você deseja formatar.

  1. Para formatar todos os arquivos em um diretório e seus subdiretórios, execute:
prettier . --write

Isso formatará todos os arquivos com as regras definidas no .prettierrc.

Automatizando com Git Hooks

Uma prática recomendada é automatizar a formatação do código utilizando Git Hooks, para garantir que o código seja automaticamente formatado antes de ser enviado ao repositório. Você pode configurar um hook de pré-commit para formatar automaticamente os arquivos modificados antes de efetuar o commit.

  1. No diretório raiz do seu projeto, acesse o diretório .git/hooks.
  2. Crie (ou abra se já existir) um arquivo chamado pre-commit.
  3. Adicione o seguinte script ao arquivo:
#!/bin/sh
exec < /dev/tty

echo "Running Prettier..."
prettier . --check
if [ $? -ne 0 ]; then
  echo -e "\\n\\033[1;31mErro: O código não está formatado corretamente pelo Prettier.\\033[0m\\n";
  exit 1;
fi

exit 0;

Esse script irá executar o Prettier com o comando --check, que verificará se o código está formatado corretamente. Se alguma violação for encontrada, o script exibirá uma mensagem de erro e impedirá o commit.

  1. Salve o arquivo e feche-o.

Agora, sempre que você realizar um commit, o Git irá executar o hook pré-commit e verificará se o código está formatado corretamente pelo Prettier. Caso contrário, o commit será cancelado até que as violações sejam corrigidas.

Conclusão

Parabéns! Agora você tem o Prettier instalado em seu ambiente de desenvolvimento, possibilitando a formatação automatizada do seu código JavaScript. Lembre-se de utilizar o Prettier regularmente para manter um estilo de código consistente e facilmente legível.