Neste post demonstrarei como é simples iniciar um projeto sobre a plataforma Node.js, agregando a esta: ferramentas, técnicas e abordagens voltadas a garantir a qualidade do código.

Pessoalmente gosto bastante da combinação citada no título deste post. Em parte, isso se deve ao fato dela me proporciona um start simples e rápido de novos projetos. Observe que dei preferência a utilizar o Express como alvo da demonstração, porém, os conceitos e técnicas aqui exploradas se aplicariam facilmente a qualquer outro framework/lib ou script alone, em muitos casos sem a necessidade de qualquer ajuste.

ESLint vs Prettier

Sem dúvida essa dupla de peso merece nossa atenção, vai por mim. No passado já as ignorei, porém, quando resolvi abraçar a causa, ganhei muito em termos de produtividade e padronização do estilo de código. Não as negligencie como assim o fiz no passado.

Não se deixe enganar pelo título deste post, a premissa de rivalidade entre essas duas ferramentas é falsa, porém, este título representa uma dúvida comum entre iniciantes e veteranos do mundo “underground” dos desenvolvedores. ESLint e Prettier são ferramentas que se complementam com o intuito de agregar maior qualidade ao código.

ESLint

Este é o linter mais famoso do mundo JavaScript e tudo indica que será do TypeScript também. Essa ferramenta faz a analise estática do código de modo a identificar quebras de estilização e erros que poderiam levar sua aplicação a uma falha em tempo de execução.

Por exemplo, antes mesmo de executarmos nosso código, o ESlint pode nos alertar que estamos utilizando uma variável que nunca foi declarada, que estamos tentando sobrescrever o valor de uma constante ou até mesmo que estamos tentando utilizar um método inválido no contexto do objeto.

Prettier

Está é uma ferramenta voltada a formatação e estilização do código. Sabe aquelas discussões de fanáticos de ponto e vírgula, aspas duplas ou simples? Pois bem, seus problemas acabaram! O Prettier é o formatador que todos precisávamos, ele cuida de manter a consistência estética do nosso código, obviamente somos livres para customizar o que bem entendermos, mas o ponto chave aqui não é qual estilo iremos seguir, mas sim manter a consistência do estilo definido de modo a evitar aqueles códigos “mutantes”.

Propósitos diferentes que se complementam

O ESLint e o Prettier se complementam de modo a enriquecer a qualidade do código. Acredito que você já tenha criado uma linha de raciocínio que converge para este fato. Porém, antes de concluirmos este tópico, vamos à algumas duvidas remanescentes que podem ter surgido:

O ESLint também consegue identificar quebra de estilos. Então não preciso do Prettier, correto?

Não diria que está nem certo nem errado. Como foi esclarecido nos tópicos anteriores, cada qual tem um propósito diferente. Vamos imaginar assim, um Jipe e uma Ferrari, ambos podem nos atender da mesma forma em diferentes momentos, mas você não vai de Ferrari para o Rally dos Sertões, não é mesmo!

Em resumo, ESLint tem a capacidade de forçar o padrão de formatação em alguns aspectos, porém, como este não é o propósito primordial dele, o Prettier é mais recomendado segundo a humilde opinião da minha pessoa.

Instalar o ESLint e o Prettier não vai gerar conflito? Tipo, o ESLint definir que deve usar aspas duplas e o Prettier que às aspas devem ser simples?

Isso vai depender de como você configura as coisas. Ao seguir este post você não corre o risco de ter este problema. Iremos utilizar dois plugins que possuem a finalidade de evitar este comportamento, sendo eles eslint-config-prettier, que tem por finalidade desativar regras do ESLint que podem gerar conflitos com o Prettier, e eslint-plugin-prettier que passa para o Prettier a gestão das regras de formatação estética.

Então devo configurar as regras de formatação estética somente no Prettier?

Eu diria que será o mais recomendado! O Prettier é o mais indicado para este trabalho, além disso, fica mais simples gerenciar um único arquivo de configuração, evitando ainda a armadilha de configurarmos regras em dois locais distintos que podem acabar gerando divergências entre si.

Resumindo: o ESLint deve cuidar de fatores ligados a sintaxe e recomendações de uso, tais como, aplicar funções de retorno em getters, proibir condições duplicadas em cadeias if-else-if… Já no Prettier, centralize tudo que for ligado a estética, como padrão das aspas (simples ou dupla), final de linha com ou sem ponto-e-virgula e assim por diante.

Chega de papo, vamos por a mão na massa!

Pré-requisitos

• Node.js
• NPM ou Yarn
• VSCode*

Ao longo deste post irei utilizar o Yarn como gerenciador de dependências, fique livre para utilizar o NPM se assim preferir. Já como editor de código, utilizarei o VSCode, porém, você é livre para utilizar o sabor de editor que preferir.

Passos

• Primeiramente devemos:

Crie um diretório; e
Acesse este diretório

• Para criar um novo projeto basta executar:

yarn init -y

• init: essa instrução instrui o yarn a criar um arquivo Package.json, responsável por guardar algumas definições iniciais do projeto e a lista de dependências;
• -y: ativa confirmação silenciosa, ou seja, preencher todas as perguntas com a resposta padrão, deste modo não seremos questionados quanto as escolhas durante o processo de criação.

Agora iremos instalar nossas primeiras dependências de produção:

yarn add express cors dotenv

• express: micro-framework simples e flexível;
• cors (cross-origin): é uma especificação que define meios para que um recurso do servidor seja acessado remotamente via web/rede; Resumidamente, o cors permite que nossa aplicação seja acessada de um endereço externo;
• dotenv: é um módulo de dependência zero, responsável por carregar variáveis de ambiente de um arquivo .env em process.env.*.

Agora iremos adicionar as dependências de desenvolvimento do nosso projeto:

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier sucrase nodemon -D

Obs: lembre-se de que além de instalar o ESLint via NPM ou Yarn, é necessário acessar a “marketplace” do seu editor de código, seja ele VSCode, WebStorm, Sublame Text entre outros, e instalar o plugin do ESLint para o editor de código ou IDE que você está utilizando. Consulte as instruções do seu editor/IDE para verificar como instalar plugins. Caso não faça isso, provavelmente não terá o recurso de linting integrado ao editor/IDE, mas ainda poderá fazer uso via “Command Line Interface”, conforme veremos mais adiante neste post.

• eslint: utilizado para análise de código estático e identificação de padrões problemáticos presentes no código;
• sucrase: responsável por fazer a transpilação do código, ou seja, traduzir as especificações mais recentes da linguagem, que ainda não são nativamente suportadas pelo Node.js para um padrão que o mesmo já suporte. Essa ferramenta é altamente recomendada para ambiente de desenvolvimento devido a sua abordagem de transpilação, porém, não é adequada para um ambiente de produção;
• nodemon: monitora o diretório e realiza restart automático do server sempre que um arquivo for alterado;
• prettier: formata o código de modo a manter um padrão estético, os plugins eslint-config-prettier e eslint-plugin-prettier cuidam de fazer a integração entre o ESLint e o Prettier (assunto já abordado no inicio deste post), de modo a promover correções automáticas no código sempre que o ESLint apontar uma erro, obviamente você pode incluir regras personalizadas ou ignorar as predefinidas que não te atenderem.

Feito isso, vamos configurar o ESLint. A instrução abaixo irá realizar o download de algumas outras dependências de desenvolvimento e gerar o arquivo de configuração .eslintrc.* (a extensão final pode ser js, json ou yml, veremos isso mais adiante):

yarn eslint --init

Segue abaixo o fluxo de perguntas emitidas pelo ESLint para geração do arquivo .eslintrc, sendo assim, reproduza estas conforme as imagens apresentadas.

Selecione a opção To check syntax and find problems com o uso das setas e pressione ENTER:

…Continue lendo em: https://medium.com/@fabiojanio/node-js-express-es6-eslint-sucrase-de-forma-simples-e-rápida-8467fcfae728