Visual Studio Code Dia 4 Preferencias y atajos del teclado

Vídeo Guía

Vídeo 4: Preferencias y atajos del teclado

Hola a todos bienvenidos al vídeo número 4 sobre Visual Studio Code

Este vídeo será corto y hablaremos sobre preferencias, como sobrescribir sus preferencias a nivel usuario o a nivel de workspace, luego hablaremos sobre los atajos del teclado y cómo configurar, espero disfruten de este vídeo.

Menú Preferencias

Configurar preferencias a nivel de usuario

Bueno, hablemos sobre las preferencias en Visual Studio Code como lo vimos en uno de los primeros vídeos que no profundizamos en el asunto a través del menú Code preferencias podemos configurar las preferencias.

alt text

Pero a nivel de usuario, es decir aplicaría para todos nuestros proyectos, cada que abramos Visual Studio Code esto serían las configuraciones.

alt text

En el lado izquierdo se tienen las configuraciones que vienen por defecto esto es un archivo de modo lectura no se puede sobre escribir y en el lado derecho es lo que, las configuraciones que queremos sobrescribir.

alt text

Entonces, por ejemplo, aquí tenemos la fuente en tamaño a doce, pero yo la puedo sobrescribir a tamaño 13, Y de inmediato veo los cambios.

alt text

Aquí está también lo de FileAutoSave, la familia de fuentes y el Tab, por ejemplo. Entonces obviamente en la parte izquierda como puedes ver no me deja editar,

alt text

Si yo quiero sobrescribir uno, obviamente lo tengo que escribir acá, tengo intelliSense sobre las configuraciones y editor. tabSize tamaño 4 no digamos que tamaño 2.

alt text

Si nos vamos a un archivo, por ejemplo, .ts, cada que demos Tab va a ser un tamaño de tamaño 2 en vez de 4

Si ustedes bajan, hay una parte donde dice de exclusión de archivos, aquí se excluyen los archivos .Git, .svn, .hg y .DE_Store

alt text

Esos son archivos que se excluyen para mostrar en este explorador digamos lo así.

alt text

Pero también se excluye a la hora de buscar documentos o de buscar un texto en los documentos que estén abiertos o en cualquier archivo de la carpeta. No es necesario entrar a verificar cada uno o mostrar cada una de las configuraciones, pero me parece importante que ustedes sepan que hay un tipo de agrupación aquí que es en las más utilizadas, editor, emmet, área de trabajo, ventana, archivo, etc.

alt text

Incluso están en español y cada una tiene su documentación en español, por ejemplo, inserta fragmentos de código cuando el prefijo coincide, funciona mejor si la opción quickSuggetions no está habilitada.

alt text

Entonces no tenemos que adivinar que hace cada una de estas configuraciones, simplemente leemos la descripción y podemos luego sobre escribirla, voy a devolverlo a cuatro, no simplemente lo voy a quitar.

Vamos a ver otro que podamos utilizar que nos sirva en nuestro día a día LineHeigth, editor punto LineHeigth es la altura de la línea del editor, voy a ponerle dos.

alt text

Voy a poner control+z, cada fila se volvió tan pequeña que no alcanzamos a ver. Hay lo puse en 20 parece que en 20 es adecuado en 30 Ya se ve demasiado

alt text

Obviamente tendría que buscar esta configuración en este lado para saber cuál es el tamaño por defecto editor punto lineheigth, bueno aquí está en cero y dice utilice cero para calcular el el valor del lineHeigth a partir de fontSize.

alt text

Configuración de área de trabajo

Entonces depende del tipo de letra, por ahora simplemente lo voy a eliminar y creo que con esto queda claro lo que se puede hacer a nivel de configuración. Ahora hay algo que es muy importante y es la configuración a nivel de proyecto aquí estamos haciéndolo a nivel de usuario si ustedes ven en la parte superior derecha también dice configuración de área de trabajo

alt text

Cuando estamos hablando de área de trabajo estamos hablando de este proyecto como tal de esta carpeta.

alt text

Entonces yo aquí puedo poner simplemente para este proyecto yo quiero que la fuente sea tamaño 10

alt text

Y de esa manera para este proyecto el me utiliza ese tamaño, ese archivo queda en la carpeta de .vscode, settings.json

alt text

Desde ahí se configura, si yo llego y abro otra carpeta diferente, otro proyecto diferente, por ejemplo, hay estoy en TSPLAY voy a abrir este de aspplay.

alt text

Vamos a abrir cualquiera de los archivos van a ver que la fuente, aquí no es tamaño 10, es tamaño 12.

Entonces, esa configuración que hicimos allá en el work space o área de trabajo solamente aplica para ese proyecto para esos work space.

Shortcuts

Ahora hablemos sobre los shortcuts o los atajos del teclado entonces nos vamos a Code preferencias y aquí dice métodos abreviados del teclado.

alt text

Entonces los métodos abreviados del teclado al igual que los la configuración es un archivo de sólo lectura en la parte izquierda no puedo modificar, la parte derecha es donde puedo modificar los Shortcuts que ya existen por defecto pero también puedo agregar unos nuevos si ustedes ven en la parte izquierda hay bastantes atajos, pero sí bajó hasta el final hay comandos que no tienen un shotcut como tal.

alt text

Entonces vamos a buscar alguno por ejemplo, aquí hay uno de que dice Worckbench.action.files.newFile

alt text

Crear un shortcut

Vamos a hacer un shortcut, un atajo para crear un nuevo archivo ¿cómo se crea un atajo? vamos a la parte superior un atajo tiene tres partes:

Primero el atajo como tal

alt text

Segundo el comando

alt text

Tercero el cuándo

alt text

¿Qué es él cuándo? Él cuando es si está activo en el work space o si está en un menú por ejemplo entonces simplemente voy a copiar uno de los existentes, voy a cerrar aquí y digamos que yo quiero control+shift+N que lo que haga es crear un nuevo documento ¿Cuándo? cuando esté el foco en el editor, entonces digamos en editorFocus.

alt text

Ahora ¿cuál es el comando bueno? Aquí tengo que volver a abrir los comandos existentes New windo, new, este, creo que era este explorer.newFile, explorer.newFile Vamos a pegarlo aquí y tenemos que ctrl+shift+n

alt text

Aunque en nuestro caso no sería control, sino cmd por ser un mac. Aunque en el mac también tiene el control pero hagámoslo con los cmd.

alt text

Aquí estoy presionando command+shift+n y vean en la parte izquierda Explorador

alt text

Estoy creando archivos de una manera rápida. Entonces eso es digamos que todo lo que tiene que ver con atajos, en la parte inferior pueden ver los comandos, no tienen que saberse esto de memoria y en la parte superior pueden ver el when para que vean donde se pueden activar, vean que hay break point, focus Variable focus, en el editor en el quick open, en interfaceOverviewVisible en el foco del cuadro de texto como tal, ósea cuando esta acá por ejemplo

alt text

Aquí utilizan el signo diferente de ( ! ), para digamos que para configurar que no se active ese shortcut cuando esté ahí simplemente es una negación nosotros como programadores ya lo sabemos.

alt text

Eso es todo por este vídeo, espero les haya gustado.