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

   

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+ (default dark), pero si se quisiera cambiar a otro tema, por ejemplo el tema Light+ (default light), 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:

   

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

   

   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:

   

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)

   

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

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

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

   

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

   

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

   

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.

   

   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.

   

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

   

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:

   

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:

   

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:

   

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

   

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.

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