DS & II

Capítulo 13 - Linters e Formatadores

Leitura de 4 min

🚀 Capítulo 13: ESLint e Prettier: Organizando a Bagunça (Tema: Marie Kondo)

NOTE

Este capítulo utiliza a temática de Marie Kondo para explicar o ESLint e o Prettier. Deixe que as ferramentas organizem o seu código automaticamente para que ele traga alegria a quem for ler!

1. 🎯 Objetivo da Aula

Compreender o uso de ferramentas de análise estática (Linters) e de formatação de código, conhecendo o ESLint e o Prettier, e entendendo como eles ajudam a manter o código limpo e padronizado em equipe.

2. 🏢 O Cenário Prático (Seu Desafio)

Como vimos no módulo de Engenharia de Software, a especialista Marie Kondo ensina que devemos manter a nossa casa organizada e guardar apenas aquilo que nos traz alegria.

No dia a dia da programação, nós escrevemos código com pressa.

  • Às vezes usamos aspas simples ', às vezes aspas duplas ".
  • Às vezes deixamos linhas em branco sem querer, às vezes grudamos tudo.
  • Criamos variáveis e esquecemos de apagá-las quando não precisamos mais delas.

Se a equipe for grande, cada um vai escrever de um jeito e o projeto vai virar uma bagunça que não traz alegria nenhuma! Para resolver isso, nós usamos duas ferramentas automáticas que fazem o trabalho da Marie Kondo por nós: o Prettier e o ESLint! Seu desafio é deixar o seu código impecável!

🧠 Fundamentos: A Teoria Traduzida

Embora pareçam iguais, o Prettier e o ESLint têm funções bem diferentes e trabalham juntos:

🎨 1. Prettier (O Decorador):

O Prettier foca na Aparência e na formatação visual do código.

  • Ele não se importa se o seu código funciona ou não. Ele só quer que ele fique bonito!
  • Ele garante que todas as linhas quebrem no mesmo tamanho, que o uso de aspas seja padronizado e que a indentação (os espaços no início da linha) esteja perfeita.
  • Como ele age: Quando você salva o arquivo, ele reescreve o texto deixando-o no padrão da equipe.

🔍 2. ESLint (O Inspetor de Segurança / Linter):

O ESLint foca nas Regras de Qualidade e em possíveis erros de lógica.

  • Ele analisa o código sem rodá-lo (análise estática) e procura por “cheiros ruins” (Code Smells).
  • Ele avisa se você criou uma variável e nunca a usou (desperdício de memória), se tentou usar uma função que não existe ou se deixou uma brecha de segurança no código.
  • Como ele age: Ele coloca linhas onduladas vermelhas ou amarelas embaixo do seu código (igual ao corretor ortográfico do Word) avisando que tem algo errado.

4. 📖 Exemplo Guiado: O Código Antes e Depois

Olhe este código bagunçado:

const x = 10;
function teste(){
console.log("oi")
}

Depois que o Prettier e o ESLint passam por ele:

function teste() {
  console.log("oi");
}
  • O Prettier arrumou os espaços e os parênteses.
  • O ESLint mandou apagar a variável x porque ela não estava sendo usada em lugar nenhum!

5. 🛠️ Prática Obrigatória 1: Quem resolve o problema?

Diga se o problema descrito seria apontado pelo Prettier ou pelo ESLint:

  1. O código está funcionando, mas um programador usou tabulação de espaços e outro usou de espaços, deixando o arquivo desalinhado.
  2. O programador digitou o nome de uma variável errado em uma linha e o sistema vai quebrar quando for executado.
  3. O programador usou aspas simples ' em algumas strings e aspas duplas " em outras no mesmo arquivo.

6. 🛠️ Prática Obrigatória 2: A Alegria do Código

  1. Por que usar o ESLint e o Prettier poupa o tempo da equipe durante a fase de revisão de código (Code Review)?

7. 📤 Instruções de Entrega (GitHub Desktop + Microsoft Teams)

  1. Faça o Commit: No GitHub Desktop, digite a mensagem (ex: Finaliza Capítulo 13 GuiaFerramentas) e clique em Commit to main.
  2. Envie para a Nuvem (Push): Clique em Push origin.

8. 📂 Estrutura de Pastas

extra_guia_de_ferramentas/
├── .prettierrc (Arquivo de configuração do Prettier)
├── capitulos/
│   └── capitulo_13_linters.md

💡 Checkpoint de Lógica

O ESLint e o Prettier costumam ser instalados como extensões direto no VS Code para agirem em tempo real enquanto você digita!

10. 🔥 Desafio de Fixação

Pesquise o que significa o termo Linter na computação.

🔑 Gabarito de Código/Fórmulas

Gabarito da Prática 1:

  1. Prettier (Estilo visual/alinhamento).
  2. ESLint (Erro de lógica/qualidade).
  3. Prettier (Padronização de estilo). Gabarito da Prática 2:
  4. Porque a equipe não precisa perder tempo discutindo coisas bobas como “você esqueceu o ponto e vírgula” ou “use aspas duplas”. As ferramentas já corrigem isso sozinhas. Assim, os programadores podem focar a discussão apenas na lógica e na arquitetura do sistema!

← Capitulo Anterior | Proximo Capitulo →

Visão de gráfico

Backlinks