Node.js + Express + ES6 + Eslint + Sucrase de forma simples e rápida

Neste post irei demonstrar como criar um ambiente de desenvolvimento utilizando algumas das tecnologias que rodam sobre a plataforma Node.js, lembrando que está é uma das possibilidades, não a única. Pessoalmente gosto desta combinação pois me proporciona um start facilitado, simplificado e performático de novos projetos.

Pré-requisitos

  • Node.js
  • NPM ou Yarn
  • VSCode*

Ao longo deste post irei utilizar o Yarncomo gerenciador de dependências, fique livre para utilizar o NPM se assim preferir. Já como editor de código irei utilizar o VSCode um editor de código que me atrai bastante, porém, você é livre para utilizar qualquer outro editor a sua preferência.

Passos

  • Primeiramente devemos:
Crie um diretório; e
Acesse este diretório
  • Acesse o diretório criado no passo acima e execute a instrução:
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, você é livre para remover o `-y` se assim preferir.

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 que carrega 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 babel-eslint sucrase nodemon -D

Obs: lembre-se de que além da instalação via NPM ou Yarn, é necessário acessar a “marketplace” do seu editor de código, no caso do VSCode, WebStorm, Sublame Text e outros, e instalar o plugin do ESLint e do Prettier para o editor de código ou IDE que está sendo utilizada. Consulte as instruções do seu editor/IDE para verificar como instalar plugins.

  • eslint: utilizado para análise de código estático e identificação de padrões problemáticos encontrados no código JavaScript;
  • babel-eslint: aumenta a compatibilidade entre o ES6 (ECMAScript 6 — que é uma especificação da linguagem JavaScript) e o Eslint;
  • sucrase: uma alternativa mais performática que o Babel, este faz a transpilação do código, entretanto, devemos ter em mente que este é recomendado somente para ambiente de desenvolvimento;
  • nodemon: monitorar o diretório e realiza restart automático no server sempre que um arquivo for alterado;
  • prettier: formata o código de modo a manter um padrão em todo o projeto, os plugins `eslint-config-prettier` e `eslint-plugin-prettier` cuidam de fazer a integração entre o ESLint e o Prettier, de modo a promover correções automáticas no código sempre que o ESLint apontar uma quebra de padrão/erro, obviamente você pode incluir regras personalizadas ou ignorar as predefinidas que não atenderem ao seu interesse.

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.*`:

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