Visual Studio Code. Personalización

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

   

3. Haga clic en el tema que quiera aplicar. En estos apuntes se utiliza el tema Dark Modern (Moderno oscuro), pero si se quisiera cambiar a otro tema, por ejemplo el tema Light Modern (Moderno claro), basta con seleccionarlo en la lista:

   

4. Inmediatamente, se aplicará el tema elegido:

   

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 y una lista de extensiones recomendadas. En este caso, se muestra ya instalada la extensión del paquete de idioma español, mientras que las extensiones recomendadas dependen de los programas instalados en el ordenador.

   

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

   

3. Haga clic en el nombre de la extensión para abrir una pestaña con información detallada.

   

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

   

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

   

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.

   

7. Visual Studio Code mostrará la extensión recién instalada en la lista de extensiones instaladas.

   

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:

   

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):

   

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:

   

Para cambiar una preferencia de configuración ...

1. Despliegue el menú correspondiente a la preferencia:

   

2. y elija la opción de menú deseada (en otras preferencias de configuración basta con marcar o desmarcar una casilla). Los campos modificados se resaltan con un icono de rueda dentada.

   

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

   

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":

   

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

   

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

• uno para las preferencias globales (Usuario), que en Windows 10 se guarda en la carpeta C:\Users\NombreDeUsuario\AppData\Roaming\Code\User\
• otro para las preferencias de la carpeta o área de trabajo, que se guarda en una carpeta .vscode que se crea en la raíz del área de trabajo.

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

   

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.

   

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

   

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.

   

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.

   

Crear una tarea global

Estos son los pasos a realizar para crear una tarea global (Usuario) en Visual Studio Code.

1. Haga clic en el icono Administrar (con forma de rueda dentada) situado en la esquina inferior izquierda y elija la opción de menú Tareas de usuario, aunque si no ha abierto ningún espacio de trabajo ni ninguna carpeta, también puede elegir la opción de menú Terminal > Configurar tareas.

   

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

   

3. 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 la carpeta Users de Windows.

   

   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 la(s) tarea(s) deseada(s) y guarde el archivo.

Crear una tarea de área de trabajo o carpeta

Estos son los pasos a realizar para crear una tarea asociada a un área de trabajo o carpeta en Visual Studio Code.

1. Abra un área de trabajo o carpeta.
2. Elija la opción de menú Terminal > Configurar tareas.

   

3. Si el archivo tasks.json no existe, se mostrará la opción "Crear archivo tasks.json desde plantilla". Haga clic en esta opción:

   

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

   

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

   

   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"
           }
       ]
   }
   

6. Modifique el contenido del archivo tasks.json con la(s) tarea(s) deseada(s) y guarde el archivo.

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:

   

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

   

3. Se mostrará un cuadro con las tareas disponibles. Haga clic en la tarea que quiera aplicar. En el caso de la tarea de la imagen de ejemplo siguiente, se muestran las tareas recomendadas en el curso de Páginas web HTML y hojas de estilo CSS de mclibre.org.

   

4. El resultado obtenido depende de la tarea elegida. En el caso de la tarea de la imagen de ejemplo siguiente, se abriría en Firefox la página web abierta en Visual Studio Code:

   

Crear atajos de teclado

Estos son los pasos a realizar para crear atajos de teclado en Visual Studio Code. Lo ejemplificaremos con la vinculación del atajo de teclado Ctrl+Alt+a al comando que comprueba si existe una nueva versión de 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:

   

2. Se abrirá una pestaña con la lista de atajos de teclado disponibles:

   

3. Escribiendo texto en el cuadro de texto de búsqueda se mostrarán los atajos relacionados. Si escribe la palabra "actualizaciones" podrá ver que hay un comando que realiza la búsqueda de actualizaciones (de hecho hay uno para actualizaciones de la aplicación y otro para actualizaciones de las extensiones). Tenga en cuenta que el buscador distingue las vocales acentuadas de las no acentuadas.

   

4. A continuación busque un atajo de teclado que no esté ya utilizado. Al escribir un atajo, la lista de atajos se filtra. Por ejemplo, al escribir "ctrl+alt" se muestran los atajos de teclados en los que se pulsan las teclas Ctrl y Alt simultáneamente:

   

5. Puede comprobar que el atajo de teclado Ctrl+Alt+a está libre porque la lista está vacía.

   

6. Vuelva a teclear el comando y haga doble clic en él:

   

7. Se abrirá una ventana en la que podemos indicar la combinación de teclas deseada.

   

8. En este caso, pulse la combinación de teclas Ctrl+Alt+a e Intro.

   

9. La asociación del atajo con el comando se mostrará en la lista

   

10. Puede probar el atajo y en este ejemplo comprobar que se realiza la comprobación de actualizaciones:

    

Modificar o eliminar atajos de teclado

Estos son los pasos a realizar para modificar o borrar 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:

   

2. Escriba el atajo que quiera modificar (escribiendo el atajo o el comando correspondiente). Por ejemplo, el atajo Ctrl+Alt+a creado en el apartado anterior. Si el atajo está definido, se mostrará en la lista filtrada

   

3. Haga clic derecho en la descripción del atajo y elija la opción deseada "Cambiar enlace de teclado...", "Quitar enlace de teclado" o incluso "Restablecer enlaces de teclado" para eliminarlos todos:

   

Archivo keybindings.json de atajo de teclado

Para no tener que crear los atajos de teclado uno a uno, podemos crearlos directamente en el archivo keybindings.json.

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:

   

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:

   

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

   

   Inicialmente, este fichero no contiene ninguna definición:

   // Coloque sus atajos de teclado en este archivo para sobrescribir los valores predeterminados
   [
   ]
   

4. Puede modificar el contenido del archivo keybindings.json con los atajos de teclado deseados y guardar el archivo:

   por ejemplo, en la captura siguiente se muestran los atajos de teclado 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 Windows 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.

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 especiales (por ejemplo \n significa salto de línea, \t significa tabulador, \\ significa contrabarra simple, etc.).

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

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

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