Na prática: TypeScript + ESLint + Prettier + EditorConfig + Jest, Supertest…

Publicado em por _SDinfo

Este material tem por finalidade atingir dois objetivos bem simples: tornar clara as vantagens de se utilizar o conjunto de ferramentas citadas no título deste material, bem como demonstrar esse uso na prática. Então sem rodeios vamos ao que interessa.

📚 Livros

Em meu repositório no GitHub você encontrará link para download de alguns livros publicados por mim, bem como poderá acompanhar o desenvolvimento das obras mais recentes, tais como o livro de Node.js para iniciantes. Acesse: https://github.com/fabiojaniolima/livros

🔗 Sugestão de leitura

Os posts abaixo representam tão somente sugestões/recomendações de leitura, não devem ser tidos como pré-requisitos para a leitura ou execução das práticas contidas aqui neste material.

Dica: recomendo o uso do ESLint + Prettier + EditorConfig em todo e qualquer projeto, afinal de contas é uma boa prática manter aspectos de consistência.

❗️Pré-requisitos

  • Node.js
  • NPM ou Yarn
  • VSCode*

Ao longo deste post irei utilizar o Yarn como gerenciador de pacotes, sinta-se 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.

📦 Pacotes utilizados

  • typescript
  • ts-node-dev
  • supertest
  • rimraf
  • eslint
  • prettier
  • jest
  • dotenv
  • cors
  • express

Note que estou utilizando ESLint no lugar do TSLint. Isso ocorre pois atualmente o ESLint tem suporte pleno as features do TypeScript, sem falar que a própria equipe de desenvolvimento do TSLint tem incentivado essa migração e juntado esforços entorno do ESLint.

🧑‍💻 Mãos a obra

Para os passos abaixo estou considerando que você já inicializou um diretório como projeto Node. Exemplo:

yarn init -y

EditorConfig antes de tudo

Esse é um daqueles plugins independente de tecnologia, ou seja, utilizo em todo e qualquer projeto que vou fazer. Veja minha configuração genérica:

root = true[*]
indent_style = space
indent_size = 2
charset = utf-8
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

Para saber mais leia meu artigo: EditorConfig — Padronizando características essenciais

Configurações iniciais

Vamos começar instalando nossas primeiras dependências de desenvolvimento:

yarn add typescript ts-node-dev rimraf @types/node -D
  • typescript: instala o TypeScript e a command line tsc
  • ts-node-dev: servidor web de desenvolvimento para TypeScript
  • rimraf: utilizaremos este modulo como utilitário para excluir builds antigas de forma automática
  • @types/node: definição de tipos para o conjunto nativo de APIs/módulos do NodeJS

Execute a instrução abaixo para gerar o tsconfig.json (arquivo de definições do TypeScript):

yarn tsc --init --outDir "build" --rootDir "src"

A instrução acima gera o arquivo de configurações com duas referências passadas por nós:

  • outDir: diretório onde a build do projeto será gerada
  • rootDir: diretório raiz onde fica nosso código TypeScript

ESLint e Prettier

Para manter uma boa sintaxe e formatação é necessário utilizar estes dois camaradas em conjunto. Para isso instale executando:

yarn add eslint prettier eslint-config-prettier eslint-plugin-prettier eslint-plugin-simple-import-sort -D
  • eslint: faz o lint do código, ou seja, verifica erros de sintaxe, formatação e outros aspectos
  • prettier: tem foco total na formatação e padronização do código
  • eslint-config-prettier: desativa regras do ESLint que entram em conflito com o Prettier
  • eslint-plugin-prettier: permite rodar o Prettier como uma regra do ESLint
  • eslint-plugin-simple-import-sort: organiza nossos imports em ordem alfabetica

A instrução abaixo irá gerar o arquivo de definições .eslintrc.*:

yarn eslint --init

Reproduza as respostas conforme abaixo:

  1. Vamos configurar o ESLint com foco na sintaxe e detecção de problema:

Continue lendo em: https://link.medium.com/CRZ9TKZI08