Alvaro Alonso

Posted on Feb 18

10 Tips & Tricks de Visual Studio Code que Mejorarán tu Flujo de Trabajo 🚀

Visual Studio Code es uno de los editores de código más populares gracias a su velocidad, extensibilidad y facilidad de uso. Sin embargo, muchos desarrolladores no aprovechan todo su potencial. En este artículo, te mostraré 10 trucos que pueden mejorar tu productividad y flujo de trabajo.

1. ⚡ Atajos de Teclado Imprescindibles

Aprender algunos atajos de teclado te ahorrará mucho tiempo. Aquí tienes algunos básicos:

Abrir la paleta de comandos: Ctrl + Shift + P 🧙‍♂️
Buscar archivos: Ctrl + P 🔍
Dividir editor en paneles: Ctrl + \\ 📂
Alternar terminal: Ctrl + ñ 💻
Mover línea arriba/abajo: Alt + nea arriba/abajo**:Alt + \uarr / ↓` 📌

2. ✨ Multi-Cursor y Edición Rápida

VS Code permite editar varias líneas simultáneamente:

Seleccionar múltiples ocurrencias: Ctrl + D 🔥
Agregar cursor en múltiples líneas: Ctrl + Alt + neas**: Ctrl + Alt + \uarr / ↓` 🎯

3. 🛠️ Comandos útiles en la Paleta de Comandos

La paleta de comandos (Ctrl + Shift + P) permite acceder rápidamente a funciones sin navegar por menús. Prueba comandos como:

Format Document para formatear tu código. 📝
Rename Symbol para cambiar el nombre de una variable en todo el proyecto. 🔄
Git: Checkout to... para cambiar de rama sin usar la terminal. 🌿

4. 🔌 Extensiones Esenciales para Desarrolladores

Algunas extensiones que mejoran la productividad:

Prettier: Formatea tu código automáticamente. 🎨
ESLint: Ayuda a mantener un código limpio. ✅
GitLens: Mejora la integración con Git. 🔍
Bracket Pair Colorizer: Destaca los pares de llaves y paréntesis. 🌈

5. 🔄 Sincronización de Configuración

Si usas VS Code en más de un dispositivo, puedes sincronizar configuraciones, temas y extensiones usando Settings Sync (Ctrl + Shift + P > Turn on Settings Sync). 📡

6. 💻 Uso Avanzado de la Terminal Integrada

VS Code tiene una terminal integrada (Ctrl + ñ). Puedes abrir varias terminales y cambiar entre ellas con:

Crear nueva terminal: Ctrl + Shift + ñ 🆕
Cambiar de terminal: Ctrl + á 🔄

7. 🐞 Depuración con Breakpoints y Debugging

Para depurar código sin usar console.log, coloca breakpoints haciendo clic en el margen izquierdo y ejecuta el debugger (F5). 🛑

8. ✂️ Snippets Personalizados para Ahorrar Tiempo

Puedes crear atajos de código personalizados en File > Preferences > User Snippets. Esto te permite escribir fragmentos de código rápidamente. ⏳

9. ⚡ Configuración de Emmet para Escribir HTML/CSS Rápido

Emmet permite escribir código HTML y CSS de forma más eficiente. Por ejemplo:

ul>li*5 + Tab genera:

  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>

🎯

10. 🎩 Trucos Ocultos con la Configuración JSON de VS Code

Puedes personalizar VS Code editando el archivo settings.json. Algunos trucos:

Hacer que los archivos se guarden automáticamente:

  "files.autoSave": "afterDelay"

💾

Cambiar el formato de la terminal:

  "terminal.integrated.fontSize": 14

🔧

Estos trucos pueden hacer que VS Code sea aún más poderoso. ¿Tienes algún otro truco que uses a diario? ¡Compártelo en los comentarios! 💬🚀

DEV Community