Saiba como manter os padrões de projeto com ESLint, Prettier e EditorConfig
Manter a qualidade e a organização do código em que se trabalha é um dos maiores desafios de um time de programadores, uma vez que cada desenvolvedor tem um jeito próprio de programar, sua forma de organização e sua IDE preferida.
Trabalhar em um código sem uma estrutura de projeto bem definida, em que cada classe é escrita de uma forma diferente, sem limites de caracteres por linha, com diferentes padrões para nomear variáveis, alguns usando ponto vírgula e outros nada, alguns indentando o código com espaços enquanto outros usam tab, pode se tornar um pesadelo.
Para solucionar esse problema, foram criadas algumas ferramentas que auxiliam na hora de manter o código padronizado. Nesse artigo, falaremos sobre a configuração do ESLint, do Prettier e do EditorConfig para projetos baseados em Node.js.
EditorConfig
Não é incomum ter programadores que utilizam as mais diferentes IDEs em uma mesma equipe. Para solucionar os problemas de padronização por conta da forma como as diferentes IDEs trabalham um mesmo código em vários sistemas operacionais, nasceu o EditorConfig.
Para configurar a ferramenta é importante, antes de tudo, instalar a extensão do EditorConfig para a sua IDE. O link para download do plugin pode ser encontrado no site oficial do EditorConfig.
Em seguida, após instalar o plugin, crie um arquivo .editorconfig na raiz do seu projeto, com a seguinte configuração:
A configuração acima garante que a indentação das linhas será feita usando dois espaços, que o charset será UTF-8, que os espaços em branco serão removidos e que será inserida uma linha em branco no final de todos os artigos, além de garantir que as quebras de linhas sejam padronizadas, uma vez que no Windows e no Linux a quebra de linha é diferente.
Para garantir que a configuração está funcionando, abra os arquivos do projeto e salve-os novamente.
ESLint
O ESLint talvez seja a ferramenta mais importante para manter a padronização do código. Com seu auxílio, podemos definir se desejamos adicionar ponto vírgula no final das linhas, utilizar aspas duplas ou simples, ou ainda, utilizar vírgula após o último item do objeto.
Para começar a configuração, é preciso instalar o plugin do ESLint para o seu editor favorito. Você pode conferir a lista de todos os editores compatíveis no site do plugin.
Para começar, vamos instalar o Eslint como uma dependência de desenvolvimento, já que ele nunca será utilizado em produção:
Após o término da instalação, vamos inicializar o Eslint através da sua CLI rodando o seguinte comando:
Ao rodar o comando acima, ele fará algumas perguntas. São elas:
Selecione a opção “To check syntax, find problems and enforce code style”.
Nessa pergunta, você deve escolher a opção que mais se adapta ao seu projeto. Caso você utilize Typescript ou Sucrase, selecione a opção “JavaScript modules”. As versões mais antigas do Node ainda utilizam o padrão “CommonsJS”.
Como estamos configurando o backend, vamos selecionar a opção “None of these”.
Caso o seu projeto utilize TypeScript, selecione “Yes”. Do contrário, selecione “No”.
Vamos selecionar a opção Node. Para isso, usando as setas do teclado para navegar, e a barra de espaço para selecionar, vamos desmarcar a opção Browser e selecionar Node.
Aqui você pode escolher o que melhor se encaixa na sua necessidade. Entretanto, recomendo escolher “Use a popular style guide”.
Cada uma das style guides tem regras específicas. Vamos escolher “Airbnb”. Dessa forma, garantimos que o nosso projeto utilizará ponto e vírgula ao final das linhas, além de aspas simples. Lembrando que não há o “melhor padrão”, vai das necessidades de cada projeto.
Aqui vamos escolher a opção “JSON”. Em seguida, o ESLint perguntará se vocẽ quer que ele instale as dependências automaticamente. Caso você utilize o NPM, selecione YES. Caso contrario, selecione NO e instale as dependências listadas manualmente.
Após instalar as dependências, criaremos na raiz do projeto um arquivo chamado .eslintignore para garantir que os arquivos desnecessários não serão alterados pelo ESlint. Basta adicionar o seguinte código:
Agora, no arquivo .eslintrc.json, adicionaremos algumas configurações. A primeira é adicionar dentro de extends, caso você use Typescript, a linha:
Em seguida, adicionamos dentro de “rules” as seguintes configurações:
Por fim, caso você use Typescript, é necessário instalar uma dependência só para que o ESLint entenda as importações dos arquivos. Portanto, basta rodar o comando:
E, por fim, adicionar logo abaixo das “rules”, o seguinte código:
E, dentro das “rules”, adicione o trecho abaixo para que as importações de arquivos .ts não precisem da extensão do arquivo:
Por fim, o seu arquivo .eslintrc.json deve estar semelhante a esse:
Prettier
O Prettier é mais uma das ferramentas que utilizaremos para garantir que as padronizações serão seguidas. Ele permite que você faça diversas configurações para que o código seja formatado da forma desejada.
Antes de começarmos a configuração, é importante que você instale o plugin. Para chegar quais IDEs são compatíveis, verifique no site da ferramenta.
A primeira coisa que faremos é a instalação dos pacotes necessários. Rode o seguinte comando:
Após finalizar a instalação, abra o arquivo .eslintrc.json e adicione no “extends” as seguintes regras:
E, em “plugins”, adicione a seguinte linha:
Por fim, nas Rules, adicione a seguinte linha:
Agora, crie o arquivo prettier.config.js na raiz do seu projeto, e nela adicionaremos três regras:
- singleQuote, para garantir que será utilizado aspas simples.
- trailingComma, para adicionar virgula sempre ao final de um objeto.
- arrowParens, para que não seja adicionado parênteses quando uma arrow function tiver apenas um parâmetro.
O arquivo, no final, ficará da seguinte forma:
Espero que tenha ajudado de alguma forma. Qualquer dúvida, pode me mandar uma mensagem por aqui mesmo. :)
Olá, eu sou o Caio Tracera, Desenvolvedor Backend na Akross e apaixonado pelo mundo da tecnologia e do desenvolvimento web. Comecei a desenvolver aos 12, divido meu tempo entre criar coisas e pegar a estrada.
A Mobicare e a Akross combinam os Melhores Talentos, Tecnologias de Ponta, Práticas Agile e DevOps com Capacidades Operacionais avançadas para ajudar Operadoras Telecom e grandes empresas a gerarem novas receitas e a melhorarem a experiência dos seus próprios clientes.
Se você gosta de inovar, trabalhar com tecnologia de ponta e está sempre buscando conhecimento, somos um match perfeito!
