Migrando um projeto Angular com TSLint para o ESLint
Como realizar a migração de um projeto angular com TSLint e @po-ui/ng-tslint para o ESLint e @angular-eslint
índice
- O que é? do que se alimenta?
- Migração
- Migração: Instalação do @angular-eslint
- Migração: Conversão do TSLint para ESLint
- Migração: Execução do lint
- Migração: Análise e implementação das regras
- Conclusão
O que é? do que se alimenta?
O TSLint é uma ferramenta de análise que verifica o código TypeScript para erros de legibilidade, manutenção e funcionalidade.
Em 2019 a depreciação do TSLint foi anunciada e também foi indicado o uso do ESLint como linter padrão.
O PO UI possui o @po-ui/ng-tslint, um pacote com regras de lint que é utilizado pela própria biblioteca e também está disponível para download e instalação pelo NPM, porém, por conta da depreciação do TSLint e o surgimento de outras ferramentas no mercado, também acabou fazendo sentido a depreciação do pacote de lint do PO UI que não terá a v5.0.0 publicada.
Desde então, sentimos a necessidade de fazer essa migração do TSLint e @po-ui/ng-tslint para o ESLint e @angular-eslint no nosso Monorepo @po-ui/po-angular e nos projetos dentro dele. Conforme estrutura representada abaixo:
Agora, depois de realizada a migração podemos compartilhar e ajudar outras pessoas que também estão passando por esse processo.
Migração
Essa migração promete ser muito simples, porém a quantidade de trabalho envolvido pode variar de acordo com as especificidades do projeto.
Não se preocupe! Existem ferramentas para facilitar e tornar todo o processo o mais automatizado possível. 😉
Instalação do @angular-eslint
Primeiramente precisamos instalar a dependência do @angular-eslint no seu projeto rodando o comando abaixo no terminal:
ng add @angular-eslint/schematicsVerificar se a versão instalada é a versão estável mais recente. Caso não seja, você deverá refazer esse passo fixando a versão que deverá ser instalada.
Durante a execução pode ocorrer um erro se você possui um arquivo tsconfig.base.json na raiz do seu projeto, exclua esse arquivo , execute novamente e restaure novamente o arquivo após a execução.
As seguintes dependências serão incluídas no projeto:
"devDependencies": {… "@angular-eslint/builder": "latest", "@angular-eslint/eslint-plugin": "latest", "@angular-eslint/eslint-plugin-template": "latest", "@angular-eslint/schematics": "latest", "@angular-eslint/template-parser": "latest", "@typescript-eslint/eslint-plugin": "latest", "@typescript-eslint/parser": "latest", "eslint": "^latest"}
Conversão do TSLint para ESLint
Agora basta rodar o schematic convert-tslint-to-eslint no seu projeto:
ng g @angular-eslint/schematics:convert-tslint-to-eslintSerá necessário especificar o nome do projeto caso você possua um diretório 'projects/' e migrar cada projeto individualmente da seguinte forma:
ng g @angular-eslint/schematics:convert-tslint-to-eslint {{PROJ_NAME}}
Nesse momento você será questionado se você deseja remover o TSLint e sua configuração se não houver mais nenhum projeto utilizando o TSLint após a conversão. Basta responder: Yes
Também será questionado se você deseja ignorar a configuração existente do TSLint (Isso é recomendado se a configuração do TSLint não foi muito alterada, pois torna o novo ESLint mais limpo. No nosso caso optamos por não ignorar, respondendo: No. Veja o que faz sentido para o seu projeto.
Após concluída a migração, você será informado se houver alguma regra que você utilizava que não têm uma regra equivalente conhecida no ESLint. Será exibida uma lista com essas regras conforme mensagem abaixo:
Você precisará decidir como lidar com essas regras manualmente, porém todo o restante das configurações já foi feito pra você automaticamente:
- Instalação das versões mais recentes dos plugins do ESLint, verifique as alterações feitas no seu package.json.
- Criação do arquivo eslintrc.json que conterá todas as regras e configurações do ESLint no seu projeto.
- Alteração das referências do TSLint no arquivo angular.json que serão alteradas para para o @angular-eslint
- Alteração dos comentários para desabilitar o TSLint. Conforme imagem abaixo:
Importante destacar que se você tiver um diretório 'projects/' cada projeto terá o seu arquivo eslintrc.json que estende o arquivo eslintrc.json na raiz do projeto.
Execução do lint
A seguir basta rodar o comando abaixo para rodar o lint no seu projeto 😀
ng lint {{PROJ_NAME}}Nesse momento pode ocorrer algum erro por alguma dependência que faltou ser instalada, conforme exemplo abaixo:
Cannot find module ‘{{ANY_MODULE}}’
Devemos então instalar as dependências requeridas, por exemplo:
npm i {{ANY_MODULE}}
Após rodar o lint no projeto, você será notificado de todos os trechos de código que não estão de acordo com as regras do ESLint. Conforme imagem abaixo:
Análise e implementação das regras
E por último será necessária a análise das regras e implementação delas no projeto, que muitas vezes pode resultar em refatoração de código. Lembrando que as regras são configuráveis e algumas podem ser personalizadas.
Também é possível implementar algumas regras executando o lint e utilizando a flag — fix que altera o código automaticamente. Sugerimos cuidado com essa opção até que se tenha certeza que realmente todos os casos podem ser corrigidos dessa forma, caso contrário podem ocorrer erros durante o build do projeto.
Após resolver todas as regras, seja implementando ou desligando se necessário a saída do terminal será da seguinte forma:
Conclusão
A migração é muito simples e rápida, a ferramenta disponibilizada pelo @angular-eslint simplifica e agiliza o processo de conversão.
O que geralmente pode levar mais tempo é a análise das regras e implementação delas, se esse for o caso. Porém essas regras identificam e nos ajudam a corrigir padrões problemáticos encontrados no código.
Se você quer saber um pouco mais sobre as regras do ESLint que foram implementadas no PO UI, verifique o arquivo eslintrc.json na raiz do nosso projeto no Github.
Veja as documentações oficiais do @angular-eslint.
