Visual Studio Code. Personalización

Visual Studio Code puede ser personalizado en muchos aspectos: el aspecto estético, los procesos de trabajo, las herramientas de desarrollo específicas, etc. En esta lección se comenta cómo están organizadas las opciones de personalización, que se encuentran separadas en cinco áreas:

En la lección Configuración recomendada para el curso de HTML y CSS se resumen las opciones de configuración recomendadas para seguir el curso de Páginas web HTML y hojas de estilo CSS.

Visual Studio Code en español

Visual Studio Code se instala en inglés, pero se puede cambiar al español instalando el paquete de idioma español (existen paquetes de idiomas para muchos idiomas).

Los pasos a seguir son los siguientes:

  1. Haga clic en el icono de Extensiones de la barra de actividades. Se desplegará la barra de actividades mostrando las extensiones disponibles, ordenadas por popularidad:

    VSC. Instalar paquete de idioma español

  2. Escriba en el cuadro de búsqueda la palabra Spanish. Se mostrarán las extensiones relacionadas:

    VSC. Instalar paquete de idioma español

  3. Haga clic en la extensión Spanish Language Pack para ver información detallada de la extensión. La información que se muestra también está accesible en la página web de la extensión Spanish Language Pack en el Visual Studio Code Marketplace.

    Haga clic en el botón Install de la barra de actividades o del panel informativo para instalar la extensión.

    VSC. Instalar paquete de idioma español

  4. Una vez instalada la extensión, Visual Studio Code mostrará un aviso indicando que se puede reiniciar para cargar la extensión. Haga clic en un botón Reload o en el botón Yes del aviso.

    VSC. Instalar paquete de idioma español

  5. Al reiniciar, Visual Studio Code mostrará el interfaz en español. En la barra de actividades se mostrará la extensión Spanish Language Pack en el apartado de extensiones habilitadas:

    VSC. Instalar paquete de idioma español

Temas de color de Visual Studio Code

Visual Studio Code incluye varios temas de color, que determinan la combinación de colores con el que se muestran las páginas web o los programas editados (color de fondo, de texto o de los elementos). Los temas de color se clasifican en tres grandes grupos: oscuro, claro y de alto contraste.

El tema de color predeterminado es el tema oscuro llamado Dark+.

VSC. Tema Dark+ predeterminado


Referencias:

Cambiar tema de color

Estos son los pasos a realizar para cambiar el tema de color en Visual Studio Code:

  1. Elija la opción de menú Archivo > Preferencias > Tema de color

    VSC. Cambiar tema de color

  2. Se mostrará la lista de temas instalados, con el tema actual resaltado con una franja azul oscura. En esta lista se puede escribir texto para filtrar la lista.

    VSC. Cambiar tema de color

  3. Haga clic en el tema que quiera aplicar. En estos apuntes se utiliza el tema claro Light+:

    VSC. Cambiar tema de color

  4. Inmediatamente, se aplicará el tema elegido:

    VSC. Tema Light+ predeterminado

Áreas de trabajo de Visual Studio Code

El área de trabajo "clásica" de Visual Studio Code es una carpeta y todo su contenido (incluidas subcarpetas). Esa carpeta es la carpeta raíz del área de trabajo.

Para abrir una carpeta (es decir, un área de trabajo "clásica"), elija la opción de menú Archivo > Abrir carpeta ... y seleccione la carpeta que desee como carpeta raíz del área de trabajo.

Para cambiar de área de trabajo, elija la opción de menú Archivo > Abrir carpeta ... y seleccione una carpeta distinta. La opción de menú Archivo > Abrir reciente permite abrir directamente alguna de las últimas áreas de trabajo utilizadas.


Si no hay abierta ningún área de trabajo, la barra de estado de Visual Studio Code se muestra de color morado:

VSC. Color de la barra de tareas

Al abrir un área de trabajo, la barra de estado de Visual Studio Code se muestra de color azul:.

VSC. Color de la barra de tareas


Desde la versión 1.18 (octubre de 2017), Visual Studio Code permite también crear áreas de trabajo que incluyan varias carpetas distintas (y todas las subcarpetas incluidas en ellas).

La opción de menú Archivo > Agregar carpeta al área de trabajo ... permite añadir carpetas al área de trabajo. A continuación se debe guardar el área de trabajo con la opción de menú Archivo > Guardar área de trabajo como .... Posteriormente, las áreas de trabajo se pueden abrir con la opción de menú Archivo > Abrir área de trabajo ...

Referencias:

Preferencias de configuración de Visual Studio Code

Visual Studio Code organiza las preferencias de configuración en dos niveles.

La configuración de área de trabajo debe realizarse para cada área de trabajo y se guarda en una carpeta oculta llamada .vscode que se crea en la carpeta raíz del área de trabajado.


Referencias:

Cambiar preferencias de configuración

Estos son los pasos a realizar para editar el archivo de preferencias de configuración:

  1. Elija la opción de menú Archivo > Preferencias > Configuración.

    VSC. Modificar preferencias

  2. Se abrirá una pestaña con las opciones de configuración (Settings). Desde la versión 1.27 (septiembre de 2018), esta ventana muestra las opciones con el aspecto de una página web:

    VSC. Modificar preferencias

  3. Antes de la versión 1.27, las opciones de configuración se establecían editando directamente el archivo settings.json. Para utilizar el interfaz anterior, haga clic en el botón de tres puntos situado a la derecha y elija la opción "Abrir settings.json":

    VSC. Modificar preferencias

  4. La ventana se dividirá en dos partes:
    • en la parte izquierda se muestra el archivo de configuración predeterminado, que no se puede modificar
    • en la parte derecha se muestra el archivo de configuración de usuario, que sí es editable
    • si se ha abierto un área de trabajo, en la parte derecha superior se muestra un selector que permite cambiar entre el archivo de configuración del usuario y el del área de trabajo

    VSC. Modificar preferencias

Este es un ejemplo de modificación del archivo de preferencias de configuración:

  1. La caja de texto superior permite filtrar las opciones de configuración:

    VSC. Modificar preferencias

  2. Para modificar una configuración, seleccione el valor a modificar en la pestaña izquierda y cópielo en la pestaña derecha...

    VSC. Modificar preferencias

  3. Modifique el valor de la configuración al valor deseado. Recuerde que las configuraciones deben estar separadas por comas. Mientras no se guarde el archivo, se muestran indicadores en la pestaña y en la barra de actividades.

    VSC. Modificar preferencias

  4. Guarde el archivo.
  5. Una vez guardado el archivo, se aplicarán las configuraciones establecidas.

    VSC. Modificar preferencias

Extensiones de Visual Studio Code

Las extensiones de Visual Studio Code permiten ampliar las características del editor. Las extensiones están disponibles en la web Visual Studio Code Marketplace. En esta web se pueden buscar extensiones y consultar detalles de las extensiones (características, número de instalaciones, precio, comentarios y valoraciones de los usuarios, ayuda disponible, etc.), aunque la instalación se realiza desde el propio Visual Studio Code.

Instalar extensiones

Estos son los pasos a realizar para instalar extensiones en Visual Studio Code.

  1. Haga clic en el icono de Extensiones de la barra de actividades. Se desplegará la barra de actividades mostrando las extensiones instaladas:

    VSC. Instalar extensiones

  2. Escriba un término o varios en la caja de texto de búsqueda, y se mostrarán las extensiones relacionadas.

    VSC. Instalar extensiones

  3. Haga clic en el nombre de la extensión para abrir una pestaña con información detallada. Para instalar una extensión, haga clic en el botón Instalar correspondiente.

    VSC. Instalar extensiones

  4. Tras unos segundos, se descargará e instalará la extensión. Haga clic en el botón Recargar para activar la extensión.

    VSC. Instalar extensiones

  5. Tras recargarse, Visual Studio Code mostrará la extensión en la lista de extensiones instaladas.

    VSC. Instalar extensiones

Tareas de Visual Studio Code

Las tareas de Visual studio Code permiten automatizar el uso de programas ajenos al propio editor. Las tareas se definen por escrito en un archivo (tasks.json) y se pueden invocar a través del interfaz o mediante atajos de teclado. El resultado de la ejecución de las tareas se suele mostrar en la ventana de Terminal.


Referencias:

Crear una tarea

Estos son los pasos a realizar para crear una tarea en Visual Studio Code.

  1. Elija la opción de menú Terminal > Configurar Tareas.

    VSC. Crear tarea

  2. Se mostrará un cuadro con los distintos tipos de tareas:
    • Si muestra la opción "echo", es que ya existe el archivo, pero únicamente contiene la tarea de ejemplo. haga clic en esta opción:

      VSC. Crear tarea

    • Si muestra la opción "Crear archivo tasks.json ...", es que no existe todavía el archivo tasks.json. Haga clic en esta opción:

      VSC. Crear tarea

    • Si muestra la opción "Others" (como hacía en versiones antiguas de Visual Studio Code), haga clic en ella:

      VSC. Crear tarea

  3. Se mostrará en una pestaña el archivo de tareas tasks.json con una tarea de ejemplo:

    VSC. Crear tarea

    Al crearse, este fichero contiene un ejemplo de tarea que simplemente muestra el mensaje "Hello" en el terminal:

    {
        // See https://go.microsoft.com/fwlink/?LinkId=733558
        // for the documentation about the tasks.json format
        "version": "2.0.0",
        "tasks": [
            {
                "label": "echo",
                "type": "shell",
                "command": "echo Hello"
            }
        ]
    }
    
  4. Modifique el contenido del archivo tasks.json con las tareas deseadas.:

    VSC. Crear tarea

    En la captura anterior se muestra una tarea que abriría el navegador Firefox, como se comenta en el apartado Tareas recomendadas en el curso de HTML y CSS.

  5. Guarde el archivo.
  6. El archivo tasks.json se crea en la carpeta .vscode que se crea en el área de trabajo. Esto permite utilizar la tarea en todos los archivos del área de trabajo. Pero si abrimos otro área de trabajo y queremos utilizar la misma tarea tendremos que crear de nuevo la tarea (o copiar el archivo tasks.json).

    VSC. Crear tarea

Utilizar una tarea

Para utilizar cualquiera de las tareas creadas, siga los pasos siguientes:

  1. Abra en una pestaña la página web a la que quiera aplicar la tarea:

    VSC. Utilizar tarea

  2. Elija la opción de menú Tareas > Ejecutar tarea ....

    VSC. Utilizar tarea

  3. Se mostrará un cuadro con las tareas disponibles. Haga clic en la tarea que quiera aplicar:

    VSC. Utilizar tarea

  4. El resultado obtenido depende de la tarea elegida. En el caso de la tarea de ejemplo de las capturas, se abriría en el navegador elegido la página elegida:

    VSC. Utilizar tarea

Atajos de teclado de Visual Studio Code

Visual Studio Code dispone de un gran número de atajos de teclado para acceder rápidamente a muchas de sus funciones, pero también se pueden crear nuevos atajos de teclado para optimizar los procesos de trabajo..


Referencias:

Crear o modificar atajos de teclado

Estos son los pasos a realizar para crear o modificar atajos de teclado en Visual Studio Code.

  1. Elija la opción de menú Archivo > Preferencias > Métodos abreviados de teclado.

    VSC. Crear atajo de teclado

  2. Se mostrará en una pestaña el archivo de atajos de teclado predeterminados de Visual Studio Code. Haga clic en el enlace keybindings.json para abrir el archivo de atajos de teclado de usuario:

    VSC. Crear atajo de teclado

  3. Como en el caso de las configuraciones, la ventana se dividirá en dos partes:
    • en la parte izquierda se muestra el archivo de atajos de teclado predeterminado, que no se puede modificar
    • en la parte derecha se muestra el archivo de atajos de teclado, que sí es editable

    VSC. Crear atajo de teclado

    Al crearse, este fichero no contiene ninguna definición:

    // Coloque sus enlaces de teclado en este archivo para sobrescribir los valores predeterminados.
    [
    ]
    
  4. Modifique el contenido del archivo keybindings.json con los atajos de teclado deseados (nuevos o ya existentes):

    VSC. Crear atajo de teclado

    En la captura anterior se muestran los atajos de teclado que permiten ejecutar las tareas aconsejadas en la lección Configuración recomendada para el curso de HTML y CSS que abren ficheros en Firefox y Chrome. Los atajos asociados serían:

    • Ctrl+Alt+f, para Abrir en Firefox
    • Ctrl+Alt+c, para Abrir en Chrome
  5. Tenga en cuenta que el archivo keybindings.json se crea en la carpeta C:\Users\Usuario\AppData\Roaming\Code\User. Por tanto, los atajos de teclados en todas las áreas de trabajo (carpetas). Pero si los atajos ejecutan tareas, como las tareas están definidas en cada área de trabajo, será necesario crear las tareas en las áreas de trabajo en las que se quieran utilizar.