Não apenas lint seu código - conserte-o com o Prettier

Linting torna nossas vidas mais fáceis porque nos diz o que há de errado com nosso código. Mas como podemos evitar o trabalho real de consertá-lo?

Já escrevi sobre fiapos, o que é e como torna sua vida mais fácil. No final, incluí uma maneira de corrigir automaticamente seu código. Então, por que estou escrevendo isso?

O que quer dizer consertar?

Antes de começarmos, vamos fazer isso rápido. Linters são poderosos e fornecem uma maneira fácil de verificar seu código em busca de erros de sintaxe que possam levar a bugs. Ou podem simplesmente ajudar a manter uma base de código limpa, íntegra e consistente. Quando executado, ele mostrará todos os problemas e permitirá que você analise cada um individualmente para corrigi-los.

Levando isso para o próximo nível, alguns linters realmente permitirão que você passe um argumento para o comando que está executando o linter que permite que ele seja corrigido automaticamente para você. Isso significa que você não precisa percorrer manualmente e fazer todos aqueles pequenos ajustes de espaço em branco e ponto-e-vírgula (adicioná-los!?) Você mesmo!

Então, o que mais posso fazer para consertar as coisas?

Se você já usa a opção de correção, é um bom começo. Mas existem ferramentas que foram desenvolvidas especificamente para lidar com esse problema além de apenas um sinalizador em seu comando. O que vou abordar é o mais bonito.

O que é mais bonito?

Mais bonito se autodenomina "um formatador de código opinativo". Ele pega uma entrada de seu código e a exibe em um formato consistente, eliminando qualquer estilo do código original. Na verdade, ele converte seu código em uma árvore de sintaxe e o reescreve usando os estilos e regras que você e Prettier fornecem juntos por meio de sua configuração ESLint e as regras padrão de Prettier.

Você pode facilmente usar o Prettier sozinho apenas para formatar seu código, o que funciona perfeitamente. Mas se você combinar isso com um processo ESLint subjacente, você obterá um linter poderoso e um fixador poderoso. Vou mostrar a você como fazer esses funcionarem juntos.

Introdução ao Prettier

Para este passo a passo, vou supor que você tenha o ESLint instalado e configurado em um aplicativo. Particularmente, vou continuar de onde parei em meu passo a passo anterior, onde instalamos o ESLint em um aplicativo React.

Além disso, Prettier nos diz desde o início que é um formatador de código opinativo. Você deve esperar que ele formate seu código de uma maneira consistente, mas talvez de uma maneira diferente daquela configurada atualmente. Mas não se preocupe! Você pode ajustar essa configuração.

Então, com o que estamos começando? Nós já:

  • Ter instalado ESLint
  • Adicionou Babel como nosso analisador
  • Adicionou um plugin que inclui configurações React

A seguir, vamos começar instalando alguns pacotes:

yarn add prettier prettier-eslint prettier-eslint-cli -D

Nota: o comando acima é semelhante ao uso npm. Se o seu projeto não usar yarn, troque para npmconforme apropriado.

Acima, estamos instalando:

  • mais bonito: motor e pacote mais bonito do núcleo
  • mais bonito-lint: passa o resultado mais bonito para ESLint para corrigir usando sua configuração ESLint
  • mais bonito-eslint-cli: ajuda Prettier e ESLint a trabalhar juntos em vários arquivos em seu projeto

E estamos instalando-os como uma dependência de desenvolvimento, pois não precisamos disso fora do desenvolvimento.

Configurando seu novo formatador

Agora que nossos pacotes estão instalados, podemos configurar yarnpara executar este comando para nós.

Anteriormente, configuramos um lintscript para ter a seguinte aparência em package.json:

"scripts": { ... "lint": "eslint . --ext .js" ... }

Vamos deixar isso como está, mas faremos algo semelhante e criaremos um novo script bem próximo a ele chamado formatde nosso formatador mais bonito:

"scripts": { ... "format": "prettier-eslint --eslint-config-path ./.eslintrc.js --write '**/*.js'", "lint": "eslint . --ext .js" ... }

Então, o que está acontecendo lá? Estavam:

  • Adicionando um novo script chamado format, que podemos executar comoyarn format
  • Estamos utilizando nosso prettier-eslint-clipacote para executar a formatação para nós
  • Estamos passando nossa configuração ESLint localizada próxima à nossa package.jsonna raiz do projeto (mude isso se estiver em um local diferente)
  • E, finalmente, estamos dizendo mais bonito para escrever todos os arquivos correspondentes **/*.js, ou qualquer arquivo JS que encontrar recursivamente através de nosso projeto

A beleza aqui é que estamos passando nossa configuração ESLint para o Prettier. Isso significa que temos que manter apenas 1 configuração para ambas as ferramentas, mas ainda aproveitamos o poder de linting do ESLint junto com o poder de formatação do Prettier.

Execute seu formatador!

Agora que estamos todos configurados, vamos executá-lo! Execute o seguinte:

yarn format 

e imediatamente, vemos que funciona:

Ei, meu código parece diferente!

Como mencionei antes, Prettier nos diz sem rodeios, é um formatador opinativo. Ele vem com suas próprias regras, mais ou menos como sua própria configuração ESLint, por isso também fará essas alterações.

Não abandone seu código! Em vez disso, você pode revisar as mudanças, ver se talvez faça sentido mantê-lo assim (será muito consistente) ou você pode atualizar sua configuração ESLint ( .eslintrc.js) para sobrescrever as regras que você não gosta. Essa também é uma boa maneira de aprender algumas coisas novas que você não esperava ver antes.

Então, onde isso nos deixa?

Se você acompanhou até agora, agora temos dois comandos:

  • lint: que verificará seu código para você e informará o que há de errado
  • format: tentará automaticamente consertar os problemas para você

Ao usá-los na prática, sua melhor aposta é sempre correr formatprimeiro para deixá-lo tentar consertar automaticamente tudo o que puder. Em seguida, corra imediatamente lintpara pegar qualquer coisa que Prettier não foi capaz de corrigir automaticamente.

Qual é o próximo?

Agora que podemos formatar nosso código automaticamente, devemos ser capazes de consertar nosso código automaticamente!

Na próxima vez, daremos um passo adiante e configuraremos um gitgancho que permitirá que isso seja executado antes de você cometer. Isso significa que você nunca mais terá que se preocupar em se esquecer de executá-lo novamente!

Siga-me para mais Javascript, UX e outras coisas interessantes!

  • ? Siga me no twitter
  • ? ️ Assine o meu Youtube
  • ✉️ Inscreva-se no meu boletim informativo

Originalmente publicado em //www.colbyfayock.com/2019/11/dont-just-lint-your-code-fix-it-with-prettier/