Visual Studio Code – Atajos útiles

Bueno, llevo ya un tiempo utilizando también VSCode y la verdad es que me gusta bastante, sobre todo cuando estoy en proyectos de frontend. Eso sí, en general IntelliJ me sigue cautivando.

Según vas trabajando con VSCode, vas aprendiendo algunos atajos que son bastante útiles y que hacen que seas más ágil. Dejo aquí algunos que me resultan más útiles

Aquí hay una referencia completa de los atajos de teclado para Mac, Windows y Linux

Navegación

  • ⌘P: Abrir archivos
  • ⌘B: permite abrir y cerrar el panel de navegación
  • F12: Ir a la definición
  • ⌥F12: Ojear la definición de la función sobre la que está el cursor
  • ⌘KZ: Entrar en modo zen (oculta las barras laterales e inferiores)
  • ⌘K⌘S: Abre la configuración de atajos de teclado
  • ⌘⇧O: Ver la estructura de los archivos/clases (propiedades, métodos, etc)
  • ⌃G: Ir a una línea
  • ⌘P: mostrar/ocultar preview de markdown

Pestañas

  • ⌘W: cerrar pestaña
  • ⌘K⌘W: cerrar todas las pestañas
  • ⌘⌥ flechas izquierda y derecha: mover a la pestaña anterior y siguiente
  • ⌘⇧T: Reabrir última pestaña
  • ⌃TAB: Cambiar de pestañas

Ediciones básicas

  • ⌥ ↑ o ⌥ ↓: para mover las líneas hacia arriba y abajo
  • ⌘K⌘C o ⌘K⌘U: comentar y descomentar una línea
  • ⇧⌥A: comentar y descomentar una selección de código
  • ⌘⇧K: Borrar la línea
  • ⇧⌥ flecha arriba o abajo: Clonar línea encima o debajo
  • F2: Renombrar símbolo

Selección

  • ⌘⇧L: Multicursor de todas las ocurrencias de la selección
  • ⌘⌥ flecha arriba o abajo: Añadir cursor arriba o debajo
  • ⌘D: añadir cursor hasta la siguiente ocurrencia
  • ⌥ doble click: añadir cursor en la selección

Terminal

  • ⌃`: Mostrar/ocultar el terminal integrado

Wrappear elementos

Haciendo uso de Emmet podemos englobar elementos en otros elementos. Por ejemplo, seleccionaremos el código/texto que queremos rodear con un <div>, pulsaremos la combinación ⌘⇧P y buscaremos Emmet: Wrap with abbreviation.

A continuación escribimos el elemento que queremos y… voilà!

Si queremos poner dos elementos, podemos indicarlo de la forma ul>li

¡Bola extra!

  • ⌘ + click: si estamos sobre un enlace a un fichero, al intentar navegar al mismo con este comando, nos saldrá un error en VSCode y desde ahí podremos crear el fichero con toda su estructura

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.