5 - Configuración del VSCode

Otra de las características fundamentales que tiene el editor de texto Visual Studio Code es la posibilidad de configurar sus funcionalidades como pueden ser fuentes, colores, tamaños de fuentes, tabulaciones, modos de presentar en pantalla el editor etc.

En este momento podemos configurar más de 400 características.

Para acceder a la ventana de configuración del VSCode lo podemos hacer de tres formas:

  1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

    configuración desde el ícono rueda dentada vscode
  2. También podemos acceder a la pestaña de configuración desde el menú de barra seleccionando (Archivo -> Preferencias -> Configuración):

    configuración desde el menú de opciones vscode
  3. Finalmente en cualquier momento podemos abrir la pestaña de configuración mediante las teclas (Ctrl + ,):

    configuración desde el menú de opciones vscode

Ventana de configuración

La ventana de configuración tiene dos partes fundamentales, del lado izquierdo aparecen todas las opciones de configuración con los valores por defecto, estos valores solo están en modo de lectura. Del lado derecho debemos disponer los valores que aparecen a la izquierda y que queremos darle otro valor distinto al valor por defecto:

pestaña de configuración vscode

Lo más sencillo es desde la columna izquierda seleccionar la opción que queremos modificar acercando el mouse hasta que aparezca un ícono de lápiz y seleccionar la opción "Copiar en configuración" o en algunos casos aparece una lista de valores posibles:

editar característica de configuración vscode

Luego de esto podemos ver que en la columna de la derecha se ha agregado dicha característica y podemos ahora definir un valor distinto al asignado por defecto (por ejemplo cambiamos el tamaño de la fuente a 16 en lugar de los 14 que es el valor por defecto):

editar característica de configuración vscode

Luego de grabar la pestaña de configuración si abrimos cualquier archivo podemos comprobar que el tamaño de la fuente es ahora de 16 puntos:

configuración vscode

Configuración de usuario y configuración de área de trabajo

En el ejemplo anterior modificamos la "Configuración de usuario", ésta es aplicada a todos los archivos que se editen. Podemos definir configuraciones particulares a un área de trabajo, para eso el área de trabajo debe estar abierta.

Para probar la configuración de un área de trabajo primero hagamos la apertura de una carpeta c:\TutorialVSCode (o cualquier otra carpeta que tenga un proyecto) y luego entremos a la opción de Configuración (Ctrl + ,):

configuración área de trabajo vscode

Debemos seleccionar la opción "CONFIGURACION DE AREA DE TRABAJO" y recién pasar a modificar valores de configuración.

La configuración definida solo tiene efecto en esa área de trabajo, luego si cerramos dicha carpeta y abrimos otra veremos que la configuración hecha anteriormente no tiene efecto.

La configuración del área de trabajo VSCode lo resuelve creando una carpeta llamada '.vscode' y dentro de la misma un archivo llamado 'settings.json'. Si abrimos dicho archivo veremos que tiene la configuración que definimos:

{
    "editor.fontSize": 20
}

Juego para memorizar los atajos de teclado en VSCode (hasta lo visto en este concepto)