Como configurar o Prettier no Visual Studio Code

Escrever um código limpo e legível é essencial, esteja você trabalhando sozinho ou com uma equipe de desenvolvedores. Embora muitos fatores contribuam para a legibilidade do código, um dos mais importantes é a formatação consistente do código.

Mas aqui está o problema: a formatação manual do código pode ser uma dor absoluta e muito propensa a erros. Ferramentas como o Prettier facilitam muito a formatação de HTML, CSS, JavaScript e outras linguagens. Descubra como instalar e usar a extensão Prettier para formatação de código, bem como algumas configurações avançadas.

Instalando o Prettier

Antes de prosseguir, certifique-se de ter o Node.js instalado em seu computador. Você pode instalar a versão mais recente do página oficial de downloads do Node.js. Vem com o gerenciador de pacotes do nó (npm) integrado, que você usará para gerenciar seus pacotes Node.js.

Depois de confirmar que o Node.js está instalado localmente, comece criando um diretório vazio para o seu projeto. Você pode nomear o diretório demonstração mais bonita.

Em seguida, cd para esse diretório usando uma linha de comando e, em seguida, execute o seguinte comando para inicializar um projeto Node.js:

npm init -y

Este comando gera um arquivo package.json contendo as configurações padrão.

Para instalar a extensão Prettier, execute este comando de terminal:

npm i --save-dev mais bonito

O --save-dev flag é instalado de maneira mais bonita como uma dependência de desenvolvimento, o que significa que é usado apenas durante o desenvolvimento.

Agora que você o instalou, pode começar a explorar como o Prettier funciona usando-o na linha de comando.

Usando o Prettier via linha de comando

Comece criando um script.js arquivo e preenchê-lo com o seguinte código:

funçãosoma(a, b) { retornar a + b }
const usuário = { nome: "Kyle", idade: 27,
 éProgramador: verdadeiro,
 LongKey: "Valor",
 maisDados: 3
}

Para formatar o código neste arquivo script.js por meio da linha de comando, execute o seguinte comando:

npx mais bonito --escrever script.js

O comando reformata o código JavaScript em script.js para o padrão padrão do Prettier. Este será o resultado:

funçãosoma(a, b) {
retornar a + b;
}
const usuário = {
 nome: "Kyle",
 idade: 27,
 éProgramador: verdadeiro,
 LongKey: "Valor",
 maisDados: 3,
};

Você também pode formatar a marcação HTML na linha de comando. Criar um index.html arquivo no mesmo diretório que script.js. Em seguida, cole o seguinte HTML mal formatado no arquivo:

"" alt=""aula="ícone do tempo grande">

aula="currentHeaderTemp"><período>21período></div>
</div>
 </header>

Para formatar o HTML, execute este comando:

npx mais bonito --write index.html

Este comando reformata o HTML para o padrão padrão do Prettier, o que resulta no seguinte código:

<cabeçalho>
<div>
<imgorigem=""alternativo=""aula="ícone do tempo grande" />
<divaula="currentHeaderTemp"><período>21período>div>
div>
cabeçalho>

Você também pode usar o --verificar sinalizador para verificar se o código está em conformidade com os padrões do Prettier. O exemplo a seguir verifica script.js:

npx mais bonita --verifique script.js

Isso é útil se você deseja um gancho de pré-confirmação para garantir que as pessoas estejam usando o Prettier e formatando os arquivos antes de enviá-los para o Git. Isso funciona bem quando contribuindo para o código aberto.

Integrando o Prettier ao código do Visual Studio

Usar o Prettier via linha de comando pode ser uma dor. Em vez de executar manualmente um comando sempre que quiser formatar o código, você pode configurá-lo para formatar automaticamente quando alterar um arquivo. Felizmente, o Visual Studio Code (VS Code) tem uma maneira integrada de fazer isso para você.

Vou ao Extensões aba no VS Code e procure por mais bonita. Clique em Prettier - Formatador de código, instale-o e ative-o.

Acesse as configurações do VS Code navegando até Arquivo > Preferências > Configurações. Na caixa de pesquisa, procure por mais bonita. Você encontrará várias opções para ajudá-lo a configurar a extensão Prettier.

Normalmente, você pode conviver com as configurações padrão. A única coisa que você pode considerar mudar são os pontos-e-vírgulas (você pode removê-los se quiser). Caso contrário, tudo está definido como padrão, mas você pode alterá-lo como quiser.

Certifique-se de habilitar o formatonsave opção para que o código em cada arquivo seja formatado automaticamente quando você salvar esse arquivo. Para ativá-lo, basta procurar por formatonsave e marque a caixa.

Se você não estiver usando o VSCode ou a extensão não estiver funcionando por algum motivo, você pode baixe a biblioteca onchange. Isso executa o comando para formatar o código sempre que você alterar o arquivo.

Como ignorar arquivos ao formatar com o Prettier

Se você fosse correr o mais bonito --escrever comando em toda a sua pasta, ele passaria por cada um dos seus módulos de nó. Mas você não deveria perder tempo formatando o código de outras pessoas!

Para contornar esse problema, crie um .prettierignore arquivar e incluir o termo node_modules no arquivo. Se você fosse executar o --escrever comando em toda a pasta, reformataria todos os arquivos, exceto aqueles no node_modules pasta.

Você também pode ignorar arquivos com uma extensão específica. Por exemplo, se você quiser ignorar todos os arquivos HTML, basta adicionar *.html para .prettierignore.

Como configurar o mais bonito

Você pode configurar como deseja que o Prettier funcione com diferentes opções. Uma maneira é adicionar um mais bonita chave para o seu pacote.json arquivo. O valor será um objeto contendo todas as opções de configuração:

{
 ...
"scripts": {
"teste": "echo \"Erro: nenhum teste especificado\" && exit 1"
 },
 mais bonita: {
// opções vão aqui
 }
}

A segunda opção (que recomendamos) é criar um .prettierrc arquivo. Este arquivo permitirá que você faça todos os tipos de personalizações.

Digamos que você não goste de ponto e vírgula. Você pode removê-los colocando o seguinte objeto no arquivo:

{
"semi": verdadeiro,
"substitui": [
 {
"arquivos": ".ts",
"opções": {
"semi": falso
 }
 }
 ]
}

O substitui A propriedade permite definir substituições personalizadas para determinados arquivos ou extensões de arquivo. Neste caso, dizemos que todos os arquivos terminados em .ts (ou seja, arquivos datilografados) não devem ter ponto e vírgula.

Usando Prettier com ESLint

ESLint é uma ferramenta de linting para detectar erros no código JavaScript, bem como formatá-lo. Se você estiver usando o Prettier, provavelmente não gostaria de usar o ESLint para formatação também. Para usá-los juntos, você precisará instalar e configurar eslint-config-prettier. Essa ferramenta desativa todas as configurações do ESLint para coisas que o Prettier já manipula.

Primeiro, você precisa instalá-lo:

npm i --save-dev eslint-config-prettier

Em seguida, adicione-o à lista extends no .eslintrc arquivo (certifique-se de que é a última coisa na lista):

{
"estende": [
"algum-outro-config-você-usa",
"mais bonita"
 ],
"regras": {
"recuar": "erro"
 }
}

Agora o ESLint desabilitará todas as regras que o Prettier já está cuidando para evitar conflitos.

Limpe sua base de código com Prettier e ESLint

O Prettier é uma ferramenta ideal para limpar seu código e impor uma formatação consistente em um projeto. Configurá-lo para funcionar com o VS Code significa que está sempre ao seu alcance.

O ESLint é uma ferramenta JavaScript obrigatória que anda de mãos dadas com o Prettier. Ele fornece vários recursos e opções de personalização que vão além da formatação básica. Aprenda a usar ESLint com JavaScript se quiser ser um desenvolvedor mais produtivo.