PET Redação – Analisando seu código Javascript usando ESLint

PorYuri Becker

PET Redação – Analisando seu código Javascript usando ESLint

Devido a grande quantidade de linhas, funções e arquivos de código, até mesmo desenvolvedores mais experientes podem acabar cometendo alguns erros simples, mas difíceis de se encontrar. Falta de ponto e vírgula, variáveis declaradas mas nunca utilizadas,  ou até mesmo escritas de forma errada são problemas comuns. Com base nesses problemas, foram criadas ferramentas que auxiliam na análise do seu código, facilitando a busca por problemas de codificação ou indentação. Essas ferramentas são conhecidas como Linters, e analisam nosso código em busca de possíveis erros.  Na análise de códigos Javascript a ferramenta mais utilizada é o ESLint

O ESLint tem como pré-requisitos o Node.js e o NPM (Node Package Manager).  Primeiramente inicializamos o projeto com o seguinte comando para criarmos um arquivo package.json na pasta do projeto onde será utilizado o ESLint.  

$ npm init

Depois de digitar o comando, responda as perguntas referentes ao seu projeto ou apenas deixe tudo em branco. Após isso você já pode instalar o ESLint utilizando o seguinte comando na pasta do projeto:

$ npm install eslint --save-dev

Para iniciar as configurações do ESLint digite:

$ ./node_modules/.bin/eslint --init

Após digitar o comando ele irá perguntar como você deseja utilizá-lo:

E após isso, irá perguntar qual tipo de módulo você utiliza no seu projeto:

E também se você utiliza algum framework (React ou Vue) no seu projeto:

Selecione também onde sua aplicação irá rodar:

Após essas perguntas sobre seu ambiente de desenvolvimento e configurações do seu projeto, você vai ter três opções para definir o seu estilo de código:

Recomendo que escolha a primeira opção, pois ela permite que você escolha entre os principais estilos de códigos utilizados por empresas como a Google, Airbnb ou utilizando o StandardJs.

E por fim, selecione qual o formato que você deseja no arquivo de configurações do ESLint.

Caso escolha o formato JSON, seu arquivo de configurações ficará parecido com o da figura abaixo

Nesse exemplo eu escolhi seguir o estilo de código da Airbnb, que pode ser consultado no seguinte link. Após tudo configurado chegou a hora de testar a ferramenta.

Primeiramente criaremos um arquivo.js e colocamos nosso código javascript que será testado como no exemplo abaixo:

 

Então rodamos o comando de execução passando o nome do nosso arquivo criado anteriormente

$ ./node_modules/.bin/eslint nomeDoArquivo.js

E como resultado temos:

Como podemos ver, o ESLint nos informou de vários erros do nosso código, como a falta de ponto e vírgula, variáveis usadas que não foram declaradas, variáveis Let que poderiam ser declaradas como Const, etc…

Você pode deixar que ele tente corrigir alguns dos erros utilizando o comando: 

$ ./node_modules/.bin/eslint noDoArquivo.js --fix

Após a correção automática do ESLint, sobraram apenas três erros que ele não conseguiu resolver

E voltando ao código, agora temos:

O ESLint arrumou a maioria dos erros, declarou as variáveis que não alteravam seu valor como “const”, colocou ponto e vírgula no final dos comandos e todas strings entre aspas simples. Claro que você pode usar tanto aspas simples como duplas, colocar ou não colocar ponto e vírgula no final dos comandos em Javascript, porém o estilo de código da Airbnb define que se deve utilizar dessa maneira. Caso você prefira de outra forma pode optar por utilizar outros estilos de códigos como o da Google, StandardJs ou até mesmo definir o seu próprio estilo e garantir que seu código siga um mesmo padrão.

Como não é muito prático ficar digitando o comando no terminal para verificar cada modificação nos seus arquivos procurando por erros, você pode instalar a extensão do ESLint no seu editor de texto e ver os erros em tempo real. 

Para baixar a extensão, escolha o link de acordo com o seu editor de texto

Dessa forma o seu código ficará assim:

No VS Code, você pode ver as mensagens de erro na parte inferior:

O ESLint se destaca principalmente quando você precisa trabalhar em um projeto com mais pessoas, onde pode haver divergências sobre várias práticas de codificação. Utilizar um linter de código garante um código mais padronizado e com menos chances de bugs. 

 

Feedback e publicações anteriores

Caso você tenha interesse em ler as edições anteriores do PET Redação ou conhecer um pouco mais sobre o trabalho desenvolvido pelo PET-SI não deixe de conferir nossa página. Antes de você partir gostaríamos também de pedir que você nos ajude, respondendo o formulário de avaliação abaixo. Esse formulário nos ajuda a moldar nossas atividades para melhor atender os nossos leitores.

Comentários não são aceitos para este Post!!!