Artigo original: Don’t just lint your code - fix it with Prettier
O uso de linting (verificação de código) facilita nossas vidas pois nos diz o que há de errado no código. Como podemos, no entanto, evitar a realização do trabalho que passamos para consertar o código?
Anteriormente, já escrevi sobre linting (texto em inglês), sobre o que ele é e sobre como ele facilita nossas vidas. No fim, eu cheguei a recomendar um modo de consertar o código automaticamente. Assim sendo, por que eu estou escrevendo este artigo?
O que você quer dizer com consertar o código?
Antes de nos aprofundarmos no assunto, vamos tratar disso rapidamente. Linters são muito poderosos e fornecem um modo fácil de verificar o código para ver se há erros de sintaxe que podem levar a bugs. Eles também podem, simplesmente, ajudar a manter uma base de código limpa, saudável e consistente. Ao executarmos um linter, ele mostrará todos os problemas e permitirá que examinemos um por um, individualmente, para consertarmos os erros.
Podemos levar isso um nível adiante. Alguns linters, de fato, permitirão que você passe um argumento ao comando que executa o linter que ajudarão a consertar o erro "automagicamente". Isso quer dizer que você não precisa examinar o código manualmente e fazer os ajustes finos de espaços em branco e de pontos-e-vírgulas (tendo de adicionar um por um) por conta própria!
O que mais eu posso fazer para consertar tudo?
Se você já usou a opção de consertar, temos um bom ponto de partida. No entanto, há algumas ferramentas que foram desenvolvidas especificamente para lidar com esse problema para além de apenas sinalizá-lo no seu comando. Hoje, tratarei do Prettier.
O que é o Prettier?
Prettier considera a si mesmo "um formatador de código com opinião formada". Ele recebe seu código como entrada e o retorna um uma formatação consistente, removendo qualquer estilo do código original e substituindo pelo seu. Ele, de fato, converte seu código em uma árvore sintática, reescrevendo-o em seguida usando estilos e regras que você e o próprio Prettier fornecem por meio da configuração do seu ESLint e das regras padrão do Prettier.
Você pode usar o Prettier facilmente por conta própria apenas para formatar seu código. Isso já funciona bem. No entanto, se você combiná-lo com um processo de ESLint operando em conjunto, terá tanto um linter poderoso como um consertador de códigos de respeito. Mostrarei a você como fazer para que eles funcionem juntos.
Noções básicas do Prettier
Para este passo a passo, vou assumir que você já tem o ESLint configurado e preparado para uma aplicação. Particularmente, vou começar de onde eu parei em meu passo a passo anterior, onde instalamos o ESLint para uma aplicação do React (texto em inglês).
Também é bom ressaltar que o Prettier nos diz já de início que ele é um formatador de código com opinião formada . Você deve esperar que ele formate seu código de maneira consistente, mas talvez de um modo diferente daquele que você configurou até agora. Não se assuste! Você pode ajustar essa configuração.
De onde estamos começando? Nós já:
- instalamos o ESLint
- adicionamos o Babel como nosso parser de código
- adicionamos um plug-in que inclui configurações do React
Em seguida, vamos começar instalando alguns pacotes:
yarn add prettier prettier-eslint prettier-eslint-cli -DObservação: o comando acima é semelhante ao do npm. Se o seu projeto não usa o yarn, troque por npm onde for apropriado.
Acima, instalamos:
- prettier: o pacote principal do Prettier e sua engine
- prettier-lint: passa o resultado do Prettier para o ESLint para que ele o conserte usando sua configuração do ESLint
- prettier-eslint-cli: ajuda o Prettier e o ESLint a trabalharem juntos em diversos arquivos por todo o seu projeto
É importante notar que estamos instalando tudo isso como dependências de desenvolvimento, pois não precisaremos delas depois disso.
Configurando seu novo formatador
Agora que nossos pacotes estão instalados, podemos solicitar ao yarn que execute esse código para nós.
Anteriormente, definimos um script de lint para que tivesse esta aparência no package.json:
"scripts": {
...
"lint": "eslint . --ext .js"
...
}Vamos deixar isso como está, mas faremos algo parecido e criaremos um script próximo a isso, chamado format, para nosso formatador, o Prettier:
"scripts": {
...
"format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'",
"lint": "eslint . --ext .js"
...
}O que está ocorrendo aqui? Estamos:
- Adicionando um novo script chamado
format, que pode ser executado comyarn format - utilizando o pacote
prettier-eslint-clipara executar a formatação para nós - passando nossa configuração do ESLint, localizada ao lado do nosso
package.json, na raiz do projeto (altere o caminho se estiver em um local diferente) - e, por fim, dizendo ao Prettier que reescreva todos os artigos que tenham
**/*.jscomo correspondência, ou quaisquer arquivos de JS que sejam encontrados recursivamente em nosso projeto
A beleza está no fato de que estamos passando nossa configuração do ESLint para o Prettier. Isso quer dizer que precisamos apenas manter uma configuração para ambas as ferramentas e que ainda podemos aproveitar do poder de verificação do ESLint, juntamente do poder formatador do Prettier.
Execute seu formatador!
Agora que está tudo configurado, vamos executar! Faça isso com o seguinte comando:
yarn format
Veremos que isso funciona imediatamente:
Ei, meu código parece diferente!
Como eu mencionei antes, o Prettier nos avisa de cara que ele é um formatador de código com opinião formada. Ele vem com suas próprias regras, algo como sua própria configuração do ESLint, o que fará com que ele percorra o código e faça essas alterações também.
Não abandone seu código! Em vez disso, você pode revisar as alterações e ver se, talvez, faça sentido mantê-las como estão (elas estarão bastante consistentes) ou você pode atualizar sua configuração do ESLint (.eslintrc.js) para sobrescrever as regras de que você não gosta. Essa também é uma boa maneira de, talvez, aprender algumas coisas novas pelas quais você pode não ter esperado enfrentar.
Onde isso nos deixa, então?
Se você acompanhou até aqui, agora temos dois comandos:
lint: verificará seu código por você e contará o que está erradoformat: tentará automaticamente consertar os problemas para você
Ao usá-los na prática, o mais seguro é sempre executar format primeiro para deixar que ele tente consertar automaticamente tudo o que puder. Em seguida, imediatamente, execute o lint para epgar tudo aquilo que o Prettier não conseguiu consertar automaticamente.
Que faço depois disso?
Agora que podemos formatar nosso código automaticamente, deveremos poder consertar nosso código automaticamente!
Na próxima vez, daremos um passo a mais e configuraremos um hook do git, que permitirá que isso seja executado antes de você fazer o commit. Isso quer dizer que você não terá de se preocupar mais com esquecer de executar esses processos novamente!
Publicado originalmente em https://www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/