Herramientas de Desarrollo Web: Editores, DevTools y Productividad

Editores de Código

VS Code: El editor de código más popular. Ecosistema de extensiones extenso, IntelliSense, debugging, integración Git. Gratuito y de código abierto.

WebStorm: IDE de JetBrains. Refactoring avanzado, análisis de código, soporte de frameworks. De pago.

Sublime Text: Ligero y rápido. Interfaz minimalista. Abre archivos grandes rápidamente.

Vim/Neovim: Editor basado en terminal. Dirigido por teclado, altamente personalizable. Curva de aprendizaje pronunciada.

Criterios de selección: VS Code para principiantes. WebStorm para enterprise. Sublime Text para minimalistas. Vim para amantes del terminal.

DevTools del Navegador

Elements/Inspector: Inspeccione DOM y CSS. Pruebe cambios de estilo en vivo. Box model, layout, computed styles.

Console: Vea errores de JavaScript y logs. REPL interactivo. Acceso a elementos DOM.

Network: Monitoree solicitudes HTTP. Gráfico waterfall, timing, headers, payload. Detecte cuellos de botella de rendimiento.

Performance: Profiling de CPU, memoria, rendering. Flame chart, long tasks, layout shifts. Medición de Core Web Vitals.

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

Lighthouse: Auditoría de Performance, Accessibility, Best Practices, SEO. Puntuación y recomendaciones para cada página.

Herramientas de Terminal

Git: Control de versiones. Branch, merge, rebase, stash. Gestión de PR con GitHub CLI (gh).

npm/yarn/pnpm: Gestor de paquetes. Gestión de dependencias, ejecución de scripts, workspace.

Docker: Containerización. docker build, docker run, docker compose. Entorno de desarrollo local.

curl/wget: Solicitudes HTTP. Pruebas de API, descarga de archivos. curl -X POST -H 'Content-Type: application/json' -d '{...}' url.

jq: Procesador JSON. Parse y filtro de JSON en terminal. curl ... | jq '.data'.

fzf: Buscador fuzzy. Búsqueda de archivos, historial, procesos. Aumenta la productividad del terminal.

Herramientas de Productividad

Postman/Insomnia: Pruebas y documentación de API. Collection, environment, test script. Colaboración en equipo.

Figma: Diseño UI/UX. Biblioteca de componentes, prototipado, dev mode (exportación CSS).

Extensiones de Chrome: React DevTools, Vue DevTools, Redux DevTools, axe (accessibilidad).

Grammarly: Corrección de ortografía y gramática. Para posts de blog y documentación.

Notion/Obsidian: Toma de notas y gestión del conocimiento. Documentación, wiki, seguimiento de tareas.

Herramientas de Calidad de Código

ESLint: Linting de JavaScript/TypeScript. Estándares de código, detección de errores. Reglas y plugins personalizados.

Prettier: Formateo de código. Indentación automática, estilo de comillas, punto y coma. Formatear al guardar.

TypeScript: Verificación de tipos estática. Detección de errores en tiempo de compilación. Autocompletado de IDE.

Husky + lint-staged: Hooks de pre-commit. Verificación de lint y formato antes del commit. Integrado en el pipeline de CI/CD.

SonarQube: Análisis de calidad de código. Detección de bugs, vulnerabilidades, code smells. Quality gates.

Consejos de Productividad del Desarrollador

Atajos de teclado: Aprenda los atajos del editor y del navegador. Minimice el uso del mouse.

Snippets: Guarde fragmentos de código usados frecuentemente. Snippets de VS Code, Emmet.

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

Dotfiles: Gestione archivos de configuración (bashrc, vimrc, gitconfig) con Git. Configuración rápida en nueva máquina.

Aprendizaje: Dev.to, Hacker News, CSS-Tricks, Smashing Magazine. Aprendizaje continuo y mantenerse actualizado.