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!
Top comments (0)