Ferramentas de Desenvolvimento Web: Editores, DevTools e Produtividade

Editores de Código

VS Code: O editor de código mais popular. Ecossistema de extensões extenso, IntelliSense, debugging, integração Git. Gratuito e de código aberto.

WebStorm: IDE da JetBrains. Refactoring avançado, análise de código, suporte de frameworks. Pago.

Sublime Text: Leve e rápido. Interface minimalista. Abre arquivos grandes rapidamente.

Vim/Neovim: Editor baseado em terminal. Dirigido por teclado, altamente personalizável. Curva de aprendizado íngreme.

Critérios de seleção: VS Code para iniciantes. WebStorm para enterprise. Sublime Text para minimalistas. Vim para amantes do terminal.

DevTools do Navegador

Elements/Inspector: Inspecione DOM e CSS. Teste mudanças de estilo ao vivo. Box model, layout, computed styles.

Console: Veja erros de JavaScript e logs. REPL interativo. Acesso a elementos DOM.

Network: Monitore solicitações HTTP. Gráfico waterfall, timing, headers, payload. Detecte gargalos de desempenho.

Performance: Profiling de CPU, memória, rendering. Flame chart, long tasks, layout shifts. Medição de Core Web Vitals.

Application: Storage (cookies, localStorage, IndexedDB), Service Worker, Cache, Manifest. Debugging de PWA.

Lighthouse: Auditoria de Performance, Accessibility, Best Practices, SEO. Pontuação e recomendações para cada página.

Ferramentas de Terminal

Git: Controle de versão. Branch, merge, rebase, stash. Gestão de PR com GitHub CLI (gh).

npm/yarn/pnpm: Gerenciador de pacotes. Gestão de dependências, execução de scripts, workspace.

Docker: Containerização. docker build, docker run, docker compose. Ambiente de desenvolvimento local.

curl/wget: Solicitações HTTP. Testes de API, download de arquivos. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq: Processador JSON. Parse e filtro de JSON no terminal. curl ... | jq '.data'.

fzf: Buscador fuzzy. Busca de arquivos, histórico, processos. Aumenta a produtividade do terminal.

Ferramentas de Produtividade

Postman/Insomnia: Testes e documentação de API. Collection, environment, test script. Colaboração em equipe.

Figma: Design UI/UX. Biblioteca de componentes, prototipagem, dev mode (exportação CSS).

Extensões do Chrome: React DevTools, Vue DevTools, Redux DevTools, axe (acessibilidade).

Grammarly: Correção de ortografia e gramática. Para posts de blog e documentação.

Notion/Obsidian: Anotações e gestão do conhecimento. Documentação, wiki, rastreamento de tarefas.

Ferramentas de Qualidade de Código

ESLint: Linting de JavaScript/TypeScript. Padrões de código, detecção de erros. Regras e plugins personalizados.

Prettier: Formatação de código. Indentação automática, estilo de aspas, ponto e vírgula. Formatar ao salvar.

TypeScript: Verificação de tipos estática. Detecção de erros em tempo de compilação. Autocompletar de IDE.

Husky + lint-staged: Hooks de pre-commit. Verificação de lint e formato antes do commit. Integrado no pipeline de CI/CD.

SonarQube: Análise de qualidade de código. Detecção de bugs, vulnerabilidades, code smells. Quality gates.

Dicas de Produtividade do Desenvolvedor

Atalhos de teclado: Aprenda os atalhos do editor e do navegador. Minimize o uso do mouse.

Snippets: Salve fragmentos de código usados frequentemente. Snippets do VS Code, Emmet.

Aliases: Defina aliases de terminal. alias gs='git status', alias dc='docker compose'.

Dotfiles: Gerencie arquivos de configuração (bashrc, vimrc, gitconfig) com Git. Configuração rápida em nova máquina.

Aprendizado: Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Aprendizado contínuo e manter-se atualizado.