أدوات 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.