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

Lucas Ferreira
Jul 28, 2017 · 6 min read

(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

  • 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?

Image for post
Image for post
Logo da Airbnb

Por que o style guide da Airbnb?

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:

  1. Explicação da regra e logo em seguida um link com sua implementação no ESLint (falarei sobre ESLint mais abaixo).
  2. O(s) motivo(s) pelo qual ela é usada (opcional).
  3. Mostra um exemplo em código, com exemplos ruins e exemplos bons.
Image for post
Image for post
Regra 2.1 do guia (const > var)

Style guide lido, e agora?

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.

Image for post
Image for post

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):

Image for post
Image for post
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

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, 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!

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

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

Jaguaribe Tech

Um lugar para falar sobre desenvolvimento web.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store