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.

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 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), elija la opción de menú Archivo > Abrir carpeta ... y la carpeta que desea como carpeta raíz del área de trabajo.

Actualmente (octubre de 2017), Visual Studio Code permite cambiar de área de trabajo (abriendo la carpeta raíz correspondiente), pero sólo puede mostrar un área de trabajo. Los desarrolladores están trabajando para que el interfaz de Visual Studio Code permita mostrar y trabajar con varias áreas de trabajo simultáneamente.

Gran parte de la personalización de Visual Studio Code no requiere definir el área de trabajo, excepto en el caso de las preferencias de configuración de área de trabajo o las tareas, cuya información se guarda en una carpeta oculta .vscode que se crea en la carpeta raíz del área de trabajado.

Preferencias de configuración de Visual Studio Code

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


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. 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
    • 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 (para ello, se tiene que haber abierto primero una carpeta)

    VSC. Modificar preferencias

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

    VSC. Modificar preferencias

  4. 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

  5. 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

  6. Guarde el archivo.
  7. 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 lateral. Se desplegará la barra lateral mostrando las extensiones disponibles, ordenadas por popularidad:

    VSC. Instalar extensiones

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

    VSC. Instalar extensiones

  3. 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. Se mostrará una ventana de confirmación. Haga clic en Volver a cargar la ventana para recargarla.

    VSC. Instalar extensiones

  6. Tras reiniciarse, 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ú Tareas > Configurar tarea.

    VSC. Crear tarea

  2. Se mostrará un cuadro con los distintos tipos de tareas. Haga clic en Others:

    VSC. Crear tarea

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

    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": [
            {
                "taskName": "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 la carpeta abierta. Esto permite utilizar la tarea en todos los archivos de la carpeta abierta (y en los archivos de las subcarpetas). Pero si abrimos otra carpeta 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.