Configurando ESLint no Node com Express e Typescript

Melquisedec Felipe — Wed, 03 Jun 2020 12:13:34 +0000

Introdução

Olá me chamo Melquisedec, espero que você esteja bem! Hoje irei mostrar o que é Lint, quais são os benefícios e como configurá-lo em um projeto Node utilizando Express e Typescript.

Antes de mais nada, o que é Lint

“Linting is the automated checking of your source code for programmatic and stylistic errors. This is done by using a lint tool (otherwise known as linter). A lint tool is a basic static code analyzer.”

Simplificando, lint é uma correção automática que algumas ferramentas (como por exemplo ESLint, Pylint, entre outras), realizam para padronizar o código com regras pré-definidas.

Quais as vantagens do Lint?

Uma das maiores vantagens do lint é a padronização, ele analisa todo o código, realiza a correção de forma automática, aplica o padrão pré-definido e alerta caso o mesmo não esteja sendo seguido, levando a uma redução considerável de erros de sintáticos.

Também facilita a integração de um desenvolvedor novo no time (claro que isso envolve outras variáveis), mas apresentar para um dev uma documentação de lint, o ajuda a se encontrar no projeto/produto mesmo sem ter muita noção da regra de negócio.

Show me the code.

O guia a seguir é realizado utilizando o Yarn como gerenciador de pacotes e o VSCode como editor de texto, instale as seguintes extensões em seu editor de texto: EditorConfig, ESLint e Prettier.

As configurações tem como base a guia de estilo do Airbnb, um dos mais utilizados atualmente. Além disso, faço algumas configurações no ESLint para facilitar a importação de arquivos Typescript, configuro o Prettier para realizar a formatação do estilo e adiciono o EditorConfig para realizar as configurações do editor.

No terminal crie uma pasta com o comando mkdir node-template e, em seguida, entre na pasta utilizando cd node-template. Agora utilizaremos o yarn para iniciar um novo projeto:

$ yarn init -y

Em seguida adicione o express:

$ yarn add express

E algumas outras dependências de desenvolvimento:

$ yarn add @types/express typescript ts-node-dev eslint -D

A seguir devemos iniciar as configurações do Typescript com o seguinte comando:

$ yarn tsc --init

Vamos alterar somente as configurações outDir e rootDir, deixando-as da seguinte forma:

Também será necessário adicionar os seguintes script no package.json:

"scripts": {
  "build": "tsc",
  "dev": "ts-node-dev --transpileOnly --ignore-watch node_modules src/server.ts"
},

Em seguida, crie uma pasta src com um arquivo chamado server.ts. A estrutura deve ficar igual a esta:

node-template
├── package.json
├── src
│   └── server.ts
├── tsconfig.json
└── yarn.lock

Adicione o seguinte código no server.ts:

Instale as outras dependências de desenvolvimento:

$ yarn add @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-airbnb-base eslint-config-prettier eslint-import-resolver-typescript eslint-plugin-import eslint-plugin-prettier prettier -D

Após isso as configurações serão todas realizadas na raiz do diretório node-template. Vamos inicializar o ESLint:

$ yarn eslint --init

Em seguida selecione as seguintes opções:

Substitua as configurações do arquivo .eslintrc.json por essas:

Crie o arquivo .eslintignore na raiz e adicione:

/*.js’
node_modules
dist

Crie o arquivo prettier.config.js na raiz e adicione:

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};

Por fim, concluímos todas as configurações. Tendo como resultado:

Para inicializar o projeto, basta rodar o seguinte comando:

$ yarn dev

Conclusão

Seguir uma style guide é uma ótima prática nos dias de hoje e ter um bom lint configurado para isso aumenta demais a produtividade, ainda mais se implementada juntamente com algum padronizador de commit. Não é uma regra nem bala de prata, o time precisa estar bem alinhado. Se não acaba perdendo todo o potencial e melhorias que agregariam na pipeline.

Se você chegou até aqui, obrigado!