Angular e Lint: Análise de código

 

A plataforma Angular costuma primar pelas boas práticas, sempre recomendando-as e reforçando-as em sua arquitetura. Um dos conceitos utilizados é o de lint, termo que ficou popular recentemente e que indica uma análise estática do código-fonte em busca de violações: no estilo, formato e em construções suspeitas.

O conceito de lint não é novo: foi criado no final dos anos 70 (Wikipedia), para a linguagem C, e vem evoluindo desde então com ferramentas diversas para as mais variadas linguagens de programação. Na plataforma Angular, a ferramenta TSLint foi adotada desde as primeiras versões, fornecendo análises estáticas para manter o código desenvolvido mais robusto e padronizado entre as equipes. Quando criamos uma aplicação Angular a partir da ferramenta de linha de comando (@angular/cli), um comando é adicionado no arquivo package.json para realizar uma análise no código do projeto: ng lint. A saída do comando aponta possíveis violações nos padrões de projeto e nas convenções definidas para a aplicação. Até recentemente, este era o padrão adotado para os projetos Angular.

Acontece que, em 2019, a equipe que desenvolve o TSLint (principalmente, a empresa Palantir Technologies) resolveu descontinuá-lo em favor de uma unificação em torno de outra ferramenta: ESLint, que já vinha sendo muito utilizada para projetos Javascript. Uma boa iniciativa para facilitar a vida de ambas as comunidades de programadores e também um passo facilitado rumo a uma migração dos desenvolvedores Javascript para uma linguagem tipada como o Typescript.

E como se posicionou a comunidade Angular? Simples, apoiou a decisão e forneceu os meios para que os aplicativos Angular pudessem migrar para a nova ferramenta padrão, o ESLint. E esta é uma migração bem facilitada. Vamos aos passos:

1 - Instalar a nova ferramenta. Utilizar a linha de comando é o melhor modo

ng add @angular-eslint/schematics

2 - Com a ferramenta instalada, devemos utilizá-la para converter o nosso projeto para passar a utilizá-la. Novamente, a linha de comando nos auxilia

ng g @angular-eslint/schematics:convert-tslint-to-eslint <nome-projeto>

3 - Pronto, o ESLint está instalado e configurado para o projeto. Agora, podemos remover o TSLint. Devemos remover o arquivo tslint.json e também os aplicativos tslint e codelizer (aqui, utilizamos o npm - npm remove tslint e npm remove codelyzer).

Para você que está utilizando o Angular, o lint é algo altamente recomendável - faz você seguir os melhores padrões definidos pela equipe que desenvolveu a ferramenta, e te permite manter um alto padrão de qualidade. Altamente recomendável!!