Configurando o EsLint e Prettier - Parte 01 - Primeiros Passos no Javascript

Neste tutorial, vamos configurar o ESLint no VS Code para manter a qualidade e padronização do nosso código JavaScript.

O que é ESLint?

ESLint é uma ferramenta de linting que:

• Analisa seu código em busca de erros
• Aplica padrões de codificação
• Identifica problemas potenciais
• Força um estilo de código consistente

Instalação do ESLint

1. No terminal do seu projeto, execute: npm install eslint --save-dev
2. Inicialize o ESLint com: npx eslint --init

Durante a configuração:

• Escolha "To check syntax, find problems, and enforce code style"
• Selecione "JavaScript modules (import/export)"
• Marque "Node" como ambiente de execução
• Escolha o style guide "Standard"

Configurando a extensão do VS Code

1. Acesse a aba de extensões (Ctrl+Shift+X)
2. Pesquise por "ESLint"
3. Instale a extensão oficial com mais de 27 milhões de downloads

Arquivos de configuração

Após a instalação, serão criados:

• .eslintrc.json - Configurações principais
• .eslintignore - Arquivos/diretórios a serem ignorados

Exemplo de .eslintignore:

Considerações Finais

Com o ESLint configurado:

• Seu código será automaticamente verificado
• Erros e problemas serão destacados em tempo real
• Todo o time trabalhará com os mesmos padrões
• A qualidade do código será consistentemente mantida

Na próxima aula, completaremos a configuração com o Prettier para formatação automática do código.