DEV Community

Cover image for Configuração do Angular 21 (Vitest, ESLint, Prettier e Husky)
Gustavo Machado
Gustavo Machado

Posted on

Configuração do Angular 21 (Vitest, ESLint, Prettier e Husky)

#angular #frontend #tooling #tutorial

O que são cada item e para que serve?

Confira a definição e função básica de cada item presente neste artigo, que compõe a arquitetura de um projeto Frontend.

Vitest

  • Um framework de testes unitários e de integração focado em projetos que utilizam Vite. Ele foi criado para ser rápido, simples e totalmente integrado ao ecossistema moderno de Frontend.

ESLint

  • Uma ferramenta de análise estática de código (linter) para JavaScript e TypeScript. Analisa automaticamente o código-fonte em busca de erros, padrões problemáticos e inconsistências de estilo antes mesmo da aplicação rodar.

Prettier

  • Um formatador de código automático e opinativo para diversas linguagens, como JavaScript, TypeScript, HTML, CSS, JSON, entre outras.

Husky

  • Uma ferramenta que permite configurar Git Hooks de forma simples dentro do seu projeto.

Inicializando um novo projeto Angular 21

Primeiramente vamos criar e configurar um novo projeto na versão 21 do Angular, pois antes da versão 21 do Angular, muita coisa mudou. Por exemplo:

Principais:
  • Zoneless como padrão
  • Reactividade e Signals mais maduros
  • Vitest substitui Karma/Jasmine
Outras:
  • Melhorias de performance e build
  • HttpClient incluído automaticamente
  • Suporte a AI no CLI
  • Angular Aria (preview)

1) Inicializando o projeto e escolhendo Sistema de Estilização

Vamos inicializar o projeto com o nome da sua escolha e escolher o sistema de estilização da sua preferência. Recomendo usar o Tailwind CSS.

ng new meu-projeto
Enter fullscreen mode Exit fullscreen mode

⚠️ Neste artigo escolheremos a opção: Tailwind CSS

2) Escolhendo tipos de renderização (SPA, SSR e SSG)

Agora escolheremos o tipo de renderização, você pode escolher qual for melhor para você a partir de seus objetivos. Por exemplo:

SPA

✅ Quando usar
  • Aplicações autenticadas
  • Dashboards e painéis administrativos
  • Sistemas internos (ERP, CRM)
  • Aplicações altamente interativas
  • Projetos onde SEO não é prioridade
  • Quando se deseja deploy simples e estático
❌ Quando não usar
  • Sites que dependem fortemente de SEO
  • Landing pages focadas em ranqueamento
  • E-commerces públicos
  • Projetos que exigem melhor performance no primeiro carregamento

SSR

✅ Quando usar
  • E-commerces
  • Portais de conteúdo dinâmico
  • Aplicações públicas com dados que mudam com frequência
  • Projetos que exigem SEO avançado
  • Quando é necessário conteúdo atualizado em tempo real por requisição
❌ Quando não usar
  • Sistemas internos autenticados
  • Aplicações totalmente estáticas
  • Projetos simples onde infraestrutura Node seria excesso
  • Quando se deseja hospedagem puramente estática (sem servidor)

SSG

✅ Quando usar
  • Portfólios
  • Blogs
  • Landing pages
  • Sites institucionais
  • Documentações
  • Conteúdo que muda com pouca frequência
  • Projetos que precisam de SEO e alta performance
  • Quando se deseja deploy simples via CDN
❌ Quando não usar
  • Conteúdo altamente dinâmico que muda a cada requisição
  • Sistemas com dados personalizados por usuário
  • Aplicações que dependem de atualização em tempo real
  • Projetos com grande volume de rotas dinâmicas imprevisíveis

⚠️ Neste artigo escolheremos a opção: n (SPA)

3) Escolhendo a otimização da IA

Essa etapa é só pra configurar guidelines automáticas de boas práticas do Angular dentro da ferramenta de IA que você usa no editor.

Não muda nada no funcionamento do projeto.
É só integração com assistente de código.

⚠️ Neste artigo escolheremos a opção: GitHub Copilot

Projeto criado!

Configurando Vitest

Com o projeto criado, vamos configurar o Vitest para contemplar maior desempenho em seus testes.

1) Instalar pacote de cobertura de testes

Por mais que o Vitest já vem instalado como padrão no Angular 21, ele ainda precisa de alguns ajustes para contemplar 100% da sua potencialidade.

Contudo, vamos instalar o pacote de cobertura de testes do Vitest, assim poderemos visualizar melhor nossos testes unitários.

npm install -D @vitest/coverage-v8
Enter fullscreen mode Exit fullscreen mode

2) Configurar o script de teste com cobertura no Package.json

Agora iremos apenas configurar o script para rodar o teste unitário com cobertura no nosso projeto.

"test:coverage": "ng test --coverage",
Enter fullscreen mode Exit fullscreen mode

Ficará assim:

3) Testando o sistema de testes

Para último passo, vamos testar se tudo está funcionando.

Execute o seguinte comando no CMD:

npm run test:coverage
Enter fullscreen mode Exit fullscreen mode

Resultado:

Vá até a pasta "coverage" e acesse o index.html para ver a cobertura atual:

Resultado:

Vitest pronto!

Configurando o ESLint e o Prettier

Partiremos para a configuração do Eslint e o Prettier no projeto. Esta etapa será conjunta, pois ambas as ferramentas deverão se integrar em conjunto.

1) Adicionar e Configurar o ESLint

Começamos instalando o ESLint no projeto Angular. Isso irá criar um arquivo eslint.config.js no seu diretório raiz.

ng add @angular-eslint/schematics
Enter fullscreen mode Exit fullscreen mode

2) Adicionar e configurar o Prettier

Agora, vamos instalar o Prettier junto com as recomendadas integrações com o ESLint.

Instale o prettier:

npm install --save-dev prettier
Enter fullscreen mode Exit fullscreen mode

Também instale o pretty-quick:

npm install --save-dev pretty-quick
Enter fullscreen mode Exit fullscreen mode

👉 pretty-quick é bem útil porque ele roda só nos arquivos staged, e não no projeto inteiro.

Depois instale os plugins para compatibilidade com o ESLint:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo chamado .prettierrc no diretório raiz do seu projeto:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "ignore",
  "embeddedLanguageFormatting": "auto"
}
Enter fullscreen mode Exit fullscreen mode

Crie um arquivo chamado .prettierignore para que o prettier os ignore e não os formate:

package.json
package-lock.json
dist
node_modules
Enter fullscreen mode Exit fullscreen mode

3) Configuração da integração do ESLint

Copie e cole o seguinte código no arquivo eslint.config.js.

// @ts-nocheck
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");
const prettierPlugin = require("eslint-plugin-prettier");
const prettierConfig = require("eslint-config-prettier");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      prettierConfig,
    ],
    plugins: {
      prettier: prettierPlugin,
    },
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
      "prettier/prettier": [
        "error",
        {
          endOfLine: "auto",
        },
      ],
      "@typescript-eslint/no-explicit-any": "error", // Forbid usage of 'any'
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  },
);
Enter fullscreen mode Exit fullscreen mode

4) Configuração de scripts no package.json

Nesta etapas vamos automatizar alguns comandos da aplicação para serem executadas através de scripts no package.json.

"lint": "ng lint",
"pretty-quick": "pretty-quick --staged",
"lint:fix": "ng lint --fix",
"format": "prettier --write .",
"format:staged": "pretty-quick --staged",
Enter fullscreen mode Exit fullscreen mode

Remova as configurações do Prettier no package.json, que foram previamente adicionadas pelo próprio Angular como padrão:

Agora tente rodar o comando do lint:

npm run lint
Enter fullscreen mode Exit fullscreen mode

Caso erros de formatação aparecer do Prettier, rode o comando:

npm run format
Enter fullscreen mode Exit fullscreen mode

Prettier e Eslint prontos!

Instalando e configurando o husky

No passo 5, vamos instalar e configurar o husky para podermos executar as ferramentas anteriores ao fazer commits e pushes.

npx husky-init && npm install

#ou

npx husky-init; npm install
Enter fullscreen mode Exit fullscreen mode

Isso cria um arquivo .husky e um arquivo de hook (gancho) para pre-commit.

Agora edite o arquivo de pre-commit:

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run format:staged
npm run lint
Enter fullscreen mode Exit fullscreen mode

Além do pre-commit, adicionaremos também um pre-push:

npx husky add .husky/pre-push "npm run test"
Enter fullscreen mode Exit fullscreen mode

O arquivo irá ter as seguintes configurações (este arquivo executará testes unitários nos pushes do GIT):

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run test
Enter fullscreen mode Exit fullscreen mode

Husky pronto!

Desde já agradeço a todos e espero que tenham gostado!

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Top comments (1)

Collapse
 
devgustavus profile image
Gustavo Machado •

Caso encontrem alguma inconsistência nas informações, por favor, comentem ou me mandem mensagem!
Desde já agradeço a todos.