Visual Studio Code. Uso

Interfaz de Visual Studio Code

Estos son los elementos principales del interfaz de Visual Studio Code:

Referencia: Visual Studio Code Docs: User Interface

Abrir enlace

Para abrir un documento enlazado, haga Ctrl+clic en la URL. Si es un documento local, el documento se abrirá en Visual Studio Code en una nueva pestaña. Si es un documento externo, el documento se abrirá en el navegador predeterminado.

Si el documento no existe, Visual Studio Code ofrece la posibilidad de crearlo, como muestra el ejemplo siguiente.

• La página web del ejemplo contiene un enlace a la hoja de estilo, que no existe. Al hace Ctrl+clic en el nombre de la hoja de estilo, Visual Studio Code muestra un aviso de error que permite la posibilidad de crear el archivo:

  

• Al hacer clic en "Crear archivo", el archivo se crea automáticamente y se abre en una nueva pestaña:

  

Ocultar / mostrar minimapa

El minimapa es una imagen reducida de la página web que se muestra en la parte derecha de Visual Studio Code y que permite desplazarse rápidamente a lo largo de un documento.

Si el documento no es muy largo (como ocurre en los ejercicios de este curso), el minimapa no resulta demasiado útil, pero ocupa espacio de pantalla.

Para ocultar (o mostrar si está oculto) el minimapa, elija la opción de menú Ver > Alternar minimapa:

Una vez oculto el minimapa, la ventana de edición se extenderá hasta el borde derecho:

Ajuste de línea

Inicialmente, Visual Studio Code no ajusta las líneas, por lo que las líneas largas no se ven completas.

Para que Visual Studio Code ajuste automáticamente las líneas, elija la opción de menú Ver > Alternar ajuste automático de línea:

Con el ajuste de líneas, las líneas largas se verán completas. El número de línea situado a la izquierda se mantiene para la toda la línea:

Apartados del Explorador en la barra de actividades

El Explorador de la barra de actividades puede mostrar diferentes apartados. Por ejemplo, en la captura siguiente muestra únicamente el árbol de ficheros del área de trabajo.

Haciendo clic en el botón de los puntos suspensivos se muestran los distintos apartados que se pueden elegir. Estos apartados se denomina Vistas en Visual Studio Code. Las vistas "Editores abiertos", "Carpetas" y "Esquema" son las vistas disponibles inicialmente. Algunas extensiones amplian el número de vistas disponibles. Para mostrar u ocultar una vista, haga clic en el nombre de la vista.

La vista "Editores abiertos" muestra una lista de los ficheros abiertos. La vista "Carpetas" muestra el árbol de ficheros del área de trabajo. La vista "Esquema" muestra la estructura de etiquetas del documento abierto en el Editor.

Formatear código

Para formatear código, pulse el atajo de teclado Alt+Shift+f.

Referencia: Visual Studio Code Docs: Formatear fragmentos

Pegar código

Al pegar código, Visual Studio Code añade un sangrado que puede resultar molesto en caso de que un formateo automático posterior no lo corrija (por ejemplo, si el código pegado incluye un elemento <pre>.

La solución es pulsar Ctrl+z (deshacer) inmediatamente después de pegar el código. De esa manera se eliminará el sangrado añadido.

VSC issue #6392: Copy/Cut then Paste doesn't preserve or fix indentation

Sangrado incorrecto

A veces el tamaño del sangrado no coincide con el establecido en la configuración.

Referencia: Pregunta en Stack Overflow

Insertar rutas de archivos

Cuando se escribe una ruta relativa en algún atributo (en una imagen, en un enlace, etc), se muestra un selector con los archivos y directorios disponibles. Al seleccionar uno de ellos, el nombre se añade a la ruta. Si con la lista visible escribimos uno o más caracteres, la lista muestra únicamente los archivos y directorios que comienzan por esos caracteres.

Si las imágenes se encuentran en un subdirectorio del directorio actual:

1. Al escribir las comillas en el atributo src ...:

   

2. ... se mostrará un cuadro con el contenido del directorio actual con uno de los elementos resaltado en azul claro:

   

3. Si la ruta que desea escribir es precisamente la que está resaltada en azul claro, pulse Intro. La ruta se añadirá automáticamente y si se trata de un directorio (como en el ejemplo), se mostrará el contenido:

   

4. Si escribe caracteres, el cuadro mostrará únicamente los ficheros cuyo nombre coincida con lo escrito:

   

5. En vez de escribir el nombre completo, en cualquier momento puede desplazar con las teclas de flecha arriba o abajo la franja azul hasta el nombre deseado ...:

   

6. ... y pulsar Intro para que se escriba en la página el nombre seleccionado en azul:

   

Si en algún momento no se muestra el cuadro con los nombres de los ficheros, pulse Ctrl+Espacio para mostrarlo.

Si las imágenes se encuentran en un directorio superior al directorio actual:

1. Escriba ../ para indicar que el camino empieza subiendo al directorio superior y se mostrarán los directorios y ficheros contenidos en el directorio superior:

   

2. A partir de ahí elija o escriba el nombre del directorio (o ../ si fuera necesario subir otro directorio) y se mostrará su contenido como en el ejemplo anterior:

   

Seleccionar bloques

Se pueden seleccionar bloques de etiquetas completos con los atajos de teclado Alt+Shift+FlechaDerecha y Alt+Shift+FlechaIzquierda:

Cada vez que se pulsa Alt+Shift+FlechaDerecha se van seleccionando los elementos de nivel superior a la selección actual. Cada vez que se pulsa Alt+Shift+FlechaIzquierda se vuelve a la selección de nivel inferior anterior.

Modificar el juego de caracteres

Visual Studio Code permite modificar el juego de caracteres de un documento. El ejemplo siguiente muestra cómo cambiar el juego de caracteres de UTF-8 con BOM a UTF (es decir, eliminar la marca de orden de bytes de UTF-8):

1. Visual Studio Code detecta el juego de caracteres de un documento y muestra el juego de caracteres en la barra de estado:

   

2. Haga clic en el nombre del juego de caracteres de la barra de estado y se abrirá un menú en la ventana de comandos. Elija la opción Guardar con Encoding:

   

3. Se abrirá un menú con los juegos de caracteres disponibles. El juego de caracteres actual del documento se mostrará el primero de la lista. Si quiere cambiar el juego de caracteres a UTF-8 (sin BOM), haga clic en la opción UTF-8:

   

4. Automáticamente el documento se guardará en el juego de caracteres elegido. El nuevo juego de caracteres se mostrará en la barra de estado: