Configurando ESLint no Node com Express e Typescript
Tags: node, typescript, express, eslint
Published: 2020-06-03 12:13:34

## Introdução
Olá me chamo [Melquisedec](https://www.linkedin.com/in/melquisedecfelipe/), 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](https://nodejs.org/en/) utilizando [Express](https://expressjs.com/) e [Typescript](https://www.typescriptlang.org/).


## 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](https://eslint.org/), [Pylint](https://pypi.org/project/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](https://yarnpkg.com/) como gerenciador de pacotes e o [VSCode](https://code.visualstudio.com/) como editor de texto, instale as seguintes extensões em seu editor de texto: [EditorConfig](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig), [ESLint](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) e [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).

As configurações tem como base a guia de estilo do [Airbnb](https://github.com/airbnb/javascript), um dos mais utilizados atualmente. Além disso, faço algumas configurações no [ESLint](https://eslint.org/) para facilitar a importação de arquivos [Typescript](https://www.typescriptlang.org/), configuro o [Prettier](https://prettier.io/) para realizar a formatação do estilo e adiciono o [EditorConfig](https://editorconfig.org/) 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:
{% gist https://gist.github.com/melquisedecfelipe/ffd71c3e205418d7afdf1ce7735523f5 %}

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`:
{% gist https://gist.github.com/melquisedecfelipe/523c52ab3d4ed5f728124b5923444286 %}

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:
![Configuração ESLint](https://media.giphy.com/media/VI3CMwizh9j2ay4vVj/giphy.gif)

Substitua as configurações do arquivo `.eslintrc.json` por essas:
{% gist https://gist.github.com/melquisedecfelipe/084ca3e4b2c8dea1cf06ee8e78be27c8 %}

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:
![Resultado](https://media.giphy.com/media/dyoOkM6L6NhmbpPMbj/giphy.gif)

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**!


## Referências
- [melquisedecfelipe/node-template](https://github.com/melquisedecfelipe/node-template)
- [What Is Lint Code? And Why Is Linting Important?](https://www.perforce.com/blog/qac/why-linting-important-and-how-use-lint-tools)
- [airbnb/javascript](https://github.com/airbnb/javascript)
- [List of available rules](https://eslint.org/docs/rules/)
- [Install - Prettier](https://prettier.io/docs/en/install.html)