TSLint e ESLint: configuração e uso em projetos TypeScript

Introdução

Chegou a hora de dar mais um passo na sua jornada de aprendizado do TypeScript, uma linguagem de programação que adiciona tipagem estática e outros recursos ao JavaScript!

Imagine que você está em uma equipe de pessoas desenvolvedoras de um projeto que utiliza essa linguagem, como seria possível garantir a qualidade e consistência do código? Uma resposta é utilizar ferramentas de linting, que são capazes de analisar o código e identificar possíveis erros, más práticas ou violações de estilo.

Linting é o processo de aplicar regras a um código-base e identificar padrões ou códigos problemáticos que não aderem a determinadas diretrizes de estilo. O linting moderno de JavaScript também inclui a correção automática de problemas. Entre as ferramentas de linting mais populares para TypeScript estão o TSLint e o ESLint. Ambas permitem configurar regras personalizadas ou seguir padrões pré-definidos. Mas qual delas é melhor? Quais são as vantagens e desvantagens de cada uma? Como configurá-las e usá-las? Essas são as perguntas que este artigo pretende responder.

TSLint e ESLint

O TSLint é uma ferramenta de linting específica para TypeScript, que foi desenvolvida pela Palantir Technologies em 2015. Ela oferece uma boa integração com editores de código, como o Visual Studio Code, e suporta recursos exclusivos do TypeScript, como program-wide linting e semantic linting.

No entanto, em 2019, os desenvolvedores do TSLint anunciaram que a ferramenta seria descontinuada em favor do ESLint, que é uma ferramenta de linting mais genérica para JavaScript, mas que também pode ser usada com TypeScript através de plugins e parsers. Segundo eles, o motivo da decisão foi a dificuldade de manter o TSLint atualizado com as novas versões do TypeScript e a preferência da comunidade pelo ESLint.

Já ESLint é uma ferramenta de linting, criada em 2013 por Nicholas C. Zakas, que permite definir regras flexíveis e extensíveis para JavaScript e outras linguagens que se compilam para JavaScript, como TypeScript. Ela tem uma grande variedade de plugins e configurações disponíveis, além de ser mais performática e modular que o TSLint. No entanto, para usar o ESLint com TypeScript, é preciso instalar alguns pacotes adicionais.

Vantagens e desvantagens

Uma das vantagens do TSLint é que ele é uma ferramenta específica para TypeScript, que oferece uma boa integração e suporte a recursos exclusivos. Ele ainda funciona perfeitamente, mesmo sendo descontinuado. Ele também pode ser útil para alguns projetos que já estejam acostumados com ele ou que precisem de funcionalidades específicas do TypeScript.

Apesar disso, está obsoleto desde 2019, não recebendo mais atualizações ou correções de bugs, podendo ficar incompatível com as novas versões do TypeScript ou com os padrões da comunidade. Ele também tem uma menor variedade e flexibilidade de regras e plugins, que podem ser limitados ou desatualizados.

Apesar de estar descontinuado, o TSLint ainda pode ser utilizado em alguns casos, como:

• Quando o projeto já está consolidado com o TSLint e não há tempo ou recursos para migrar para o ESLint;
• Quando o projeto precisa de funcionalidades específicas do TypeScript que não são suportadas ou são diferentes no ESLint;
• Quando o projeto tem uma preferência pessoal ou da equipe pelo TSLint.

No entanto, esses casos são cada vez mais raros, e a tendência é que o ESLint se torne a ferramenta padrão para linting de TypeScript.

Agora, vamos analisar as vantagens do ESLint! =)

Ele é mais moderno, performático e versátil que o TSLint. Ele tem uma maior variedade e flexibilidade de regras e plugins, que podem ser adaptados às necessidades de cada projeto e estilo de codificação. Também é a ferramenta oficial de linting para TypeScript, sendo mantido pela equipe do TypeScript e pelo antigo time do TSLint.

No entanto, o ESLint requer a instalação de alguns pacotes adicionais para funcionar com TypeScript, o que pode aumentar a complexidade da configuração. Pode não suportar ou ter comportamento diferente em algumas funcionalidades do TSLint, como o program-wide linting ou semantic linting, como também pode exigir algumas adaptações ou configurações extras para migrar entre as ferramentas.

Sabendo sobre esses fatores, como escolher qual usar?

A escolha sobre qual usar depende de alguns fatores, como a complexidade do projeto, as preferências pessoais ou da equipe, e a facilidade de migração. De modo geral, o ESLint parece ser a opção mais recomendada atualmente, por ser mais moderno, performático e versátil que o TSLint. Entretanto, isso não significa que o TSLint seja uma ferramenta ruim, pois ele ainda pode atender bem alguns projetos que já estejam acostumados com ele ou que precisem de funcionalidades específicas do TypeScript.

E agora que você já sabe quais as vantagens e desvantagens de cada um deles, vamos mostrar exemplos de como configurar essas ferramentas no nosso projeto.

Vamos lá?

Configurando e usando o TSLint

Para configurar o TSLint em um projeto TypeScript, é preciso instalar os seguintes pacotes via npm:

npm install --save-dev tslint typescript

O comando npm install é um comando do Node Package Manager (npm) usado para instalar pacotes e dependências em um projeto. Ao usar --save-dev estamos indicando que os pacotes a serem instalados são dependências de desenvolvimento. Isso significa que esses pacotes não são necessários para a execução da aplicação em produção, mas são necessários para o desenvolvimento, testes, compilação, ou outras tarefas relacionadas ao desenvolvimento. Os pacotes que estão sendo instalados são o tslint e o typescript.

Em seguida, é preciso criar um arquivo chamado “tslint.json” na raiz do projeto, que irá conter as regras de linting a serem seguidas. Um exemplo simples de configuração é o seguinte:

{
  "defaultSeverity": "error",
  "extends": [
    "tslint:recommended"
  ],
  "rules": {
    "quotemark": [true, "single"],
    "semicolon": [true, "always"],
    "trailing-comma": [true, {"multiline": "never", "singleline": "never"}],
    "no-console": false
  }
}

Neste exemplo, foi usado o conjunto de regras recomendadas pelo TSLint, que inclui várias boas práticas para TypeScript. Vamos entender o que significa cada uma dessas configurações?

• "defaultSeverity": "error": define o nível de severidade padrão para os problemas identificados pelo TSLint como "error", o que significa que eles são considerados erros no código.
• "extends": ["tslint:recommended"]: estende as regras de configuração padrão do TSLint com aquelas recomendadas pela configuração padrão.
• "rules": define regras personalizadas para o projeto.
• "quotemark": [true, "single"]: define que as aspas simples (') devem ser usadas para delimitar strings.
• "semicolon": [true, "always"]: requer que pontos e vírgulas sejam usados sempre no final de uma instrução.
• "trailing-comma": [true, {"multiline": "never", "singleline": "never"}]: permite uma vírgula final apenas em objetos ou arrays com várias linhas, mas não em objetos ou arrays de uma única linha.
• "no-console": false desabilita a regra que normalmente proíbe o uso da função console para evitar avisos no código.

Existem vários pacotes de configuração disponíveis para o TSLint além do tslint:recommended. Por exemplo, alguns dos pacotes mais populares são:

• tslint-config-airbnb: este é o conjunto de regras baseado no guia de estilo do Airbnb para JavaScript, adaptado para TypeScript. Ele segue um estilo mais rigoroso e consistente, que enfatiza a legibilidade e a manutenção do código.
• tslint-config-prettier: este é o conjunto de regras que desabilita todas as regras que podem entrar em conflito com o Prettier, que é uma ferramenta de formatação automática de código. Ele é útil para usar em conjunto com o Prettier, para garantir que o seu código seja formatado de forma consistente e sem erros.

Depois de construir o arquivo tslint.json devemos executar o TSLint no projeto. Para isso, é possível adicionar um script ao arquivo package.json, como o seguinte:

"scripts": {
  "lint": "tslint -p tsconfig.json"
}

Esse script irá rodar o TSLint usando o arquivo tsconfig.json, que contém as configurações do compilador do TypeScript. Para rodar o script, basta digitar no terminal:

npm run lint

Isso irá mostrar os possíveis erros ou avisos encontrados pelo TSLint no código TypeScript do projeto, indicando o arquivo, a linha, a coluna e a regra violada. Por exemplo:

ERROR: src/index.ts:1:13 - variable name must be in lowerCamelCase or UPPER_CASE
ERROR: src/index.ts:3:1 - Calls to 'console.log' are not allowed.

Para corrigir os erros automaticamente, é possível usar a opção --fix do TSLint, como no seguinte script:

"scripts": {
  "lint:fix": "tslint -p tsconfig.json --fix"
}

Configuração do TSLin realizada, podemos ver agora o exemplo com o ESLint. Vamos lá!

Configurando e usando o ESLint

Para configurar o ESLint em um projeto TypeScript, é preciso instalar os seguintes pacotes via npm:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin typescript

Neste caso, estamos instalando três pacotes:

• O primeiro é o “eslint” que é a ferramenta de linting;
• O segundo é o @typescript-eslint/parser, que é um pacote que permite ao ESLint analisar e entender código TypeScript;

• E por fim o @typescript-eslint/eslint-plugin, um pacote que contém um conjunto de regras específicas para TypeScript e serve como um plugin para o ESLint.

Em seguida, é preciso criar um arquivo chamado “.eslintrc.js” na raiz do projeto, que irá conter as regras de linting a serem seguidas. Um exemplo simples de configuração é o seguinte:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended'
  ],
  rules: {
    'quotes': ['error', 'single'],
    'semi': ['error', 'always'],
    'comma-dangle': ['error', 'never'],
    'no-console': 'off'
  }
};

Neste exemplo, foi usado o parser e o plugin do TypeScript para o ESLint, que permitem analisar e aplicar regras ao código TypeScript. Além disso, foi usado o conjunto de regras recomendadas pelo ESLint e pelo plugin do TypeScript, que incluem várias boas práticas. Vamos entender esse conjunto de regras?

• module.exports: esta é uma forma de exportar um objeto em JavaScript/Node.js que contém a configuração do ESLint.
• parser: '@typescript-eslint/parser': define o analisador (parser) que o ESLint deve usar para entender código TypeScript. O @typescript-eslint/parser é o analisador específico para TypeScript.
• plugins: ['@typescript-eslint']: especifica os plugins a serem usados, neste caso, o ESLint utilizará o plugin @typescript-eslint, que fornece regras e funcionalidades específicas para TypeScript.
• extends: aqui você está estendendo configurações predefinidas. O ESLint vai herdar regras de duas configurações:
  • eslint:recommended: essa configuração inclui as regras recomendadas pelo ESLint para JavaScript. Isso ajuda a garantir boas práticas gerais de codificação.
  • plugin:@typescript-eslint/recommended: essa configuração amplia as regras recomendadas, que são específicas para TypeScript fornecidas e fornecidas pelo plugin @typescript-eslint.
• rules: define as regras personalizadas para o seu projeto.
• 'quotes': define como aspas devem ser usadas. Em 'error', 'single' significa que as aspas simples devem ser usadas, e é um erro se as aspas duplas forem usadas.
• 'semi': define que todos os statements devem terminar com ponto e vírgula.
• 'comma-dangle': define que não deve haver vírgulas finais em arrays e objetos.
• 'no-console': define que a utilização de console não é proibida, ou seja, pode ser usada para depuração.

Para executar o ESLint no projeto, é preciso adicionar um script ao arquivo package.json, como o seguinte:

"scripts": {
  "lint": "eslint src/**/*.ts"
}

Esse script irá rodar o ESLint nos arquivos TypeScript dentro da pasta src. Para rodar o script, basta digitar no terminal:

npm run lint

Isso irá mostrar os possíveis erros ou avisos encontrados pelo ESLint no código TypeScript do projeto, indicando o arquivo, a linha, a coluna e a regra violada. Por exemplo:

src/index.ts
  1:13  error  Variable name `HelloWorld` must match one of the following formats: camelCase or UPPER_CASE  @typescript-eslint/naming-convention
  3:1   error  Unexpected console statement                                                               no-console

Para realizar correções automáticas nos erros, você pode usar a opção --fix do ESLint, conforme demonstrado no seguinte script

"scripts": {
  "lint:fix": "eslint src/**/*.ts --fix"
}

Agora que você tem os dois exemplos de configuração, quero te mostrar mais uma coisa. Você pode integrar essa funcionalidade diretamente em seu ambiente de desenvolvimento com o Linting no VSCode. Vamos entender como?

Linting no VSCode

É possível executar o linting automaticamente ao salvar o arquivo, habilitando a opção editor.codeActionsOnSave nas configurações do VS Code. Por exemplo, para corrigir automaticamente os problemas detectados pelo ESLint e pelo TSLint ao salvar o arquivo, você pode adicionar o seguinte código nas configurações do VS Code:

{
  // ... outras configurações
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.fixAll.tslint": true
  }
}

Conclusão

Neste artigo, vimos como configurar e usar tanto o TSLint quanto o ESLint com TypeScript, destacando as principais diferenças entre as duas ferramentas e as melhores práticas de linting. Vimos também os benefícios de seguir as melhores práticas no desenvolvimento front-end, como a melhoria da qualidade, da performance, da compatibilidade e da acessibilidade do código.

Agora se você deseja se aprofundar em TypeScript, não deixe de conferir a formação Formação Aplique TypeScript no front-end. Além disso, não deixe de compartilhar suas experiências de aprendizado desse assunto marcando os perfis da Alura. Nos vemos na próxima!