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:

La configuraciones recomendadas para cada uno de los cursos de mclibre se encuentran en los propios cursos:

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 recomendadas y 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 los botones 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 debe reiniciar para cargar la extensión. Haga clic en el botón Yes "Restart Now" 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, o bien haga clic en el icono Administrar (con forma de rueda dentada) situado en la esquina inferior izquierda y elija la opción de menú 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 Light+ (default light) en los apuntes de HTML/CSS y el tema Dark+ (default dark) en los apuntes de Python y PHP:

    VSC. Cambiar tema de color

  4. Inmediatamente, se aplicará el tema elegido:

    VSC. Tema Light+ predeterminado

Áreas de de trabajo de Visual Studio Code

Nota: El término inglés Workspace está traducido al español en Visual Studio Code de dos formas distintas: Espacio de trabajo o Área de trabajo. En estos apuntes se utilizará la denominación de Área de trabajo, salvo cuando se haga referencia al interfaz de Visual Studio Code en el que aparezca el término Espacio de trabajo (por ejemplo, opciones de menús).

Visual Studio Code permite trabajar con dos tipos de áreas de trabajo:


Si no hay abierta ninguna carpeta o á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 una carpeta o un área de trabajo, la barra de estado de Visual Studio Code se muestra de color azul:.

VSC. Color de la barra de tareas


Nota: En los cursos de mclibre. org (HTML/CSS, Python o PHP) se recomienda utilizar carpetas, no áreas de trabajo, simplemente por mantener separado el trabajo realizado en cada asignatura (o módulo formativo).

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, o bien haga clic en el icono Administrar (con forma de rueda dentada) situado en la esquina inferior izquierda y elija la opción de menú Configuración:

    VSC. Modificar preferencias

  2. Se abrirá una pestaña con las preferencias de configuración. Si no hemos abierto ninguna carpeta ni área de trabajo, esta ventana muestra únicamente las preferencias globales (Usuario):

    VSC. Modificar preferencias

    Nota. En las primeras versiones de Visual Studio Code esta ventana mostraba el contenido del fichero settings.json. Desde la versión 1.27 (septiembre de 2018), esta ventana muestra las preferencias con el aspecto de una página web.

  3. Si hemos abierto una carpeta o un área de trabajo, la pestaña permite elegir entre mostrar únicamente las preferencias globales (Usuario) o incluyendo las preferencias del área de trabajo o de la carpeta abierta (Área de trabajo):

    VSC. Modificar preferencias VSC. Modificar preferencias


Para cambiar una preferencia de configuración ...

  1. Despliegue el menú correspondiente a la preferencia:

    VSC. Modificar preferencias

  2. y elija la opción de menú deseada (en otras preferencias de configuración basta con marcar o desmarcar una casilla)

    VSC. Modificar preferencias

  3. Tenga en cuenta que los cambios realizados se guardan automáticamente:

    VSC. Modificar preferencias


Para ver únicamente las preferencias modificadas

  1. Haga clic en el icono de tres puntos situado en la parte superior derecha y elija la opción "Mostrar la configuración modificada":

    VSC. Modificar preferencias

  2. De esta manera se mostrarán únicamente las preferencias modificadas:

    VSC. Modificar preferencias


Las modificaciones realizadas se guardan en dos ficheros settings.json,

Si se van a realizar muchas modificaciones o se quiere aplicar un conjunto de modificaciones ya definido (por ejemplo, las modificaciones que se proponen en los cursos de HTML/CSS, Python o PHP de estos apuntes), es más cómodo trabajar directamente con los archivos settings.json, aunque se debe tener cuidado en no cometer errores sintácticos (olvidar alguna comilla, coma, o llave, por ejemplo). Si edita un archivo settings.json, debe guardar el archivo explícitamente, las modificaciones no se guardan automáticamente.

  1. Para abrir el archivo settings.json global (Usuario), asegúrese de que está viendo las preferencias globales (Usuario) y haga clic en el icono de documento situado en la parte superior derecha

    VSC. Modificar preferencias

  2. Se abrirá una nueva pestaña mostrando el nombre del fichero, su ubicación en el disco y el contenido. En la captura del ejemplo siguiente, se muestra el valor modificado en el ejemplo anterior.

    VSC. Modificar preferencias

  3. Para abrir el archivo settings.json del área de trabajo (Área de trabajo), asegúrese de que está viendo las preferencias incluyendo las del área de trabajo (Área de trabajo) y haga clic en el icono de documento situado en la parte superior derecha

    VSC. Modificar preferencias

  4. Se abrirá una nueva pestaña mostrando el nombre del fichero, su ubicación en el disco y el contenido. En la captura del ejemplo siguiente, el fichero está vacío porque no se ha modificado ninguna preferencia en el área de trabajo.

    VSC. Modificar preferencias

  5. El archivo settigns.json del área de trabajo se crea en cuanto se abre (aunque después no se modifique), por lo que se mostrará en el Explorador de la barra de actividades. El fichero se puede abrir y editar abriéndolo como cualquier otro fichero.

    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.

    VSC. Instalar extensiones

  4. Para instalar una extensión, haga clic en el botón Instalar correspondiente.

    VSC. Instalar extensiones

  5. Tras unos segundos, se descargará e instalará la extensión. Las extensiones que requieren reiniciar Visual Studio Code muestran un mensaje indicándolo.

    VSC. Instalar extensiones

  6. Para salir del buscador de extensiones y volver a ver la lista de extensiones haga clic en el icono situado en la parte superior.

    VSC. Instalar extensiones

  7. Visual Studio Code mostrará la extensión recién instalada 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.

Las tareas van asociadas a las áreas de trabajo, por lo que es necesario abrir una carpeta o área de trabajo para poder crear tareas.


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

  3. Se mostrará una lista de plantillas de tareas. Haga clic en la opción "Others":

    VSC. Crear tarea

  4. Se mostrará en una pestaña el archivo de tareas tasks.json con una tarea de ejemplo. Observe que el archivo tasks.json se ha creado en una carpeta .vscode en la raíz del área de trabajo.

    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"
            }
        ]
    }
    
  5. Modifique el contenido del archivo tasks.json con la(s) tarea(s) deseada(s) y guarde el archivo.

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

    VSC. Crear tarea

  6. El archivo tasks.json se crea en la carpeta .vscode que se crea en la raíz del á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ú Terminal > 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, o bien haga clic en el icono Administrar (con forma de rueda dentada) situado en la esquina inferior izquierda y elija la opción de menú 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 icono de documento situado en la parte superior derecha :

    VSC. Crear atajo de teclado

  3. Se abrirá una pestaña mostrando el fichero global de atajos de teclado keybindings.json. Como en el caso del archivo de configuración global (Usuario), este archivo se encuentra en Windows en la carpeta C:\Users\NombreDeUsuario\AppData\Roaming\Code\User\.

    VSC. Crear atajo de teclado

    Inicialmente, este fichero no contiene ninguna definición:

    // Coloque sus atajos de teclado en este archivo para sobrescribir los valores predeterminados
    [
    ]
    
  4. Modifique el contenido del archivo keybindings.json con los atajos de teclado deseados y guarde el archivo:

    En la captura siguiente se muestran los atajos de teclado que abren ficheros en Firefox y Chrome, como se comenta en la lección Configuración recomendada para el curso Páginas web HTML y hojas de estilo CSS. Los atajos asociados serían:

    • Ctrl+Alt+f, para Abrir en Firefox
    • Ctrl+Alt+c, para Abrir en Chrome

    VSC. Crear atajo de teclado

  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 se pueden utilizar en todas las áreas de trabajo o carpetas. Pero si un atajo ejecuta una tarea y la tarea no está definida definida en el área de trabajo, el atajo no producirá ningún resultado.

Otros temas relacionados con la personalización

Rutas en archivos JSON

En los archivos de configuración en formato JSON (settings.json, tasks.json, keybindings.json, etc.), las rutas del sistema operativo se deben escribir con barras simples (/) o con contrabarras dobles (\\), pero no se pueden escribir con contrabarras simples (\). La razón es que la contrabarra simple es el carácter de escape, que sirve para indicar los caracteres espciales (por ejemplo \n significa salto de línea, \t significa tabulador, \\ significa contrabarra simple, etc.).

Correcto
  // PHP: Validate: Executable path
  // Ubicación del intérprete de PHP.
  "php.validate.executablePath": "C:/xampp/php/php.exe",
Correcto
  // PHP: Validate: Executable path
  // Ubicación del intérprete de PHP.
  "php.validate.executablePath": "C:\\xampp\\php\\php.exe",
Incorrecto
  // PHP: Validate: Executable path
  // Ubicación del intérprete de PHP.
  "php.validate.executablePath": "C:\xampp\php\php.exe",