Veamos qué atajos existen en Visual Studio Code y cómo modificarlos según tus necesidades de desarrollo.
Es cierto que cada vaquero tiene su propia arma, también lo es que cada uno tiene sus propios atajos de teclado para ser más rápido.
Mejores atajos de teclado en Visual Studio Code
Veamos qué métodos abreviados de teclado existen en el contexto de Visual Studio Code y cómo personalizarlos.
El menú contextual
Existen más formas de acceder a las distintas configuraciones de Visual Studio Code, también en este caso gráficamente podemos acceder desde la barra de menú en la parte superior (Archivo> Preferencias > Métodos abreviados de teclado).
📋 CHULETA DE ATAJO DE COMANDOS DE VISUAL STUDIO CODE
Pero aquí tienes el primer atajo, de hecho hay un ATAJO DE COMANDO para acceder a este menú. Primero presiona CTRL+k y luego CTRL+s.
Atajos de menú
En realidad, muchos de los atajos de teclado ya se pueden encontrar directamente desde la barra de menú superior. Al hacer clic en él, puedes ver que hay secuencias de teclas junto al nombre de los distintos elementos.
También están presentes las abreviaturas más comunes como CTRL+S para guardar el archivo o CTRL+F4 para cerrar el editor actual.
Accesos directos de macOS
Mientras que en Linux y Windows puedes considerar más o menos los mismos atajos, en MacOS (o el antiguo OSX) existen algunas distinciones ya que existen combinaciones por defecto completamente diferentes.
Solo por poner un ejemplo, el guardado se realiza con la combinación de las teclas de Comando de MAC +S.
Dicho esto, el uso de Visual Studio Code en plataformas Windows y/o Linux es del que hablaremos a continuación, puesto que es la configuración más común.
Interfaz de menú contextual
Una vez que abres la configuración, vas a visualizar una amplia tabla muy larga de atajos de comandos.
El encabezado de la lista se divide en cuatro columnas diferentes:
- Comando: Describe la acción con la que está asociada la secuencia.
- Enlace de Teclado: La secuencia actualmente asociada.
- Cuando: Algunas combinaciones se pueden utilizar bajo ciertas condiciones, este campo se utiliza para indicarlos.
- Origen: Indica si la función está disponible de forma nativa en Visual Studio Code (
Default) o si se toma prestada de una extensión.
Al hacer doble clic en una fila, se abrirá la ventana emergente que permite memorizar un acceso directo personalizado, al hacer clic nuevamente en un punto aleatorio, se cierra la ventana emergente sin aplicar ningún cambio.
Al hacer clic con el botón derecho se abre un menú más completo a través del cual se puede cambiar la secuencia, agregar una nueva, eliminarla o cambiar las condiciones de activación.
Sin duda, la función de búsqueda también es muy útil, ya que permite ver las entradas que tienen la misma combinación de teclas para comprobar si existe algún tipo de conflicto.
Dado que existe una condición de activación, incluso si hubiera conflictos de atajos en la secuencia de teclas, podrían coexistir porque se activan por condiciones diferentes.
La barra de búsqueda
A través de la barra de búsqueda superior puedes tener los resultados de las búsquedas por palabras claves en tiempo real.
También, vas a poder ver tres iconos a la derecha de la barra. Esos iconos están asociados a las siguientes interracciones:
- Al hacer clic en el icono del teclado, es posible buscar por “atajo de teclado” y no por una acción. Después de hacer clic en él, será posible presionar cualquier combinación que luego se ingresará en la barra de búsqueda, el resultado será la lista de acciones que usen ese atajo.
- El segundo icono se utiliza para cambiar el orden de los resultados, por defecto es alfanumérico, pero al pulsarlo se obtiene un orden por “precedencia”. Es decir, los primeros resultados serán los más “inherentes” a la búsqueda (contienen la o las palabras buscadas por completa).
- El tercer icono se utiliza para restablecer el contenido de la barra de búsqueda.
Una vez realizada una búsqueda, puedes repetir la búsqueda tecleando la tecla hacía arriba de las flechas direccionales. Si continúas presionando el botón, el historial se desplazará hacia atrás; puedes regresar a las búsquedas más recientes haciendo clic en el botón que se muestra con una X.
Filtrar por configuración de usuario, valores predeterminados y extensión
Puedes filtrar rápidamente la configuración por fuente “Predeterminada”, “Usuario” o “Extensión”.
Al aplicar estos filtros en la barra de búsqueda aparecera
@source:FILTRO
y los resultados entonces serán filtrados de acuerdo a la última columna.
El archivo de accesos directos
Los cambios que aplicamos a las combinaciones corresponden a un archivo JSON. Similar a lo que ya se ha explicado para la configuración de código de Visual Studio, podemos encontrar este archivo en la carpeta de configuración del programa:
- En Windows:
C:\Users\NOMBREUSUARIO\AppData\Code\User\keybindings.json. - En Linux:
/home/nombreusuario/.config/Code/User/keybindings.json. - En macOS:
/Users/nombreusuario/Library/Application Support/Code/User/keybindings.json.
El archivo JSON presenta una matriz de objetos con esta sintaxis:
{
"key": "combinación de comandos",
"command": "acción",
"when": "condición"
}
Por ejemplo:
[{
"key": "tab",
"command": "-editor.emmet.action.expandAbbreviation",
"when": "config.emmet.triggerExpansionOnTab && editorTextFocus && !editorReadonly && !editorTabMovesFocus"
}]
Personalmente, es aconsejable no escribir directamente a través de este archivo; pero si lo deseas hacer, puede encontrar la lista exhaustiva de todos los IDES de comando en la página oficial de Visual Studio Code.
De igual manera, puedes encontrar toda la documentación referente a las **condiciones en la documentación correspondiente**.
Algunos atajos interesantes
Leer todos los atajos, probarlos y luego decidir cuáles son útiles y cuáles no es lo más factible, especialmente si no tienes demasiado tiempo disponible.
Por lo tanto, creo que es útil el proponer algunos consejos básicos a la hora de comenzar a utilizar los atajos de teclado en Visual Studio Code.
Buscar archivos en el proyecto
Para buscar rápidamente un archivo en el proyecto, puedes usar el atajo CTRL+p, luego se abrirá una ventana emergente en la parte superior de la pantalla -muy similar a una pequeña barra de consola-.
La identificación de este atajo de comando es
workbench.action.quickOpen
.
Panel de comandos
El panel de comandos es fundamental para Visual Studio Code.
Esta es una ventana emergente que aparece en la parte superior de la pantalla y que contiene algunas funciones que puedes proporcionar al editor, como cambiar letras mayúsculas a minúsculas o acceder a las funciones de generación automática de código.
Si quieres abrirlo, escribe CTRL+SHIFT+p y se abrirá la “ventana/consola” anterior pero con el símbolo > incluido.
Desde hay puedes ejecutar el comando que desees ejecutar.
La identificación de este atajo es
workbench.action.showCommands
.
Búsqueda de símbolos, métodos y clases
Saber cómo buscar el nombre de un método, variable o clase específicos puede ser muy útil para moverse rápidamente por un archivo.
Para hacer esto, puedes presionar CTRL+SHIFT+o y aparecerá la consola/ventana emergente con una barra de búsqueda preparada para buscar el nombre del símbolo. Representado por una @.
La identificación de este atajo de comando es
workbench.action.gotoSymbol
.
Cierre del panel lateral
En pantallas pequeñas, el espacio que ocupa el enorme panel lateral de Visual Studio Code puede llegar a ser un problema.
La combinación para cerrarlo y volverlo a abrir, por defecto, es CTRL+b.
La identificación de este atajo de comando es
workbench.action.toggleSidebarVisibility
.
Borrar una línea
Puedes eliminar una fila de una forma muy sencilla usando el atajo CTRL+SHIFT+k.
La identificación del atajo de comando es
editor.action.deleteLines
.
Copiar, cortar y pegar
Puede parecer trivial dedicar una sección a los atajos más famosos de la historia; es decir, CTRL+c para copiar, CTRL+v para pegar y CTRL+x para cortar.
Pero lo que puede ser más curioso y que debes saber: Es lo que sucede si usas la función de copiar y cortar sin resaltar nada con el cursor.
Visual Studio Code interpreta la acción sobre la línea actual del cursor.
Ósea, al presionar CTRL+c sin haber seleccionado nada se copiará toda la línea actual, al presionar CTRL+x sin haber seleccionado nada se cortará toda la línea actual.
Los identificadores de estos atajos de comando por si los quieres modificar son:
-
editor.action.clipboardCopyActionpara copiar -
editor.action.clipboardPasteActionpara pegar -
editor.action.clipboardCutActionpara cortar
Mover una línea
Puedes intercambiar la posición de la línea actual con la de arriba o la de abajo.
Para hacer eso, simplemente debes pulsar la tecla ALT junto a una de las teclas de direcciones, bien la tecla ALT+la flecha hacia arriba (↑) o la tecla ALT+la flecha hacia abajo (↓).
La identificación de estos atajos de comando son
editor.action.moveLinesUpAction
para mover la línea hacia arriba y
editor.action.moveLinesDownAction
para mover una línea hacia abajo.
Deshacer y rehacer
Otra combinación bastante famosa es el atajo de teclado que permite deshacer una acción, vamos el último cambio realizado sobre el documento.
Como en todos los demás casos, simplemente debes presionar CTRL+z y la identificación del atajo de comando es simplemente
undo
.
La combinación para ejecutar la acción de rehacer la última acción realizada, es CTRL+y.
Si quieres modificar este atajo, la identificación del comando es
redo
.
Ir hacía atrás y hacía adelante
Para navegar por el código rápidamente, te puede ser útil saber cómo avanzar y retroceder en el código; por ejemplo, si quieres regresar al archivo anterior o a una línea anterior después de buscar un símbolo.
Si quieres moverte entre los archivos abiertos, puedes utilizar los atajos de teclado de CTRL+ALT+- o CTRL+SHIFT+- en Linux.
En Windows, las teclas de ALT+flecha izquierda para ir al archivo anterior, ALT+flecha derecha para ir al archivo posterior.
La identificación para el atajo de retroceder es
workbench.action.navigateBack
, la identificación del atajo de avanzar es
workbench.action.navigateForward
.
Goto
Es posible ir a una determinada línea de código marcando su número, lo que puede ser muy útil.
Para abrir la ventana emergente que te va a permitir hacer eso, simplemente tienes que presionar el atajo de comando CTRL-g.
Debes tener en cuenta que puedes ingresar tanto el número de fila como el de columna, especificando este último después del símbolo “:”.
El id asociado con esta acción es
workbench.action.gotoLine
.
Ajustes de palabras
Puedes activar y desactivar rápidamente el ajuste de línea escribiendo ALT+z. El código de este comando es
editor.action.toggleWordWrap
.
Cierra una pestaña y cierra Visual Studio Code
Puedes cerrar una pestaña presionando CTRL + W o Ctrl+K W para cerrar todos los editores de un grupo o bien, Ctrl+K Ctrl+W para cerrar todos los editores abiertos.
CTRL+SHIFT+w para cerrar la ventana actual deVisual Studio Code.
Si quieres cambiar el atajo para el comando de cerrar la pestaña debes modificar la acción de identificación
workbench.action.closeActiveEditor
mientras que la opción de cerrar el editor tiene la identificación
workbench.action.quit
.
📋 CHULETA DE ATAJO DE COMANDOS DE VISUAL STUDIO CODE
Abre la configuración
Puedes abrir la configuración rápidamente escribiendo CTRL+,. El identificador del comando es
workbench.action.openSettings
.
Búsqueda y próxima coincidencia
Otra combinación es CTRL+f que sirve para buscar dentro del archivo.
Debes saber que si resaltas un fragmento de texto antes de presionar el atajo de CTRL+f lo seleccionado se convertirá en la entrada de búsqueda.
Si quieres buscar la siguiente coincidencia, solamente debes presionar la tecla de F3, si quieres ir a la coincidencia anterior puedes regresar con el atajo SHIFT+F3.
Los identificadores asociados a estos atajos son
actions.find
para el comando de buscar,
workbench.action.terminal.findNext
para el comando de buscar la siguiente aparición y finalmente,
workbench.action.terminal.findPrevious
para la búsqueda anterior.
Renombrar archivos o variables
Si quieres renombrar una variable, un método o un archivo puedes presionar el atajo CTRL+H, esto también activará todas las funciones diseñadas para buscar todas las coincidencias que deben modificarse al modificarlo en cascada.
La identificación asociada a este atajo de teclado es
editorFocus || editorIsOpen
pero cuidado; puesto que este atajo puede cambiar según algunas extensiones.
Acciones de código
Las acciones de código intervienen cuando puede haber problemas en el código como errores o advertencias.
Si quieres activar esta acción, coloca el cursor en la parte problemática y luego presione CTRL+.
Este atajo solamente funcionará en los sitios en los que exista una acción de código, estos puntos se señalan en el editor mediante una “luz o bombilla” en la parte derecha de las líneas del editor.
La identificación de la ventana emergente es
editorHasCodeActionsProvider && editorTextFocus && !editorReadonly
.
Sugerencias
Quizás uno de los atajos más importantes es el que abre la ventana emergente de sugerencias contextuales.
Al escribir CTRL+Enter o CTRL+i puedes aprovechar el menú que permite una serie de sugerencias para autocompletar, luego puedes navegar con las teclas de flecha y hacer la elección presionando Enter.
La identificación de la acción es
editor.action.triggerSuggest
.