Formatando e fazendo o autofix do seu JavaScript com ESLint

Quando é preciso analisar erros de aplicações JavaScript, ESLint é uma das melhores ferramentas de lint disponíveis. ESLint é capaz de verificar uma vasta gama de erros potenciais e violações de code style. Sua arquitetura conectável também possibilita que qualquer pessoa escreva suas próprias regras e personalize configurações.

Um dos meus recursos prediletos da ferramenta é a possibilidade de realizar o autofix utilizando o --fix flag. A correção automática integrada fornece um feedback constante enquanto elimina erros e mantém o código limpo antes que você o execute em um repositório. Isso poupa tempo tanto para você quanto para sua equipe na hora de revisar um código, assegurando que o resultado não exija pequenas limpezas constantes.

Gosto de realizar essa tarefa logo depois de salvar um arquivo no editor. A ferramenta fornece um loop de feedback e mantém as correções em disco. Neste artigo, vou mostrar a você como fazer o mesmo com alguns editores populares.

Nota: Este não é um tutorial de como utilizar o ESLint, pois presumo que você já esteja familiarizado com a ferramenta. Caso você precise de um auxílio inicial, confira o guia Getting Started antes de continuar a leitura.

Instalando o ESLint

Você pode instalar o ESLint localmente para um projeto específico (dentro do node_modules) ou globalmente para todos os projetos. Utilizaremos a instalação local do ESLint para este tutorial, mas a maioria das dicas funciona também para a instalação global.

npm install eslint --dev

VS Code

Instale a extensão ESLint. Então, para formatar o código no salvamento, vá até os global settings, procure ESLint e ative a opção ESLint: Auto Fix On Save.

Atom

Instale linter-eslint e todos os anexos. Depois, vá para as configurações do plugin e procure Fix errors on save.

Sublime Text

Utilizando o Package Control, instale a extensão ESLint-Formatter. Adicione o seguinte código em Preferences > Package Settings > ESLint-Formatter > Settings -- User file:

{

  "format_on_save": true

}

Vim/NeoVim

Adicione a extensão ale para $MYVIMRC utilizando sua ferramenta de extensões preferida, como vim-plug ou Vundle:

" vim-plug

Plug w0rp/ale

" Vundle

Plugin w0rp/ale

Então, habilite o autofix on save inserindo a seguinte configuração:

let g:ale_fixers = {}

let g:ale_fixers.javascript = ['eslint']

let g:ale_fix_on_save = 1

Outros editores

Se seu editor não estiver nesta lista, pode ser que a integração já esteja habilitada ou exista uma maneira de utilizar o comando eslint diretamente no código para conseguir um resultado similar.

Por exemplo, o plugin Vim rodará algo como o visto abaixo:

eslint -c --fix

Depois, é só recarregar o arquivo no buffer.

Agora é com você!

...

Quer ler mais conteúdo especializado de programação? Conheça a IBM Blue Profile e tenha acesso a matérias exclusivas, novas jornadas de conhecimento e testes personalizados. Confira agora mesmo, consiga as badges e dê um upgrade na sua carreira!

.....

Participe da Maratona Behind the Code 2020, um desafio para desenvolvedores e entusiastas da tecnologia! Além de concorrer a prêmios, você ainda tem acesso a conteúdos e serviços gratuitos. Não perca essa chance, as inscrições vão até 7 de agosto!