Skip to main content

Ferramentas Essenciais

Por Que Ferramentas Importam​

Assim como um carpinteiro precisa de martelo e serra, um desenvolvedor precisa de ferramentas adequadas. As ferramentas certas não apenas tornam o trabalho mais rápido, mas também ajudam a evitar erros, facilitam colaboração, e melhoram a qualidade do código.

Editores de Código​

Visual Studio Code (VS Code) ⭐ Recomendado​

VS Code é o editor mais popular atualmente. É gratuito, open source, extremamente extensível, e funciona em Windows, Mac e Linux.

Instalação​

Baixe do code.visualstudio.com

Extensões Essenciais​

  • Prettier: Formata código automaticamente
  • ESLint: Encontra e corrige problemas no código
  • Live Server: Servidor local para desenvolvimento
  • GitLens: Melhora integração com Git
  • Auto Rename Tag: Renomeia tags HTML automaticamente
  • Color Highlight: Destaca cores em CSS
  • Bracket Pair Colorizer: Colore pares de chaves

Atalhos Essenciais​

  • Ctrl/Cmd + P: Abrir arquivo rapidamente
  • Ctrl/Cmd + Shift + P: Paleta de comandos
  • Ctrl/Cmd + /: Comentar/descomentar linha
  • Alt + ↑/↓: Mover linha
  • Shift + Alt + ↑/↓: Duplicar linha
  • Ctrl/Cmd + D: Selecionar próxima ocorrência
  • Ctrl/Cmd + `` ``: Terminal integrado

Multi-cursor​

  • Alt + Click: Adicionar cursor
  • Ctrl/Cmd + Alt + ↑/↓: Adicionar cursor acima/abaixo
  • Ctrl/Cmd + Shift + L: Selecionar todas as ocorrências

Outros Editores Populares​

  • Sublime Text: Leve e rápido
  • Atom: Criado pelo GitHub, extensível
  • WebStorm: IDE completa da JetBrains (paga)

DevTools do Navegador​

DevTools são ferramentas integradas ao navegador para inspecionar, debugar e testar páginas web.

Acessando DevTools​

  • Chrome/Edge/Firefox: F12 ou Ctrl/Cmd + Shift + I
  • Safari: Ative no menu Desenvolvimento, depois Cmd + Option + I

Abas Principais​

Elements (Elementos)​

  • Inspecionar e modificar HTML e CSS em tempo real
  • Ver Box Model (margens, padding, bordas)
  • Editar estilos diretamente

Console​

  • Executar código JavaScript
  • Ver mensagens e erros
  • Debugar com console.log()
// Use o console para debugar
function calcularTotal(preco, quantidade) {
    console.log("Preço:", preco);
    console.log("Quantidade:", quantidade);
    let total = preco * quantidade;
    console.log("Total:", total);
    return total;
}

Network (Rede)​

  • Ver todas as requisições HTTP
  • Verificar tempo de carregamento
  • Identificar recursos que falharam
  • Ver headers e respostas

Sources (Fontes)​

  • Debugar JavaScript
  • Colocar breakpoints
  • Executar código passo a passo
  • Inspecionar variáveis

Application (Aplicação)​

  • Gerenciar Local Storage e Session Storage
  • Ver e editar cookies
  • Inspecionar cache

Performance​

  • Analisar performance da página
  • Identificar gargalos
  • Medir tempo de renderização

Dicas​

  • Use console.log() para debugar
  • Inspecione elementos para entender layout
  • Use Network para debugar requisições
  • Mobile emulation para testar responsividade

Gerenciadores de Pacotes​

npm (Node Package Manager)​

npm vem instalado com Node.js e gerencia bibliotecas e ferramentas JavaScript.

Verificar Instalação​

node --version
npm --version

Comandos Essenciais​

# Inicializar um projeto
npm init

# Instalar um pacote
npm install nome-do-pacote

# Instalar como dependência de desenvolvimento
npm install --save-dev nome-do-pacote

# Instalar todas as dependências
npm install

# Executar scripts
npm run nome-do-script

# Atualizar pacotes
npm update

package.json​

{
  "name": "meu-projeto",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production"
  },
  "dependencies": {
    "express": "^4.18.0"
  },
  "devDependencies": {
    "nodemon": "^2.0.0"
  }
}

yarn (Alternativa ao npm)​

# Instalar yarn
npm install -g yarn

# Comandos similares
yarn init
yarn add nome-do-pacote
yarn install
yarn run nome-do-script

Terminal/Command Line​

O terminal é onde você executa comandos, roda scripts, e gerencia seu ambiente de desenvolvimento.

Comandos Básicos​

# Navegar entre diretórios
cd pasta
cd ..
cd ~

# Listar arquivos
ls      # Mac/Linux
dir     # Windows

# Criar pasta
mkdir nova-pasta

# Criar arquivo
touch arquivo.txt        # Mac/Linux
echo. > arquivo.txt      # Windows

# Ver conteúdo de arquivo
cat arquivo.txt          # Mac/Linux
type arquivo.txt         # Windows

# Remover arquivo
rm arquivo.txt           # Mac/Linux
del arquivo.txt          # Windows

# Limpar terminal
clear                    # Mac/Linux
cls                      # Windows

Extensões do Navegador​

Para Desenvolvimento​

  • Web Developer: Conjunto de ferramentas úteis
  • React Developer Tools: Essencial para React
  • Vue.js DevTools: Essencial para Vue
  • ColorZilla: Seletor de cores
  • Lighthouse: Análise de performance e acessibilidade

Para Produtividade​

  • Wappalyzer: Identifica tecnologias usadas em sites
  • JSON Viewer: Formata JSON automaticamente
  • EditThisCookie: Gerenciar cookies facilmente

Ferramentas Online​

Editores Online​

  • CodePen: Testar HTML, CSS, JavaScript rapidamente
  • JSFiddle: Similar ao CodePen
  • StackBlitz: Editor online completo
  • CodeSandbox: Para projetos React, Vue, etc.

Utilidades​

  • Can I Use: Verificar compatibilidade de recursos com navegadores
  • Google Fonts: Biblioteca de fontes gratuitas
  • Font Awesome: Ícones vetoriais
  • Favicon Generator: Gerar favicons
  • TinyPNG: Comprimir imagens
  • Lorem Ipsum: Gerar texto placeholder

Design​

  • Figma: Design de interfaces (gratuito)
  • Coolors: Gerador de paletas de cores
  • ColorHunt: Paletas de cores prontas

Configurando Seu Ambiente​

Checklist de Configuração​

  1. Instalar Node.js e npm

  2. Instalar Git

    • Vimos no módulo anterior

  3. Configurar VS Code

    • Instalar extensões essenciais
    • Configurar Prettier para formatar ao salvar
    • Personalizar temas e atalhos

  4. Configurar Terminal

    • Windows: Git Bash ou PowerShell
    • Mac: Terminal padrão ou iTerm2
    • Linux: Terminal padrão

  5. Organizar Projetos

    ~/projetos/
      ├── aprendizado/
      ├── portfolio/
      └── experimentos/

Automatização com npm Scripts​

Use scripts no package.json para automatizar tarefas:

{
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js",
    "build": "webpack --mode production",
    "test": "jest",
    "lint": "eslint .",
    "format": "prettier --write ."
  }
}

Execute com npm run nome-do-script.

Boas Práticas​

1. Aprenda Atalhos Progressivamente​

Não tente aprender todos de uma vez. Aprenda alguns por vez e use até se tornarem naturais.

2. Customize Suas Ferramentas​

Ajuste para seu fluxo de trabalho, mas não passe mais tempo customizando do que desenvolvendo.

3. Mantenha Ferramentas Atualizadas​

Atualizações trazem correções de bugs e novas funcionalidades.

4. Use Snippets​

Crie snippets para código que você repete frequentemente.

5. Aprenda a Buscar Ajuda​

  • Documentação oficial
  • Stack Overflow
  • Comunidades online
  • GitHub Issues

Conclusão​

As ferramentas certas fazem toda a diferença. Comece com o básico (VS Code, DevTools, Git) e vá expandindo conforme necessário.

Não se preocupe em dominar tudo de uma vez. Familiaridade com ferramentas vem com uso constante. Pratique, experimente, e vá encontrando o que funciona melhor para você!

Referências​