Melhorando a qualidade do seu código com Airbnb Style Guide (+ESLint)

Published in

Jaguaribe Tech

6 min readJul 28, 2017

Update 2020: Criei minha própria plataforma e agora meus posts a partir da agora vão estar hospedados em https://www.lucasfrosty.me/blog, entra lá e dá uma conferida ;)

(Bom dia || Boa tarde || Boa noite), tudo bom com você?

Esse é meu primeiro artigo aqui no Medium, e pra começar com grande estilo eu vim falar um pouco pra você sobre qualidade de código, style guide do Airbnb e sobre Linters (ESLint).

Como deixar seu código TOP

Existem diversas características que fazem um código ser bem escrito (internacionalmente conhecido como clean code), entre elas:

Legibilidade: Todo código bem escrito deve ser facilmente lido por outros desenvolvedores (e até por quem o escreveu). Boa identação, espaçamento, variáveis com nomes coerentes e comentários (quando necessário) sem dúvida são fatores que aumentam significativamente a legibilidade de um código.
Simplicidade: Enquanto programadores medianos se preocupam apenas em resolver problemas, bons programadores se preocupam em resolver problemas da melhor maneira possível (leia refatoração). Logo, um código de qualidade busca sempre resolver um problema de uma maneira simples e com fácil manutenção (próximo tópico).
Manutenbilidade: Construir seu código sem pensar no futuro é suícidio. Códigos mal escritos são um verdadeiro pé no saco de se manutenibilizar. Falo isso por experiência própria… recentemente fui atualizar algumas coisas em um projeto que havia feito quando estava começando, resultado: eu praticamente tive que refazê-lo pois estava extremamente inviável adicionar novas funcionalidades nele.

Diante disso, é muito comum empresas usarem os chamados style guides pois eles auxiliam bastante a um programa obter essas características.

style guide? wtf?

Do pt-BR guia de estilo, consiste em um documento (no nosso caso será um repositório no Github) com uma série de regras que os códigos de um programa deverão seguir, isso vai desde de indentação, uso ou não de ponto e vírgula (em linguagens que te dão essa opção), entre outros. A idéia é que o código, mesmo que escrito por uma equipe, dê a impressão de que tenha sido escrito por uma pessoa só. Nesse artigo eu explorarei um pouco do style guide de Javascript do Airbnb.

Por que o style guide da Airbnb?

Porque eles tão patrocinando esse artigo (brinks, mas se quiserem me patrocinar, vem de zap).

A verdade é que a Airbnb não é uma empresa qualquer. Além de ser uma multinacional poderosíssima, ela é responsável pelo enzyme, uma ferramenta bem famosa na criação de testes unitários para aplicações React. Logo, eles também têm sua fama e competência garantida no mundo dos desenvolvedores.

Mas agora falando de seu style guide de Javascript, ele é um dos mais famosos do mundo (se não o mais famoso), e é/foi referência para várias empresas como Billabong, National Geographic, reddit, e até o próprio React. Então, aprender um padrão bem sólido e reconhecido mundialmente como esse é uma boa pedida, não é mesmo?

Funcionamento do style guide

Obviamente, eu não irei explicar todas as regras do guia neste artigo, meu intuito é apenas explicar seu funcionamento. Portanto, após ler esse artigo, entre no repositório (se já não entrou) e o leia.

O guia é muito simples e intuitivo e funciona basicamente da seguinte maneira:

Explicação da regra e logo em seguida um link com sua implementação no ESLint (falarei sobre ESLint mais abaixo).
O(s) motivo(s) pelo qual ela é usada (opcional).
Mostra um exemplo em código, com exemplos ruins e exemplos bons.

Style guide lido, e agora?

Bom, assim como qualquer tipo de novo aprendizado obtido na programação, para absorvê-lo você precisar praticar, praticar e praticar.

Porém praticar regras de style guides é um pouco complicado, uma vez que o compilador não vai monitorar se você está usando ou não um determinado padrão de código. Para isso existem os chamados linters.

Linters e o ESLint.

Em resumo, linters servem para monitorar o que os compiladores não são capazes (ou não foram feitos) para monitorar: padrões de código. Padrões esses que o próprio usuário configura de acordo com suas preferências. Nesse artigo eu estarei usando um linter chamado ESLint e iremos configurá-lo para que ele monitore seu código de acordo com as regras do Airbnb.

ESLint é um linter configurável que monitora códigos em Javascript e JSX. Seu funcionamento, em resumo, é basicamente assim (se uma imagem vale mais que 1k palavras, imagine um gif):

Funcionamento do ESLint já configurado com os padrões do Airbnb

Percebam que o ESLint funciona em tempo real, sem a necessidade de compilar o código para encontrar os “erros de padrões” que você configura. Também é importante ressaltar que o ESLint não faz parte do compilador padrão do javascript, portanto só porque você usou um var ao invés de const/let não quer dizer que seu programa não irá funcionar. O ESLint tem a função apenas de avisar para o usuário que ele não está utilizando um determinado padrão.

Instalando o ESLint

Esse artigo não tem como foco ensinar tudo sobre ESLint, estarei aqui apenas ensinando o necessário para que ele rode com as regras do Airbnb. Se você quiser um artigo mais completo sobre ESLint, recomendo o Analisando seu código JS com um linter do Willian Justen, onde ele faz uma explanação um pouco mais completa sobre os Linters e em especial o ESLint.

Voltando ao que interessa, primeiramente precisamos instalar o plugin do ESLint no npm. Para isso, basta digitar no seu terminal:

npm install -g eslint

Após isso, para integrar o ESLint ao seu editor de texto, basta instalar seu respectivo plugin.

ps: eu uso apenas o VSCode, portanto não tenho certeza se os plugins do Atom e do Sublime Text são esses mesmos, se não for, deixe nos comentários.

E pronto, seu ESLint já está instalado!

Instalando as configurações do Airbnb

Bom, felizmente, para isso temos packages que fazem praticamente tudo pra gente, eles são o eslint-config-airbnb (com as regras de JS + JSX/React) e o eslint-config-airbnb-base (apenas Javascript). Aqui ensinarei a instalar o eslint-config-airbnb, pois ele funciona pros 2 casos.

Bom, primeiramente é necessário instalar os pacotes base, porém é necessário que as versões desses pacotes sejam compatíveis umas com as outras, para isso será necessário executar o seguinte comando (para npm versão 5+):

npx install-peerdeps --dev eslint-config-airbnb

Agora é preciso dizer pro ESLint que você quer usar as regras do Airbnb no seu projeto. Para isso, vá no diretório raiz do seu projeto e crie um arquivo chamado .eslintrc e dentro dele adicione:

{
  “extends”: “airbnb”
}

E isso fará com que o ESLint carregue todas as regras do style guide do Airbnb no seu projeto.

ps: se você usar algum plugin js importado através de um CDN (como jQuery ou axios), você precisará avisar ao ESLint que você está utilizando isso, pois caso contrário ele acusará erro. Para isso, basta deixar seu .eslintrc da seguinte maneira:

{ 
 “extends”: “airbnb”,
 “env”: {
   “jQuery”: true
 }
}

PRONTO! Você agora já pode começar a programar seu projeto usando um dos style guides mais famosos do mundo.

E FIM!

Queria agradecer a você, meu querido(a), pelos 2 reais de atenção dados para esse singelo artigo, espero que ele contribua de alguma forma na sua vida e na sua carreira. Queria também deixar claro que eu não sou nenhum guru da web (na verdade eu comecei a estudar sobre Web a pouco mais de 6–7 meses), então não levem nada do que eu falar aqui como verdades absolutas (a.k.a. “se tá na internet é verdade”). Qualidade de código é um tópico bem abrangente e que divide opiniões, então tudo bem você ter uma opinião diferente da minha. Inclusive, caso você tenha algo de diferente a acrescentar ou um feedback, sinta-se a vontade pra deixar um comentário.

Fique a vontade também para me seguir aqui no Medium e no Github:

É isso, vejo vocês na próxima ;)