Sistemas informáticos

Appearance

Visual Studio Code ​

Visual Studio Code, habitualmente denominado VS Code, es un editor de código fuente desarrollado por Microsoft.

Permite trabajar con numerosos lenguajes y formatos de archivo y ampliar sus funcionalidades mediante extensiones.

Durante esta unidad lo utilizaremos como herramienta principal para crear y editar los archivos de nuestros proyectos de documentación.

Instalación ​

Visual Studio Code está disponible para Windows, GNU/Linux y macOS.

La versión correspondiente a cada sistema operativo puede obtenerse desde su sitio web oficial:

Visual Studio Code

Documentación oficial

La documentación de Visual Studio Code está disponible en:

Visual Studio Code Docs

Abrir un proyecto ​

Cuando trabajamos con VS Code es recomendable abrir el directorio completo del proyecto en lugar de abrir individualmente cada archivo.

Podemos hacerlo desde:

text
File → Open Folder

También podemos abrir desde la terminal el directorio en el que nos encontramos:

bash
code .

El punto . representa el directorio actual.

Por ejemplo:

bash
cd technical-documentation
code .

VS Code abrirá technical-documentation como directorio de trabajo.

Explorador de archivos ​

El panel Explorer permite visualizar y gestionar los archivos y directorios del proyecto.

Desde este panel podemos realizar operaciones como:

  • crear archivos;
  • crear directorios;
  • abrir archivos;
  • renombrar elementos;
  • eliminar elementos;
  • mover archivos entre directorios.

Por ejemplo, un proyecto de documentación podría tener la siguiente estructura:

text
technical-documentation/
├── images/
├── installation.md
├── configuration.md
└── README.md

La misma estructura que gestionamos desde la terminal puede visualizarse y modificarse desde VS Code.

Editor ​

Al seleccionar un archivo desde el explorador, este se abre en el editor.

Podemos mantener varios archivos abiertos simultáneamente y cambiar entre ellos mediante pestañas.

VS Code proporciona diferentes ayudas dependiendo del tipo de archivo con el que estemos trabajando, como:

  • resaltado de sintaxis;
  • autocompletado;
  • detección de determinados errores;
  • búsqueda y sustitución;
  • navegación entre archivos.

Durante esta unidad trabajaremos principalmente con archivos de texto y documentos Markdown con extensión .md.

Guardar archivos ​

Los cambios realizados en un archivo deben guardarse para que queden almacenados en el sistema de archivos.

Podemos guardar el archivo actual mediante:

text
Ctrl + S

También podemos activar el guardado automático desde:

text
File → Auto Save

Cuando posteriormente utilicemos Git será importante distinguir entre modificar y guardar un archivo y registrar esos cambios en el historial del repositorio.

Son operaciones diferentes.

Terminal integrada ​

VS Code incorpora una terminal que permite ejecutar comandos sin abandonar el editor.

Podemos abrirla desde:

text
Terminal → New Terminal

La terminal se abrirá normalmente en el directorio del proyecto.

Por ejemplo:

text
student@ubuntu:~/technical-documentation$

Desde ella podemos utilizar los comandos estudiados anteriormente:

bash
pwd
ls
mkdir
touch
cp
mv
rm

Más adelante utilizaremos esta misma terminal para ejecutar comandos de Git.

TIP

Utilizar la terminal integrada permite trabajar con los archivos y ejecutar comandos mientras mantenemos abierto el proyecto en el editor.

Buscar archivos ​

En proyectos con muchos archivos resulta útil poder localizarlos rápidamente.

Podemos abrir la búsqueda rápida de archivos mediante:

text
Ctrl + P

y comenzar a escribir el nombre del archivo que queremos abrir.

Por ejemplo:

text
installation

VS Code mostrará los archivos del proyecto cuyo nombre coincida con la búsqueda.

Buscar contenido ​

También podemos buscar texto dentro de los archivos.

Para buscar en el archivo actual podemos utilizar:

text
Ctrl + F

Para realizar una búsqueda en todos los archivos del proyecto:

text
Ctrl + Shift + F

Esta función resulta especialmente útil cuando trabajamos con proyectos que contienen numerosos archivos de documentación.

Extensiones ​

VS Code permite ampliar sus funcionalidades mediante extensiones.

Las extensiones pueden añadir soporte para:

  • lenguajes de programación;
  • formatos de archivo;
  • herramientas de desarrollo;
  • depuración;
  • formateo;
  • documentación;
  • integración con otros servicios.

Las extensiones pueden instalarse desde el apartado Extensions de VS Code.

WARNING

No es necesario instalar una extensión para cada tarea.

Antes de instalar una extensión debemos comprobar qué funcionalidad proporciona, quién la publica y si realmente la necesitamos.

Trabajo con Markdown ​

Visual Studio Code proporciona soporte para archivos Markdown.

Podemos crear un documento:

text
README.md

y comenzar a editarlo directamente.

Además, VS Code permite visualizar una previsualización del documento Markdown.

Podemos acceder a ella desde la paleta de comandos:

text
Ctrl + Shift + P

y buscar:

text
Markdown: Open Preview

También podemos utilizar:

text
Ctrl + Shift + V

La previsualización permite observar el resultado del documento mientras modificamos su contenido.

El lenguaje Markdown se estudiará con más detalle en el siguiente epígrafe.

Paleta de comandos ​

La Command Palette permite buscar y ejecutar muchas de las funciones disponibles en VS Code.

Podemos abrirla mediante:

text
Ctrl + Shift + P

Por ejemplo, podemos escribir:

text
Markdown

para localizar los comandos relacionados con Markdown.

La paleta de comandos resulta especialmente útil cuando conocemos la operación que queremos realizar, pero no sabemos dónde se encuentra en los menús.

Flujo básico de trabajo ​

El flujo de trabajo inicial con VS Code será:

  1. Crear o localizar el directorio del proyecto.
  2. Abrir el directorio completo con VS Code.
  3. Crear y organizar los archivos desde el explorador o la terminal.
  4. Editar los documentos.
  5. Guardar los cambios.
  6. Utilizar la terminal integrada cuando sea necesario.

Por ejemplo:

bash
mkdir technical-documentation
cd technical-documentation
code .

A partir de ese momento podremos gestionar el proyecto desde una misma aplicación, combinando el editor, el explorador de archivos y la terminal.

En el siguiente epígrafe utilizaremos este entorno para comenzar a crear documentación utilizando Markdown.