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 siete categorías:
La configuraciones recomendadas para cada uno de los cursos de mclibre se encuentran en los propios cursos:
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).
Al iniciar Visual Studio Code, si el sistema operativo está en español, VSC ofrece durante unos segundos la opción de instalar automáticamente el paquete de idioma español. Para ello:
Si no se muestra la opción de instalar automáticamente el paquete español, la instalación puede realizarse manualmente. Los pasos a seguir son los siguientes:
Haga clic en los botones Install de la barra de actividades o del panel informativo para instalar la extensión.
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+.
Referencias:
Estos son los pasos a realizar para cambiar el tema de color en Visual Studio Code:
Visual Studio Code permite trabajar con dos tipos de áreas de trabajo:
El área de trabajo "clásica" de Visual Studio Code es simplemente 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ú
y seleccione la carpeta que desee como carpeta raíz del área de trabajo.Para cambiar de áreas de trabajo, elija la opción de menú
y seleccione una carpeta distinta. La opción de menú permite abrir directamente alguna de las últimas áreas de trabajo utilizadas.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ú
permite añadir carpetas al área de trabajo. A continuación se debe guardar el área de trabajo con la opción de menú . Posteriormente, las áreas de trabajo se pueden abrir con la opción de menúReferencias:
Si no hay abierta ninguna carpeta o área de trabajo, la barra de estado de Visual Studio Code se muestra de color morado:
Al abrir una carpeta o un área de trabajo, la barra de estado de Visual Studio Code se muestra de color azul:.
Nota: En los cursos de mclibre. org (HTML/CSS, Python o PHP) se recomienda utilizar carpetas (áreas de trabajo de una sola carpeta), no áreas de trabajo de varias carpetas, simplemente por mantener separado el trabajo realizado en cada asignatura (o módulo formativo).
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.
Estos son los pasos a realizar para instalar extensiones en Visual Studio Code.
Visual Studio Code organiza las preferencias de configuración en dos niveles.
La configuración de áreas 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 trabajo.
Referencias:
Estos son los pasos a realizar para editar el archivo de preferencias de configuración:
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.
Para cambiar una preferencia de configuración ...
Para ver únicamente las preferencias modificadas
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.
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:
Estos son los pasos a realizar para crear una tarea en Visual Studio Code.
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"
}
]
}
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.
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).
Para utilizar cualquiera de las tareas creadas, siga los pasos siguientes:
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:
Estos son los pasos a realizar para crear o modificar atajos de teclado en Visual Studio Code.
Inicialmente, este fichero no contiene ninguna definición:
// Coloque sus atajos de teclado en este archivo para sobrescribir los valores predeterminados
[
]
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:
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",