Forem: Gustavo Machado

🚀 Dica rápida para Angular! Aprenda a restaurar sufixos automaticamente nos arquivos e deixe seu projeto mais organizado, padronizado e profissional. 💡 Simples de configurar e faz toda diferença no dia a dia!

Gustavo Machado — Wed, 25 Mar 2026 22:59:33 +0000

Gustavo Machado

Mar 25

Restaurando sufixos nos arquivos do Angular.

#angular #frontend #architecture #webdev

Comments 1

2 min read

Restaurando sufixos nos arquivos do Angular(21).

Gustavo Machado — Wed, 25 Mar 2026 22:54:58 +0000

Do que se trata os sufixos no Angular?

Os sufixos nos arquivos do Angular (como .component, .service, .module) são convenções de nomenclatura recomendadas pelo Guia de Estilo oficial para identificar rapidamente a responsabilidade e o tipo de cada arquivo.

Eles funcionam como metadados visuais, permitindo que você diferencie arquivos com o mesmo nome base e facilitando a busca rápida em IDEs.

Como configurar?

Simplesmente vamos copiar este código e colar dentro do campo "schematics": {}, no arquivo angular.json para que a aplicação gere arquivos com sufixos através de comandos como "ng g c exemplo". Copie o código:

"@schematics/angular:component": { "type": "component" },
"@schematics/angular:directive": { "type": "directive" },
"@schematics/angular:service": { "type": "service" },
"@schematics/angular:guard": { "typeSeparator": "." },
"@schematics/angular:interceptor": { "typeSeparator": "." },
"@schematics/angular:module": { "typeSeparator": "." },
"@schematics/angular:pipe": { "typeSeparator": "." },
"@schematics/angular:resolver": { "typeSeparator": "." }

Antes:

Depois:

⚠️ A partir dessa alteração sua aplicação já está pronta!

Quais/como os arquivos são afetados?

Após as alterações os arquivos irão carregar consigo um sufixo do qual define e descreve sua devida função. Dentro do escopo dos arquivos alterados serão:

component
directive
service
guard
interceptor
module
pipe
resolver

Com sufixos:

Sem sufixos:

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Publiquei um artigo mostrando como estou iniciando meus projetos com Angular 21 e configurando tudo desde o começo com boas práticas.

Gustavo Machado — Mon, 09 Feb 2026 14:33:00 +0000

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

Gustavo Machado ・ Feb 9

#angular #frontend #tooling #tutorial

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

Gustavo Machado — Mon, 09 Feb 2026 14:11:26 +0000

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

⚠️ 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

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",

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

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

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

Também instale o pretty-quick:

npm install --save-dev pretty-quick

👉 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

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"
}

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

package.json
package-lock.json
dist
node_modules

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: {},
  },
);

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",

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

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

npm run format

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

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

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

npx husky add .husky/pre-push "npm run test"

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

Husky pronto!

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Olá a todos! Acabei de publicar um artigo pra galera que tem um HD como backup de dados pessoais e etc. Sempre é bom estar verificando a saúde do seu HD para não ter surpresas! 😁👍 Se possível dá uma força curtindo o post. Valeu galera!

Gustavo Machado — Fri, 26 Dec 2025 03:04:24 +0000

Gustavo Machado

Dec 26 '25

Você deve testar a Saúde do seu HD!

#hardware #harddisk #tutorial #resources

Comments 1

5 min read

Você deve testar a Saúde do seu HD!

Gustavo Machado — Fri, 26 Dec 2025 03:00:54 +0000

Ao comprar qualquer dispositivo de armazenamento permanente — como HDs, SSDs (NVMe ou SATA) ou unidades externas — é altamente recomendável realizar uma verificação de saúde antes de colocá-lo em uso contínuo. Esse processo ajuda a identificar possíveis falhas de fabricação, evitar perda de dados e, se necessário, acionar a garantia do fabricante.

Ao longo deste artigo, veremos passo a passo como realizar essa verificação na prática. Utilizaremos um HD externo como exemplo, mas as mesmas técnicas e ferramentas podem ser aplicadas a outros tipos de dispositivos de armazenamento.

⚠️ Neste artigo, vamos analisar e testar na pratica um HD externo do modelo: HD Externo 1TB 1000GB USB Type C 3.1 Slim Vault Exbom HDE-S1TA

Sumário

🔍 Verificação básica (sem instalar nada)
🧠 Verificar a saúde do HD (SMART)
🧪 Teste de superfície (lento, porém completo)
🤖 Considerações Finais do ChatGPT
💡 Boas Práticas & Dicas

1) 🔍 Verificação básica (sem instalar nada)

Checar erros pelo próprio Windows.

Conecte o HD externo
Abra Explorador de Arquivos
Clique com o botão direito no HD → Propriedades
Aba Ferramentas → Verificar

👉 Isso procura erros no sistema de arquivos (não testa o disco fisicamente a fundo).

OBS: Na maioria das vezes, quando seu HD for novo, o Windows não encontrará nenhum erro de imediato. Mesmo assim, continue com a verificação!

2) 🧠 Verificar a saúde do HD (SMART)

Checar erros por software (CrystalDiskInfo).

HDs e SSDs possuem dados internos chamados SMART, que indicam:

setores defeituosos
erros de leitura
desgaste
risco de falha

🔧 CrystalDiskInfo (RECOMENDADO)

🔹 Gratuito | Leve | Muito usado

📥 Site:
https://crystalmark.info/en/software/crystaldiskinfo/

📌 O que observar:

Status:

🟢 Good / Bom → saudável
🟡 Caution / Atenção → possível problema
🔴 Bad → risco alto

3 Principais indicadores de saúde:

1️⃣ Reallocated Sectors Count (Setores realocados)

📊 Como interpretar:
0 → ✅ Perfeito
1 a poucos setores → ⚠️ Alerta (não é normal em HD novo)
Número aumentando → 🚨 HD se degradando
Muitos setores → 💀 Falha iminente

2️⃣ Current Pending Sector (Setores pendentes)

São setores que o HD tentou ler, falhou e deixou “em espera” para decidir se são realmente defeituosos
➡️ É um sinal pior que Reallocated, porque o erro é atual.
📊 Como interpretar:
0 → ✅ OK
Qualquer valor > 0 → 🚨 Problema ativo
Se aumentar → ⚠️ Degradação acelerada

3️⃣ Uncorrectable Errors (Erros irrecuperáveis)

São erros em que o HD tentou corrigir falhou e perdeu dados
➡️ Esse é um dos indicadores mais graves.
📊 Como interpretar:
0 → ✅ Ideal
Qualquer valor > 0 → 🚨 Perda de dados já aconteceu
Valor crescendo → 💀 Falha iminente

💻 Meu HD:

🔍 Análise dos indicadores críticos (os mais importantes):

🔹 Reallocated Sectors Count

Valor bruto: 000000000000 → 0 setores
✅ Perfeito
Nenhum setor defeituoso precisou ser substituído.

🔹 Current Pending Sector

Valor bruto: 000000000000 → 0 setores pendentes
✅ Perfeito
Não há erros de leitura em andamento.

🔹 Uncorrectable Errors

Valor bruto: 000000000000 → 0 erros
✅ Perfeito
Nenhuma perda de dados registrada.

⚠️ Se aparecer qualquer valor diferente de zero nesses itens → sinal de alerta.

3) 🧪 Teste de superfície (lento, porém completo)

Esse teste lê todo o disco procurando setores defeituosos.

🔧 HD Tune

🔹 Versão Gratuita & Versão PRO | Muito usado

📥 Site:
https://www.hdtune.com/download.html

OBS: A versão PRO possui alguns dias de teste grátis, contudo você pode baixar para testar seu armazenamento.

📌 O que observar:

Passos:

Conecte seu HD na sua máquina
- Se for externo, sempre utilize as entradas USB da placa mãe
- Caso o HD externo tiver suporte para USB 3.0, faça o teste por ela
Instale e execute o software HD Tune
Verifique as informações do seu armazenamento:

Verifique o Benchmark do seu HD:

Verifique a Saúde do seu HD:

Realize o "Error Scan" no seu HD:
- Caso queira uma verificação mais rápida (superficial), habilite o "Quick Scan"

📖 Resultados:

🔍 INFO (informações gerais)

Capacidade: 1 TB → OK
Interface: SATA 3 (6.0 Gb/s) via USB → OK
SMART: suportado → OK
Sistema de arquivos: exFAT → normal para HD externo
Alignment: 2 MB → ✔️ alinhamento correto

👉 Nada fora do padrão aqui.

❤️ HEALTH (Saúde / SMART) - Indicadores críticos:

Reallocated Sector Count: 0 ✅
Current Pending Sector: 0 ✅
Uncorrectable Errors: 0 ✅
Interface CRC Errors: 0 ✅ Outros pontos:
Power-On Hours: 1 hora → praticamente novo
Start/Stop Count: 14 → normal
G-Sense Error Rate: 0 → nunca sofreu impacto
Temperatura: 39 °C → excelente

🟢 TODOS os atributos estão “OK”
👉 Nenhum sinal de desgaste, defeito ou erro oculto.

📊 BENCHMARK (Desempenho) - Resultados:

Velocidade média: ~40,6 MB/s
Máxima: ~41,6 MB/s
Mínima: ~32,9 MB/s
Access Time: 16,3 ms
Burst Rate: ~40,7 MB/s Interpretação (importante) - Esse HD é:
5400 RPM
USB
Provavelmente SMR

➡️ Esses valores são NORMAIS e esperados para esse tipo de HD externo.

📌 As pequenas quedas no gráfico (os “dentinhos”) são:

reposicionamento do braço mecânico
cache sendo esvaziado
absolutamente normais

⚠️ Não são setores defeituosos.

🧪 ERROR SCAN (Teste de superfície)

🟢 100% VERDE
Blocos danificados: 0.0%
Nenhum setor defeituoso encontrado
Leitura limpa em toda a área testada

👉 Esse é o teste físico mais importante — passou com louvor.

4) 🤖 Considerações Finais do ChatGPT

Ao incluir todos estes dados e parametros para o ChatGPT analisar, ele deu um veredito...

✅ CONCLUSÃO FINAL (bem direta)

🟢 SEU HD ESTÁ IMPECÁVEL

✔️ Nenhum setor defeituoso
✔️ Nenhum erro SMART
✔️ Nenhuma perda de dados
✔️ Desempenho dentro do esperado
✔️ HD novo e saudável

5) 💡 Boas Práticas & Dicas

🚨 Sinais físicos de problema (mesmo se software disser OK)

Fique atento se o HD:

faz cliques (“tec tec”)
demora muito para abrir pastas
desconecta sozinho
trava o sistema ao copiar arquivos

⚠️ Esses sinais não são normais, mesmo que SMART diga “Bom”.

OBS: O HD pode fazer cliques (“tec tec”), caso o suprimento de energia for pouca. Geralmente as USBs que não são diretas da "Placa Mãe" do PC, costumam ter baixo desempenho de energia.

🟢 Boas Práticas:

Utilize seu HD da seguinte forma:

ejeta corretamente:
- Nunca retire o cabo de energia antes de ejetar
evita impactos:
- O HD possui um disco giratório sensível
controla temperatura
faz backup:
- Um único HD nunca é confiável, portanto faça redundância
monitora SMART

👉 Seu HD pode durar 5–10 anos facilmente.

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Olá a todos! Fiz um artigo passo a passo para configurar ferramentas de arquitetura para o angular 20, como o prettier, ESlint e o husky!

Gustavo Machado — Tue, 26 Aug 2025 01:47:41 +0000

Gustavo Machado

Aug 26 '25

Configurando ESLint + Prettier + Husky no Angular(20)

#angular #codequality #tooling #tutorial

Comments 3

4 min read

Configurando ESLint + Prettier + Husky no Angular(20)

Gustavo Machado — Tue, 26 Aug 2025 01:44:51 +0000

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.

1. ESLint

Definição

É um linter (ou seja, um analisador de código) que percorre o código procurando por problemas.
Baseia-se em regras configuráveis, que podem ser habilitadas ou desativadas conforme a necessidade do projeto.

Função

Garantir qualidade do código
Manter consistência
Prevenir bugs
Melhorar a manutenção
Integração com o fluxo de trabalho

2. Prettier

Definição

O Prettier é um formatador de código opinativo.
Ele não analisa regras de qualidade ou possíveis bugs como o ESLint.
O foco dele é padronizar a formatação do código automaticamente, sem precisar discutir estilo no time.

Função

Formatação consistente
- Decide automaticamente coisas como:
- Tamanho da indentação (2 ou 4 espaços)
- Uso de ponto e vírgula no final de linhas
- Aspas simples ou duplas
- Quebra de linha em funções longas
- Espaços em branco e vírgulas finais
Economizar tempo
Integração automática

3. Husky

Definição

O Husky é uma ferramenta que permite configurar Git hooks facilmente.
Git hooks são scripts que o Git executa automaticamente em momentos específicos, como antes de um commit (pre-commit) ou antes de um push (pre-push).

Função

Garantir qualidade no commit
- Rodar o ESLint e o Prettier antes de permitir o commit.
Rodar testes automaticamente
- Impedir que alguém faça commit/push se os testes quebraram.
Aplicar verificações personalizadas
- Conferir mensagens de commit.
- Rodar ferramentas de segurança ou de build.

Passos para instalação das ferramentas no Angular:

Adicionar e Configurar o ESLint
Adicionar e configurar o Prettier
Configuração da integração do ESLint
Configuração de scripts no package.json
Instalar e configurar o husky

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

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

Também instale o pretty-quick:

npm install --save-dev pretty-quick

👉 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

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"
}

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

package.json
package-lock.json
dist
node_modules

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: {},
  },
);

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",

Agora tente rodar o comando do lint:

npm run lint

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

npm run format

5. Instalar e configurar 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

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

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

npx husky add .husky/pre-push "npm run test"

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

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Olá, pessoal! Espero que este passo a passo para configurar o Jest no angular ajudem vocês. Caso algo estiver incoerente, peço que me avisem se possível. Muito obrigado e espero que gostem!

Gustavo Machado — Wed, 30 Jul 2025 02:11:43 +0000

Gustavo Machado

Jul 30 '25

Instalando Jest no Angular(20)

#development #angular #unittest #frontend

Comments 1

3 min read

Instalando Jest no Angular(20)

Gustavo Machado — Wed, 30 Jul 2025 02:09:21 +0000

O que é o Jest e para que serve?

O Jest é um framework de testes em JavaScript criado pelo Facebook, amplamente utilizado em projetos com React, mas que também pode ser facilmente integrado a aplicações Angular, Node.js, Vue, entre outras.

Sua principal função é permitir a criação, execução e validação de testes automatizados, especialmente os testes unitários e testes de snapshot, de forma rápida e confiável.

Site oficial:

https://jestjs.io

Passos para configuração do Jest no Angular:

Desinstalar o Karma e Jasmine do projeto;
Configure scripts de execução de testes no package.json;
Remover o objeto de teste do angular.json;
Instalar o pacote do Jest;
Configurar o jest no projeto;
Criar/configurar arquivo setup.jest.ts;
Atualizar o arquivo tsconfig.spec.json;
Ative o esModuleInterop;
Execute o jest/testes unitários.

1. Desinstalar o Karma e Jasmine do projeto:

Primeiro devemos desinstalar o Karma e Jasmine do projeto. O Karma e Jasmine são ferramentas de testes que já vem configurados inicialmente nos projetos angular, sendo o Jasmine um framework e o Karma um "Test Runner".

Execute o seguinte comando no terminal:

npm remove @types/jasmine jasmine-core karma karma-chrome-launcher karma-coverage karma-jasmine karma-jasmine-html-reporter

2. Configure scripts de execução de testes no package.json:

Agora devemos configurar o package.json para reconhecer e executar comandos básicos e essenciais de teste do Jest.

Copie e cole os seguintes scripts no package.json:

"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",

3. Remover o objeto de teste do angular.json:

Neste passo, vamos remover o objeto de teste do angular.json, cujo o mesmo faz parte da configuração do Karma e Jasmine, do qual foram removidos.

Remova as seguintes linhas em vermelho:

4. Instalar o pacote do Jest:

Finalmente instalaremos a dependência do Jest no projeto.

Execute o seguinte comando no terminal:

npm install --save-dev @types/jest jest-preset-angular

5. Configurar o jest no projeto:

Agora vamos configurar o jest no Angular, seja através do arquivo jest.config.js ou dentro do package.json.

jest.config.js:

Copie e cole dentro do arquivo:

module.exports = {
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/src/setup.jest.ts'],
};

Dentro do package.json:

Copie e cole dentro do arquivo:

"jest": {
    "preset": "jest-preset-angular",
    "setupFilesAfterEnv": [
      "<rootDir>/src/setup.jest.ts"
    ],
    "testPathIgnorePatterns": [
      "<rootDir>/node_modules/",
      "<rootDir>/dist/"
    ],
    "globals": {
      "ts-jest": {
        "tsConfig": "<rootDir>/tsconfig.spec.json",
        "stringifyContentPathRegex": "\\.html$"
      }
    }
  }

6. Criar/configurar arquivo setup.jest.ts:

Após configurar o jest, vamos criar um arquivo typescript para importar o modulo do jest no mesmo.
Primeiramente crie um arquivo chamado setup.jest.ts dentro da pasta src.

Copie e cole dentro do arquivo:

import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone/index.mjs';

setupZoneTestEnv();

7. Atualizar o arquivo tsconfig.spec.json:

No passo 7, vamos ter que configurar o arquivo tsconfig.spec.json para o jest e referenciar o setup.jest.ts que acabamos de criar.

Faça as seguintes alterações dentro do arquivo:

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/spec",
    "types": ["jest", "node"],
  },
  "files": ["src/setup.jest.ts"],
  "include": ["src/**/*.spec.ts", "src/**/*.ts"]
}

8. Ative o esModuleInterop:

Caso você não ativar o esModuleInterop, provavelmente aparecerá um aviso no terminal ao rodar os testes, contudo é importante para evitar erros de importação.

Abra o seu tsconfig.json e adicione ou modifique esta configuração:

{
  "compilerOptions": {
    "esModuleInterop": true,
  }
}

9. Execute o jest/testes unitários:

Agora vamos executar os testes unitários através do jest e verificar se está tudo ok.

Execute no terminal:

npm run test

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Olá, pessoal! Fiz um artigo mirando no dev iniciante em backend Java. Caso puderem dar uma olhada.

Gustavo Machado — Tue, 22 Apr 2025 06:30:16 +0000

Gustavo Machado

Apr 22 '25

Como instalar e configurar da maneira certa um projeto Java SpringBoot + Maven?

#java #springboot #programming #backend

Comments

4 min read

Como instalar e configurar da maneira certa um projeto Java SpringBoot + Maven?

Gustavo Machado — Tue, 22 Apr 2025 06:26:14 +0000

Como configurar um projeto em Java SpringBoot?

Olá a todos! Este é um artigo dedicado as configurações iniciais para um projeto backend feito com java SpringBoot. Iremos desde a instalação até a configuração básica das dependências do projeto.

Instalação do Java

Para começar, vamos instalar o JDK do Java, ou seja, o seu "kit de desenvolvimento". Assim poderemos executar e desenvolver projetos cujo a linguagem é baseada no Java.

Vamos seguir os seguintes passos:

Download do instalador de uma versão do Java (preferível que seja LTS);
Instalação do Java (siga as recomendações do instalador);
Configurações das Variáveis de ambiente.

1. Download

Clique no Link para baixar a última versão LTS (Long Time Support) para Windows.

JDK 21 - LTS

Exemplo:

2. Instalação

Siga as opções pre-configuradas do instalador! A menos que queira personalizar...

Confirme a instalação do Java no PC, através do comando:
java --version

Exemplo:

3. Variáveis de ambiente

Agora vamos configurar as variaveis de ambiente, cujo a função é:
Permitir que o sistema operacional saiba onde encontrar os arquivos executáveis do Java, como o javac (compilador) e o java (interpretador), a partir de qualquer diretório no terminal.

Siga os seguintes passos:

1) Acesse as Variáveis de Ambiente no Menu do Windows.

2) Crie uma nova variável de ambiente.

Dentro do campo "Valor da variável" copie o caminho da pasta onde o seu JDK está instalado!

3) Aponte a nova variável no "path".

Edite a variável de ambiente "path" e lá crie um novo caminho com o valor: %JAVA_HOME%\bin.

Instalação do Maven

Agora vamos iniciar a instalação do nosso "Gerenciador de dependências/pacotes" no qual vai automatizar a instalação e administração das bibliotecas e dependências usadas no projeto java. É como se fosse um NPM, porém do java:

1. Download

Clique no Link para baixar a última versão do maven em "zip".

Apache Maven

2. Instale o WinRar

Precisamos agora de um software para descompactar a pasta zip do Maven.

Faça o download:
WinRar

3. Descompacte o zip do maven

Descompacte a pasta zipada do maven no mesmo diretório em que está localizada a pasta do java (apenas para fim de organização).
Exemplo: C:\Program Files

4. Configure as variáveis de ambientes para o maven

1) Crie uma nova variável global chamada "MAVEN_HOME".

2) Na variável de ambiente "path", aponte para a pasta "bin" do maven.

Configuração do Spring Boot

Finalmente vamos aos passos iniciais para começar um projeto Java Spring Boot. Aqui está o "spring initializr", que é basicamente um "iniciador de projeto Java Spring" de maneira mais fácil e versátil.

Farei um outro artigo explicando mais detalhadamente cada ponto deste recurso, mas mostrarei agora um "overview" da ferramenta, para deixar as coisas mais claras.

Link do spring initializr:
spring initializr

Acompanhe agora a interface do "" e suas funcionalidades:

Gerenciador de bibliotecas;
Linguagem de tecnologia;
Versão do Spring Boot (já vem com versão default);
Metadados do projeto (nome, descrição, autoria/grupo e etc.);
Como o seu projeto é "embalado" para distribuição;
Versão do Java (JDK);
Configuração de dependências (bibliotecas e recursos prontos).

Créditos

Desta maneira você poderá começar um projeto com Java Spring Boot na sua máquina!
Caso queira acompanhar estes passos por videoaula, disponibilizarei alguns links de vídeos do qual aprendi e extraí os dados para este artigo.

Videoaulas - Canal "Curso De Tecnologia"

Parte do Java + Maven:

Parte do Spring Boot:

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

Att.
Gustavo Machado Pontes

linktr linkedin github instagram twitter

Forem: Gustavo Machado

🚀 Dica rápida para Angular! Aprenda a restaurar sufixos automaticamente nos arquivos e deixe seu projeto mais organizado, padronizado e profissional. 💡 Simples de configurar e faz toda diferença no dia a dia!

Restaurando sufixos nos arquivos do Angular.

Restaurando sufixos nos arquivos do Angular(21).

Do que se trata os sufixos no Angular?

Como configurar?

Antes:

Depois:

Quais/como os arquivos são afetados?

Com sufixos:

Sem sufixos:

Publiquei um artigo mostrando como estou iniciando meus projetos com Angular 21 e configurando tudo desde o começo com boas práticas.

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

Gustavo Machado ・ Feb 9

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

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

Vitest

ESLint

Prettier

Husky

Inicializando um novo projeto Angular 21

Principais:

Outras:

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

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

SPA

✅ Quando usar

❌ Quando não usar

SSR

✅ Quando usar

❌ Quando não usar

SSG

✅ Quando usar

❌ Quando não usar

3) Escolhendo a otimização da IA

Configurando Vitest

1) Instalar pacote de cobertura de testes

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

3) Testando o sistema de testes

Configurando o ESLint e o Prettier

1) Adicionar e Configurar o ESLint

2) Adicionar e configurar o Prettier

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

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

Instalando e configurando o husky

Olá a todos! Acabei de publicar um artigo pra galera que tem um HD como backup de dados pessoais e etc. Sempre é bom estar verificando a saúde do seu HD para não ter surpresas! 😁👍 Se possível dá uma força curtindo o post. Valeu galera!

Você deve testar a Saúde do seu HD!

Você deve testar a Saúde do seu HD!

Sumário

1) 🔍 Verificação básica (sem instalar nada)

Checar erros pelo próprio Windows.

2) 🧠 Verificar a saúde do HD (SMART)

Checar erros por software (CrystalDiskInfo).

📌 O que observar:

Status:

3 Principais indicadores de saúde:

💻 Meu HD:

🔍 Análise dos indicadores críticos (os mais importantes):

3) 🧪 Teste de superfície (lento, porém completo)

Esse teste lê todo o disco procurando setores defeituosos.

📌 O que observar:

Passos:

📖 Resultados:

4) 🤖 Considerações Finais do ChatGPT

Ao incluir todos estes dados e parametros para o ChatGPT analisar, ele deu um veredito...

✅ CONCLUSÃO FINAL (bem direta)

🟢 SEU HD ESTÁ IMPECÁVEL

5) 💡 Boas Práticas & Dicas

🚨 Sinais físicos de problema (mesmo se software disser OK)

🟢 Boas Práticas:

Olá a todos! Fiz um artigo passo a passo para configurar ferramentas de arquitetura para o angular 20, como o prettier, ESlint e o husky!

Configurando ESLint + Prettier + Husky no Angular(20)

Configurando ESLint + Prettier + Husky no Angular(20)

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

1. ESLint

Definição

Função

2. Prettier

Definição

Função

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

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