Detectar problemas em JavaScript automaticamente com o ESLint

Ao escrever JavaScript, passo muito tempo corrigindo erros básicos. Muitas vezes, renomeio uma variável e testo meu aplicativo, e depois descubro que não renomeei a variável em um único local. Renomeio funções, a mesma coisa. Digito coisas erradas e, mais uma vez, perco tempo clicando no navegador.

O sentimento é sempre o mesmo – Por que cometi esse erro? novamente? Programo há mais de 15 anos e sou ainda continuam fazendo isso.

É por isso que adoro a ESLint. É como programar junto com outra pessoa que presta mais atenção a isso do que eu. “Ei, o senhor esqueceu de renomear isso”. “Ei, o senhor não deveria fazer isso”.

O ESLint é uma ferramenta que analisa seu código e aponta os problemas que encontra. Ela pode encontrar bugs, áreas com problemas em potencial, estilos de codificação ruins e problemas estilísticos. E o melhor de tudo é que ela é altamente configurável, portanto, se o senhor não concordar com ela em algum ponto, pode mandá-la calar a boca.

Deixe-me mostrar-lhe um exemplo real de como o uso da ESLint o beneficiará.

Instalação e configuração

Antes de prosseguirmos, precisamos instalar o ESLint. Como na maioria das ferramentas JS atuais, o senhor precisa do nodejs para fazer isso. Depois de configurado, execute…

npm install -g eslint

Isso fará com que o programa eslint disponível na linha de comando.

Um exemplo da vida real

Para explicar os benefícios do ESLint, mostrarei aos senhores um exemplo real de uma base de código em que trabalhei. Analisaremos o código e poderemos ver o que a ESLint faz com ele para facilitar nossa vida.

O arquivo JavaScript de exemplo é mostrado abaixo. Não se preocupe com o uso do AngularJS nele – o senhor poderá usar essas técnicas com qualquer biblioteca ou estrutura.

var module = angular.module('uploader', []);
/**
 * XMLHttpRequest wrapper that supports file upload progress since $http doesn't
 *
 * Usage similar to $http, returns a promise from the send method
 */
module.service('uploader', ['$q', function($q) {
  function readyStateChange(deferred, xhr) {
    if(xhr.readyState == 4) {
      if(xhr.status == 200) {
        deferred.resolve(JSON.parse(xhr.responseText));
      }
      else {
        deferred.reject('HTTP status ' + xhr.status);
      }
    }
  }
 
  function onProgress(deferred, xhr, ev) {
    if(ev.lengthComputable) {
      deferred.notify({ loaded: ev.loaded, total: ev.total });
    }
  }
 
  return {
    send: function(url, data) {
      var fd = new FormData();
      for(var k in data) {
        fd.append(k, data[k]);
      }
 
      var d = $q.defer();
 
      var xhr = new XMLHttpRequest();
 
      xhr.open('POST', url, true);
      xhr.onreadystatechange = readyStateChange.bind({}, d, xhr);
      xhr.upload.onprogress = onProgress.bind({}, d, xhr);
      xhr.send(fd);
 
      return d.promise;
    }
  };
}]);

Esse é um componente básico para fazer upload de arquivos. O código é funcional, mas vamos ver o que acontece quando deixamos o ESLint fazer uma tentativa.

Um ponto de partida típico com o ESLint é primeiro analisar seu código com ele e observar o resultado. Abaixo está o resultado do ESLint para o módulo de exemplo.

Nesse ponto, a saída contém erros que não deveriam estar lá, como Angular não está definido e XMLHttpRequest não está definido.

Por que o ESLint está reclamando do XMLHttpRequest? Certamente ele não deveria fazer isso, porque XMLHttpRequest é padrão. Bem, o XMLHttpRequest é apenas padrão no navegador. Outros ambientes, como o NodeJS, talvez não o tenham. Portanto, a primeira etapa é informar ao ESLint que nosso código será executado no navegador.

Para fazer isso, criaremos um arquivo de configuração chamado .eslintrcque podemos usar para dizer ao ESLint o que fazer. Abaixo, o senhor verá nossa primeira versão do arquivo .eslintrc .

{
  "env": {
    "browser": 1
  }
}

O ESLint pode ser configurado usando JSON. Aqui, estamos dizendo a ele que o ambiente é o navegador. O browser impede que o ESLint apresente erros sobre coisas como XMLHttpRequest ou window. Se quisesse executar isso no NodeJS, o senhor incluiria "node": 1 que faz o mesmo, exceto para Node-builtins.

Vamos repetir eslint e descobrir o que ele diz agora.

Os erros sobre o ambiente do navegador foram eliminados, mas há outro que não queremos: ‘angular’ não está definido. Em um aplicativo típico, incluiríamos bibliotecas como a Angular como tags de script, o que a torna disponível globalmente. Para informar o ESLint sobre isso, precisamos de algumas opções adicionais no arquivo de configuração:

{
  "env": {
    "browser": 1
  },
 
  "globals": {
    "angular": 1
  }
}

O globals configura as variáveis globais. Nesse caso, definimos angularmas, se estiver usando jQuery ou Backbone ou Underscore ou qualquer outra coisa, o senhor pode adicionar $ ou Backbone ou _ da mesma forma.

Reprise eslinte o erro desaparecerá.

Ainda há algumas coisas que quero mudar. Prefiro usar aspas simples para cadeias de caracteres, portanto, vou adicionar uma regra para corrigir isso.

{
  "env": {
    "browser": 1
  },
 
  "globals": {
    "angular": 1
  },
 
  "rules": {
    "quotes": [2, "single"]
  }
}

O rules configura as regras do ESLint. A propriedade quotes define se o ESLint dá um erro para o estilo de citação e qual estilo é permitido. O número 2 faz com que seja um erro. Se o senhor definir como 1, será um aviso, que aparecerá de forma diferente na saída. "single" diz ao ESLint que quero permitir apenas aspas simples.

A base de código deste exemplo não usa o modo estrito nem exige igualdades triplas, portanto, adicionarei essas regras também.

Para saber qual regra deve ser configurada, o senhor pode observar a saída.

A partir disso, podemos ver que para “use strict” a regra é “strict”, e para === a regra é “eqeqeq”. Podemos adicionar essas duas regras à configuração:

{
  "env": {
    "browser": 1
  },
 
  "globals": {
    "angular": 1
  },
 
  "rules": {
    "quotes": [2, "single"],
    "eqeqeq": 0,
    "strict": 0
  }
}

Definir uma regra como 0 faz com que o ESLint a ignore.

Os erros restantes são fáceis de corrigir. Removeremos os espaços finais da linha 35 e removeremos a linha em branco do final do arquivo.

Captura de erros

O código de exemplo agora passa pelo ESLint sem erros. Vamos introduzir algumas alterações para tornar as coisas mais interessantes.

Lembra que eu disse que muitas vezes renomeio uma variável e depois esqueço de renomeá-la em todos os lugares? Vamos ver como o ESLint lida com isso. Vou renomear xhr para request…

var request = new XMLHttpRequest();
 
request.open('POST', url, true);
request.onreadystatechange = readyStateChange.bind({}, d, xhr);
request.upload.onprogress = onProgress.bind({}, d, xhr);
request.send(fd);

O senhor notou um bug de relance? Deixei dois casos de xhr. Vamos ver o que acontece quando executamos o ESLint.

O ESLint aponta duas variáveis indefinidas, que, nesse caso, são causadas pela renomeação. Agora podemos identificar isso facilmente sem gastar tempo clicando no navegador.

Também podemos incluir um erro de sintaxe apenas por diversão:

Esses são apenas dois exemplos do que a ESLint pode detectar. O lista de regras incorporadas é muito longa, e o senhor pode até mesmo escrever regras personalizadas ou instalar plug-ins.

Recomendações

A ESLint pode ser uma ferramenta muito valiosa, mas, como qualquer ferramenta, o senhor precisa usá-la para obter os benefícios.

Minhas cinco recomendações para que o senhor tire o máximo proveito da ESLint são:

1. Consulte a documentação para obter mais informações
2. Execute-o em seu projeto e configure-o de acordo com seu estilo de codificação
3. Instale plug-ins adicionais para as bibliotecas que o senhor usa para tornar o ESLint ainda mais útil
4. Automatize o ESLint para que o senhor nunca se esqueça de executá-lo
5. Obtenha feedback instantâneo integrando-o ao seu editor ou IDE

Para facilitar as coisas para o senhor, criei um guia de 5 passos para essas etapas. O senhor pode obter o guia de cinco etapas em meu site.

O ESLint nos oferece uma rede de segurança básica. Ele detectará muitos erros fáceis de cometer e é muito útil quando se trabalha em equipes para impor um estilo de codificação. Mas para obter uma rede de segurança mais rígida, o senhor deve investir em testes de unidade. No entanto, esse é um assunto para outra ocasião.