Campo de busca

Categoria Programação

Mantendo seu JS no padrão

Mantendo seu JS no padrão

Por | 14 de outubro, 2015 | 0 comentários

Seu projeto tem muitos bugs? Você acha que seu código é inconsistente e para cada feature uma nova issue aparece?

Hoje mostro para vocês, como configurar de forma fácil e rápida, as ferramentas necessárias para manter os arquivos .js do seu projeto nos padrões definidos por você e sua equipe.

Fazendo isto, seu projeto ganha:

  • Código consistente e mais legível;
  • Maior manutenibilidade;
  • Redução de bugs.

Tirinha: The only valid measurement of code quality is WTFs/Minute

Vamos para a parte prática. Para analisar o nosso código usaremos o ESLint, uma ferramenta open source que procura inconsistências no seu código javascript.

Para instalar, digite em seu terminal:

npm i -g eslint


Com o novo módulo instalado, você deve criar um config file através do comando:

eslint --init

Pelo terminal, responda a algumas perguntas sobre o estilo do seu código, como tipo de identação, tipo de aspas, se você usa recursos do ES6 e etc.

O ESLint criará um arquivo .eslintrc, que terá todas as regras que você definir para os padrões do seu JS no formato de JSON.

Crie um código JS bem simples, com alguns erros de padrão para testar.

function Soma(a, b){
  return a + b;
}

function Hello(name) {
    return "Hello "+ name;
}

$('#call-to-action').on('click', function(){
 console.log('button clicked')
})

Agora para testar, use o comando:

eslint nome_do_seu_arquivo.js

Para o nosso exemplo acima, ele retorna os seguintes erros:

Perceba que quando tentamos usar JQuery, ele acusou o erro de "$" is not defined.

Podemos resolver este erro em específico de duas formas:

  1. adicionando o comentário /*eslint-env jquery */ no topo do arquivo (para arquivos específicos);
  2. inserindo "jquery": true no objeto "env" do arquivo .eslintrc (para todo o projeto).

Isto faz com que o ESLint "saiba" que você está usando JQuery em seu projeto, legal né? :D

Este é um grande diferencial do ESLint. Ele é altamente configurável, e você pode saber mais sobre regras customizadas na documentação do projeto.

Dica tope:

Fica meio improdutivo você ter que retornar ao terminal toda vez que quiser validar seu arquivo, então é essencial que o seu editor faça isso por você também.

Além de validar no terminal, eu uso o Sublime Linter, um plugin do Sublime Text que você pode adicionar vários tipos de linters.
Você também vai precisar instalar o SublimeLinter-eslinto plugin para o Sublime Linter para rodar o ESLint.

No próximo post, vamos usar uma ferramenta para não permitir commits enquanto todos os erros não forem resolvidos.

Lembre-se de deixar suas críticas, sugestões ou dúvidas nos comentários.
Até a próxima. :)~

 

Deixe um comentário

Queremos saber o que você pensa sobre esse post! Ficaremos felizes se você nos deixar um comentário :-)

Tenha em mente que os comentários são moderados, e os links possuem rel="nofollow". Então por favor, não faça spam de palavras-chave, senão o seu comentário será excluído. Obrigado!

 

[0] Comentários  

Nenhum comentário em "Mantendo seu JS no padrão". Seja o primeiro a comentar!