Header Ads Widget

Ticker

6/recent/ticker-posts

Atajos de teclado de Visual Studio Code personalizados (y efectivos) para Mac y Windows

 


Como codifico tanto en Windows como en Mac, quiero que mis accesos directos de Visual Studio Code sean intercambiables en ambos sistemas.

Así que profundicé en los atajos de teclado de Visual Studio Code para ambos sistemas e hice mis personalizaciones personales.

Quiero compartir estas personalizaciones contigo para que puedas usarlas para rockear en Visual Studio Code también 😃.

Cosas que necesita saber antes de continuar

Cuatro cosas:

  1. Las ubicaciones de los modificadores son diferentes en Mac y Windows.
  2. Esta guía es compatible con Qwerty
  3. Pequeños errores con Visual Studio Code y Dvorak-Qwerty en Windows.
  4. Por qué abandoné el sublime complemento de importación de texto.

Las ubicaciones de los modificadores son diferentes en Mac y Windows.

Modificadores en Mac ( CommandOptionControl) y modificadores en Windows ( CtrlAltWinAppskey) se colocan en diferentes lugares en el teclado.

Aquí es donde se encuentran los modificadores originales en Mac:

Teclado de Mac.

En mi PC con Windows (que es una computadora portátil Surface).

Teclado de Windows (Surface Laptop 3)

Cambié las ubicaciones de los modificadores de mi PC con Windows con un programa llamado Auto Hot Key . Así es como se ven ahora mismo:

Se cambiaron las posiciones de las teclas Ctrl, Alt y Win en el teclado de la ventana.

Puede aprender cómo cambié los modificadores en este artículo .

Esta guía es compatible con Qwerty

Todos los atajos de teclado de este artículo son amigables para los usuarios de Qwerty .

Las personas que me conocen saben que uso Dvorak-Qwerty tanto en Mac como en Windows.

Esto significa:

  1. Utilizo una distribución de teclado Dvorak.
  2. El teclado cambia a Qwerty cuando lo presiono Commanden Mac.
  3. El teclado también cambia a Qwerty cuando lo mantengo presionado CtrlWinen Windows.

Dado que todos los atajos que recomiendo en esta guía involucran la tecla CommandCtrlson utilizables para todos los usuarios de Qwerty.

Windows Visual Studio Code y Dvorak-Qwerty

El panel de atajos de teclado de Visual Studio Code se pone un poco irritable cuando intenté usar Dvorak-Qwerty usado en Windows.

Por ejemplo.

  1. Cambié el método abreviado de teclado "Ir a archivo" a Ctrl+T
  2. Pero el panel de atajos de teclado muestra CtrlY.

Es probable que esto se deba a dos razones:

  1. Yocupa la posición de Ten un teclado Dvorak.
  2. Windows no tiene Dvorak-Qwerty integrado de forma predeterminada

Pero el atajo de teclado aún funciona. Cuando presiono CtrlT, sigo activando la acción "Ir a archivo" .

Entonces, si usa Dvorak-Qwerty, le recomiendo cambiar a Qwerty para examinar los atajos de teclado en Visual Studio Code. Siempre puede volver a Dvorak-Qwerty más tarde.

Importador de ajustes sublimes

TL; DR : eliminé el mapa de teclas de texto sublime y la extensión Importador de configuración de Visual Studio Code. Esto me permitió crear atajos de teclado que se sincronizaron entre Mac y Windows.

(No funcionó en mi PC con Windows porque no tengo instalado Sublime Text).

Versión más larga :

Usé Sublime Text Importer cuando cambié a Visual Studio por primera vez. Esta extensión me ayudó a crear atajos de teclado con los que estaba familiarizado en Sublime Text.

Hice esto cuando estaba en Mac.

Desafortunadamente, los atajos de Sublime Text no se sincronizaron con mi PC con Windows porque Settings Sync no sincroniza los atajos de teclado en diferentes plataformas .

Entonces, noté que Sublime Settings Importer no funciona en mi computadora con Windows. Intentó encontrar una aplicación de Sublime Text (que no existe). Nunca funcionará ya que no tengo la intención de instalar Sublime Text en Windows.

Pero mi Mac tiene accesos directos de Sublime Text y mi PC con Windows no. Esto se vuelve confuso rápidamente. Para hacer mi vida más fácil al crear atajos de teclado, decidí desinstalar la extensión del importador de Sublime Text Keymap y Settings.

Bien, eso es un montón de cosas que necesita saber antes de sumergirse en las combinaciones de teclas. Lamento que haya tenido que leer el preámbulo, pero algunos de mis enlaces no habrían tenido sentido de otra manera.

A partir de ahora, ¡ pasemos a la parte emocionante!

Ir al archivo

El acceso directo Ir al archivo es mi método abreviado básico. Abre un cuadro de lista que le permite escribir un archivo al que desea ir.

Abre el menú desplegable de apertura rápida con Comando + T.

El atajo predeterminado es:

  • Mac: Command+P
  • Windows: Alt+P

Cambié el atajo a:

  • Mac:
    • Command + T
    • Command + P
  • Ventanas:
    • Control + T
    • Control + P

CommandTsobrescribe Ir a símbolo en el área de trabajo . No me importa sobrescribir este atajo ya que no lo uso. Me resulta difícil usar Ir a símbolo en el espacio de trabajo porque la búsqueda es demasiado amplia. Prefiero usar Ir a símbolo en archivo en su lugar.

Como cambiar

Primero, abra las preferencias de configuración del teclado. Hay tres formas:

Método 1: desde el menú

  • Mac: Code-> Preferences->Keyboard Shortcuts
  • Windows: File-> Preferences->Keyboard Shortcuts

Método 2: use mostrar todos los comandos

  • Mac: CommandShiftP, luego escribe atajos de teclado.
  • Windows: CtrlShiftP, luego escriba atajos de teclado.

Método 3: usa un atajo de teclado

  • Mac: Command + K,Command + S
  • Ventanas: Ctrl + K,Ctrl + S

Busque Ir a archivo en el panel de atajos de teclado. Debería ver una opción del cuadro de lista en Mac. Cambie esto a CommandTEn Windows, verá muchas opciones. Cambie el CtrlPuno a CtrlT.

Esto crea un atajo con CommandT.

Se buscó Ir al archivo (en Mac)

A continuación, traje CommandPcomo atajo de teclado. Para hacer esto, abra keybindings.jsonhaciendo clic en el tercer ícono de la esquina superior derecha.

Flecha verde que apunta a un icono que abre el archivo keybindings.json.

Busque workbench.action.quickOpenDeberías encontrar dos valores:

// keybindings.json on Mac
{
  "key": "cmd+t",
  "command": "workbench.action.quickOpen"
},
{
  "key": "cmd+p",
  "command": "-workbench.action.quickOpen"
}

Elimina el -de -workbench.action.quickOpende la cmd+pentrada.

{
  "key": "cmd+p",
-  "command": "-workbench.action.quickOpen"
+  "command": "workbench.action.quickOpen"
}

Haz lo mismo con Windows. Verás ctrl+ty en ctrl+plugar de cmd+tcmd+p.

¿Por qué este cambio?

Utilizo CommandTpara abrir nuevas pestañas en los navegadores. También tiene sentido para mí usar CommandTpara abrir una nueva pestaña en Visual Studio Code.

Guardé CommandPporque es un atajo sobrante que uso de vez en cuando (principalmente por accidente).

En Windows, mi Ctrlllave está en la posición de la Altllave. Dado que Ctrlestá en la misma posición que Command(en Mac), estoy haciendo lo mismo en Mac y Windows.

Seleccionar una pestaña

Abro muchas pestañas cuando estoy codificando, así que necesito un atajo para cambiar entre pestañas.

Cambios entre tres pestañas con atajos de teclado.

El atajo predeterminado es:

  • Mac: Control+ tecla numérica
  • Windows: Alt+ tecla numérica

Lo cambié a:

  • Mac: Command+ tecla numérica
  • Windows: Ctrl+ tecla numérica

Cómo cambiar:

Busque openEditorAtIndex en el panel de configuración del teclado. Debería encontrar 9 entradas (tanto Mac como Windows). Cambie esto a Command(o Ctrl) + Números del 1 al 9.

Se buscó editor abierto en el índice.  Encontradas 9 entradas.

¿Por qué este cambio?

Utilizo las Commandteclas + Número para cambiar entre pestañas cuando navego. Tiene sentido usar el mismo método abreviado de teclado para cambiar entre pestañas en Visual Studio Code.

  • Primera pestaña: Command+1
  • Segunda pestaña: Command+2
  • Tercera pestaña: Command+3
  • Y así…

En Windows, mi Ctrlmodificador se encuentra en mi Alttecla. Este medio Ctrlestá en la misma posición que la Commandllave.

Crear paneles de código (y cambiar entre ellos)

Es muy útil tener dos (a veces tres) paneles para editar el código. Utilizo esto para hacer referencia al código.

Por ejemplo, abriría un archivo HTML en un panel. Luego, abriría un archivo CSS en el segundo panel. A veces, usaría un tercer panel para abrir un archivo JavaScript. (Pero me quedo con dos paneles la mayor parte del tiempo).

Visual Studio Code ofrece una variedad de formas de dividir el editor de texto. Encontré que el enfoque en el grupo de editores es el mejor atajo porque:

  1. Abre un nuevo panel cuando no lo hay.
  2. Me permite cambiar entre paneles

En este ejemplo a continuación, salto del segundo panel al tercer panel, luego de regreso al primer panel.

El atajo predeterminado es:

  • Mac: Command+ tecla numérica
  • Ventana: Ctrl+ tecla numérica

Lo cambié a:

  • Mac: Alt+ tecla numérica
  • Windows: Alt+ tecla numérica

Cómo cambiar:

Busque el grupo de editor de enfoque en el panel de métodos abreviados de teclado de Visual Studio Code. Verás opciones que dicen workbench.actions.focus[Number]EditorGroup(Donde Numberes primero, segundo, tercero, cuarto, etc.).

Se buscó el grupo de editor de enfoque en el panel de métodos abreviados de teclado de Visual Studio Code.

Cambie los accesos directos a Alt+ el número correspondiente.

  • Primero: Alt+1
  • Segundo: Alt+2
  • Tercero: Alt+3
  • Y así…

Utilizo hasta tres grupos de editores, pero igual cambié los ocho para mantener la coherencia.

¿Por qué este cambio?

Command+ ¿Número para cambiar de pestaña y Alt+ Número para cambiar de panel? Esa es la mejor combinación que se me ocurrió. Altestá justo al lado de CommandEs de fácil acceso. ¡Puedes ver lo rápido que cambié entre los paneles en el video anterior!

(Ok, disminuí la velocidad cuando hice el video ... pero entiendes el punto).

En Windows, my Altestá justo al lado de CtrlQue tiene sentido. Estoy presionando los mismos botones en Mac y Windows.

Mover editor al grupo

¿Qué sucede si abrí una pestaña desde el panel incorrecto? Aquí es donde el editor Mover al grupo resulta útil. Me permite mover una pestaña de un panel a otro.

Mover editor al grupo también me permite abrir un panel si no hay ninguno.

¡Incluso puede crear una combinación de división vertical + horizontal con Mover editor al grupo !

Puede mover paneles (que Visual Studio Code llama grupos de editores) de 8 formas:

  1. Primer grupo
  2. Último grupo
  3. Grupo anterior
  4. Siguiente grupo
  5. Arriba
  6. Abajo
  7. Izquierda
  8. Derecho

Los primeros cuatro son generalmente inútiles. Prioricé los últimos cuatro.

El atajo predeterminado es:

No se asignan atajos de teclado predeterminados a las últimas cuatro acciones 😢.

Lo cambié a:

  • Mac:
    • Subir: CommandAlt+Up
    • Mover hacia abajo: CommandAlt+Down
    • Mover a la izquierda: CommandAlt+Left
    • Mover a la derecha: CommandAlt+Right
  • Ventanas:
    • Subir: ControlAlt+Up
    • Mover hacia abajo: ControlAlt+Down
    • Mover a la izquierda: ControlAlt+Left
    • Mover a la derecha: ControlAlt+Right

Cómo cambiar:

Busque " Mover editor a " en el panel de métodos abreviados de teclado de Visual Studio Code. Debería ver 8 entradas.

Se buscó Mover editor a en el panel de atajos de teclado.

Cambie las combinaciones de teclas a las que mencioné anteriormente.

Luego, elimine las combinaciones de teclas para el grupo anterior y siguiente haciendo clic con el botón derecho y seleccionando "eliminar combinación de teclas". Esto asegura que no haya conflictos entre las combinaciones de teclas.

Command + Alt + Upanula Agregar cursor arriba mientras que Command + Alt + Downanula Agregar cursor debajo . Siéntase libre de quitar sus atajos de teclas. Encuentro esto bien porque uso otro atajo para agregar cursores.

¿Por qué este cambio?

Command+ Teclas numéricas para cambiar de pestaña. Alt+ Teclas numéricas para mover el enfoque entre pestañas. Y si comete un error, use CommandAlt+ teclas de dirección para mover la pestaña.

¡Encuentro que esto tiene mucho sentido!

Cerrar un panel vacío

Digamos que crea un panel vacío por accidente. Quieres cerrar este panel.

Cierra un panel vacío.

Visual Studio Code le permite cerrar este panel vacío con los siguientes atajos:

  • Mac: Command+W
  • Windows: Ctrl+W

No cambié este atajo. Solo quería contarles sobre esto porque lo encuentro útil.

Alternar división vertical / horizontal

Prefiero dividir la pantalla verticalmente. Pero cuando necesito que el código se alargue, tiene sentido dividir las cosas horizontalmente. Esto es especialmente útil para esos molestos métodos de JavaScript con nombres muy largos.

Alterna la dirección dividida de los paneles

Visual Studio Code le permite cerrar este panel vacío con los siguientes atajos:

  • Mac: CommandOption+0
  • Windows: CtrlAlt+0

No cambié este atajo. Solo quería contarles sobre esto porque lo encuentro útil.

Es todo por hoy. Compartiré más atajos de teclado contigo la próxima semana.

Publicar un comentario

0 Comentarios