Projeto Node.js com TypeScript, Jest e ESLint

Configurar um projeto Node.js com TypeScript, Jest e ESLint pode parecer desafiador, mas é essencial para garantir um desenvolvimento robusto e eficiente. Ao seguir as etapas certas, é possível estabelecer um ambiente que melhora a qualidade do código e facilita a manutenção do projeto. Este artigo apresentará um passo a passo claro, com exemplos de código práticos para ajudar na configuração.

O uso do TypeScript adiciona tipagem estática ao JavaScript, permitindo que desenvolvedores identifiquem erros cedo. Já o Jest proporciona uma estrutura de testes sólida, enquanto o ESLint garante que o código siga padrões de estilo convenientes. Essas ferramentas juntas criam um fluxo de trabalho que não só aumenta a produtividade, mas também a confiabilidade do software.

Se você está buscando otimizar seu processo de desenvolvimento e garantir a qualidade do seu código, este guia será um recurso valioso. Através de instruções detalhadas e exemplos práticos, a configuração do seu projeto será facilitada e eficiente, permitindo que você se concentre na lógica do seu aplicativo.

Configuração Inicial do Ambiente Node.js

Para iniciar um projeto com Node.js, é essencial montar um ambiente adequado. Isso inclui desde a instalação do Node.js e do NPM até a criação do diretório para o projeto e sua inicialização.

Instalação do Node.js e NPM

A instalação do Node.js pode ser feita através do site oficial Node.js. Ele oferece a versão LTS, recomendada para a maioria dos usuários. A instalação do NPM, que vem junto com o Node.js, permite gerenciar pacotes e dependências.

Em sistemas Windows, o instalador é um arquivo .msi, pode ser encontrado no site oficial. Para macOS, o usuário pode optar por Homebrew com o comando:

brew install node

Em Linux, o Node.js pode ser instalado via package manager, como o APT:

sudo apt install nodejs npm

Para verificar se a instalação foi bem-sucedida, execute node -v e npm -v no terminal. A versão instalada deve ser exibida.

Criação do Diretório do Projeto

Após a instalação, o próximo passo é criar um diretório para o projeto. Em um terminal, o comando a ser utilizado é:

mkdir nome-do-projeto
cd nome-do-projeto

Substitua “nome-do-projeto” pelo nome desejado. A utilização do comando cd navega até o novo diretório.

É uma prática comum criar um diretório separado para cada projeto. Isso garante que as dependências e configurações não se misturem com outros projetos, facilitando a organização.

Inicialização do Projeto com NPM

Uma vez no diretório do projeto, o usuário deve inicializar o projeto com NPM. O comando necessário é:

npm init

Este comando inicia um assistente que irá solicitar informações como nome do projeto, versão e descrição. A resposta a essas informações é importante para a configuração adequada do projeto.

Para aceitar as configurações padrão, pode-se usar:

npm init -y

Isso cria um arquivo package.json com os valores padrão. O package.json é essencial, pois contém as dependências e scripts do projeto. A partir desse ponto, o ambiente estará pronto para adicionar TypeScript, Jest e ESLint.

Configuração do TypeScript

A configuração do TypeScript é essencial para o funcionamento adequado do projeto. Esta seção aborda a instalação do TypeScript e a criação do arquivo de configuração tsconfig.json, que são fundamentais para aproveitamento total dos recursos da linguagem.

Instalação do TypeScript

Para instalar o TypeScript, é necessário ter o Node.js e o npm (Node Package Manager) instalados. A instalação pode ser realizada de forma simples usando o comando:

npm install typescript --save-dev

Isso adiciona o TypeScript como uma dependência de desenvolvimento ao projeto. Após a instalação, é recomendável verificar a versão instalada com:

npx tsc -v

Essa verificação confirma que o TypeScript foi instalado corretamente e está disponível para uso. Além disso, é possível incluir o TypeScript globalmente com o comando:

npm install -g typescript

Essa abordagem permite o uso do TypeScript em qualquer lugar no sistema.

Criação e Configuração do tsconfig.json

O arquivo tsconfig.json é crucial para a configuração do projeto TypeScript. Ele define as opções do compilador e o comportamento da transpilação. Para criar este arquivo, pode-se usar o comando:

npx tsc --init

Este comando gera um arquivo base que pode ser editado conforme necessário. As configurações mais comuns incluem:

• target: Especifica a versão do JavaScript de saída (por exemplo, "es6").
• module: Define o sistema de módulos, como "commonjs" ou "esnext".
• strict: Ativa as verificações rigorosas de tipo, melhorando a qualidade do código.

Um exemplo de um arquivo tsconfig.json simples pode ser:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true
  }
}

Essas opções garantem que o projeto utilize boas práticas e aproveite plenamente as funcionalidades do TypeScript.

Integração e Configuração do Jest

Para integrar o Jest em um projeto Node.js com TypeScript, é necessário seguir alguns passos importantes. A configuração correta garante que os testes sejam executados sem problemas e que o TypeScript funcione conforme o esperado.

Instalação do Jest e TypeScript

A instalação do Jest em um projeto TypeScript exige que alguns pacotes sejam adicionados. Execute os seguintes comandos no terminal:

npm install --save-dev jest ts-jest @types/jest

• jest: framework de testes.
• ts-jest: permite o uso de Jest com TypeScript.
• @types/jest: fornece definições de tipo para Jest.

Após a instalação, é fundamental criar um arquivo de configuração do Jest. O comando abaixo pode ser utilizado para isso:

npx ts-jest config:init

Esse arquivo contém configurações básicas que podem ser ajustadas conforme necessário.

Configuração do Jest para TypeScript

A configuração do Jest para TypeScript pode ser ajustada no arquivo jest.config.js. Um exemplo básico de configuração inclui:

module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'node',
};

• preset: especifica que o ts-jest será usado.
• testEnvironment: define o ambiente de testes, que no caso é o node.

Além disso, é importante garantir que o TypeScript esteja configurado corretamente. O arquivo tsconfig.json deve conter as seguintes opções:

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true
  }
}

Essas opções asseguram que o TypeScript compile o código de forma adequada para o Jest.

Configuração do ESLint e Boas Práticas

Para garantir um código limpo e consistente em um projeto Node.js utilizando TypeScript, a configuração do ESLint é essencial. O ESLint ajuda a identificar e corrigir problemas no código, enquanto as boas práticas promovem a legibilidade e a manutenção do projeto.

Instalação e Inicialização do ESLint

Primeiramente, é necessário instalar o ESLint e suas dependências no projeto. Use os seguintes comandos no terminal:

npm install eslint --save-dev
npm install eslint-config-airbnb --save-dev
npm install eslint-plugin-import eslint-plugin-react eslint-plugin-react-hooks --save-dev

Após a instalação, inicialize o ESLint com:

npx eslint --init

O assistente irá guiar o usuário para escolher as configurações desejadas, incluindo o estilo de código e se o projeto usa TypeScript. Isso criará um arquivo .eslintrc.js para personalizar as regras e outras opções de linting conforme necessário.

Regras de Linting e Convenções de Código

As regras de linting podem variar dependendo das preferências da equipe. Algumas regras comuns incluem:

• indent: Define o tamanho da indentação (ex: 2 espaços).
• quotes: Especifica o uso de aspas simples ou duplas.
• semi: Define a obrigatoriedade de ponto e vírgula.

Um exemplo de configuração de regras no .eslintrc.js:

module.exports = {
  rules: {
    indent: ['error', 2],
    quotes: ['error', 'single'],
    semi: ['error', 'always'],
  },
};

Além disso, é importante manter convenções de código como nomes de variáveis descritivos e organização dos arquivos. A consistência na formatação do código ajuda na colaboração e clareza.

Integração do ESLint com TypeScript

Para integrar o ESLint com TypeScript, é necessário instalar dependências adicionais.

Execute:

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

No arquivo de configuração do ESLint, o parser e plugin devem ser adicionados:

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
};

Adicione regras específicas para TypeScript, como verificar tipos e evitar variáveis não utilizadas. Isso assegura que o código TypeScript siga as melhores práticas e ajude a evitar erros comuns. Um exemplo de regra adicional:

rules: {
  '@typescript-eslint/no-unused-vars': ['error'],
},

Essas configurações promovem um ambiente de desenvolvimento mais robusto e organizado, a seguir vamos mostrar como seria um arquivo .eslintrc.js completamente configurado com algumas das regras que são mais utilizadas na comunidade.

module.exports = {
  parser: '@typescript-eslint/parser', // Define o parser para TypeScript
  parserOptions: {
    ecmaVersion: 2020, // Permite o uso de funcionalidades modernas do ECMAScript
    sourceType: 'module', // Permite o uso de importações e exportações ES6
  },
  extends: [
    'eslint:recommended', // Regras recomendadas do ESLint
    'plugin:@typescript-eslint/recommended', // Regras recomendadas para TypeScript
    'airbnb-typescript/base', // Configuração base do Airbnb para TypeScript
  ],
  plugins: [
    '@typescript-eslint', // Plugin para TypeScript
  ],
  rules: {
    // Adicione suas regras personalizadas aqui
    'no-console': 'warn', // Avisar sobre o uso de console
    'no-unused-vars': 'off', // Desativa a regra para variáveis não usadas (gerido pelo TypeScript)
    '@typescript-eslint/no-unused-vars': ['warn'], // Recomendado para TypeScript
    'import/prefer-default-export': 'off', // Desativa a regra para exportação padrão
    'no-underscore-dangle': 'off', // Desativa a regra para identificadores com sublinhado inicial
  },
  settings: {
    'import/resolver': {
      typescript: {}, // Resolva imports para arquivos TypeScript
    },
  },
};

Conclusão

A combinação de Node.js, TypeScript, Jest e ESLint proporciona uma experiência de desenvolvimento rica e produtiva. Com TypeScript, você adiciona robustez e clareza ao seu código; com Jest, garante a qualidade e a confiabilidade do seu código através de testes abrangentes; e com ESLint, mantém um código limpo e consistente.

Investir tempo na configuração e na integração dessas ferramentas não só melhora a qualidade do seu código, mas também contribui para uma base de código mais sustentável e fácil de manter. Ao seguir as melhores práticas e adaptar as configurações às necessidades específicas do seu projeto, você estará bem posicionado para desenvolver aplicações Node.js de alta qualidade e preparadas para o futuro.

Links úteis

• Site oficial do Node.js
• Conteúdo relacionado