TUTORIAL

Instalación y manejo básico

1 - Instalación del editor Visual Studio Code
(VSCode)
Adaptado de : [Link]

El editor de texto VSCode ha sido creado y es mantenido por Microsoft. Lo distribuye con
licencia Open Source y por lo tanto en forma gratuita. Lo debemos descargar del sitio
[Link], como podemos comprobar está disponible tanto para Windows,
Mac y Linux:

Estaremos trabajando en ambiente Windows (pero su empleo en

otros sistemas operativos es similar)

Una vez descargado procedemos a instalarlo siguiendo los pasos del asistente:
Ya tenemos instalado y funcionando VSCode:

El lenguaje es el Inglés. Lo primero que haremos es cambiar a español, instalando la extensión

de VS Code para tal fin. Presionamos el ícono de la izquierda para administrar extensiones y
buscamos 'spanish':
Luego de instalar la extensión debemos reiniciar el VS Code para que tenga efecto. Ahora ya
tenemos el editor en español:

El tema o aspecto visual por defecto es el oscuro, pero para que se vea más fácil en este tutorial
lo cambiaremos por un aspecto más claro.

Para cambiar el tema presionamos el botón del engranaje en la parte inferior izquierda y
seleccionamos "Tema de color":
Seleccionar el tema "Claro + (claro predeterminado)":

Podemos cerrar la pestaña de "Iniciar" y tendremos el editor VSCode en su mínima expresión:

Como vemos en el fondo del editor aparecen los 4 comandos más comunes que tenemos que
hacer normalmente cuando trabajamos con el editor de texto VSCode como puede ser " Abrir
archivo" con el atajo de teclas Ctrl+O.

A lo largo del tutorial veremos los atajos de teclas más comunes y otros no tan comunes pero
que nos pueden ayudar en un momento preciso.
2 - Archivo independiente: Creación,
apertura y modificación
Las actividades básicas de todo editor de texto es permitirnos crear nuevos archivos y
modificar archivos existentes.

2.1. Creación de un archivo

Desde el menú de opciones de VSCode seleccionamos "Archivo -> Nuevo archivo de texto" (o
mediante las teclas de atajo Ctrl + N):

Ahora en la ventana de edición procederemos a codificar un archivo HTML básico:

Ahora guardaremos el archivo en el disco duro donde indicaremos con la extensión el tipo de

archivo.

Para grabar el archivo desde el menú de opciones elegimos " Archivo->guardar" (o mediante
las teclas de atajo Ctrl + S): creación y grabación de un archivo con VSCode

Ahora seleccionamos en el diálogo la carpeta y nombre de archivo que le asignaremos:

Después de ésta acción el contenido que hemos escrito en VSCode queda almacenado en el
archivo '[Link]' en la unidad C:\TutorialVSCode. Si introducimos un cambio con el
editor VSCode podemos comprobar que en la pestaña cambia la cruz por un círculo indicando
que debemos grabar los cambios introducidos:

Para actualizar los cambios en el archivo debemos seleccionar nuevamente la opción " Archivo
guardar" o (Ctrl + S).

Podemos crear varios archivos y tenerlos abiertos en forma simultánea, cada uno en una
pestaña diferente.

Creemos nuestro segundo archivo dando los pasos que ya vimos "Archivo -> Nuevo archivo"
o (Ctrl + N), luego escribamos nuestra segunda página HTML y la grabemos con la opción
"Archivo->guardar" o (Ctrl + S):
2.2. Cambio entre pestañas

1. Mediante el mouse podemos seleccionar la pestaña del archivo que necesitemos

editar.
2. También podemos cambiar entre pestañas mediante las teclas (Alt+Número):

(Seleccionamos la segunda pestaña presionando Alt+2)

3. Podemos también cambiar entre pestañas mediante las teclas ( Ctrl+AvPag. y

Ctrl+RePag):
(Se van seleccionando las pestañas de izquierda a derecha o viceversa)
4. Por último desde el menú de opciones de VSCode podemos cambiar entre pestaña
seleccionando alguna de las dos opciones: Ir -> Cambiar editor -> Editor siguiente o
Editor anterior:
2.3. Grabar todos los archivos modificados.

Para probar esta opción introduzcamos algunos cambios en las dos pestañas de los archivos
'[Link]' y '[Link]'. Podemos ver en el primer ícono de la izquierda que hay dos
archivos modificados sin grabar:

La opción del menú que graba todos los archivos modificados es (Archivo->Guardar todo) o
el atajo de las teclas (Ctrl + K, luego soltamos las teclas control + K y presionamos finalmente

la tecla S):

2.4. Cerrar pestañas.

Tenemos tres formas de cerrar una pestaña:

1. Mediante el mouse podemos presionar sobre la cruz de la pestaña (si no se ha

grabado nos aparece un diálogo para confirmar que se guarden los cambios)
2. También podemos cerrar la pestaña activa presionando las teclas Ctrl+W
3. Cerrar la pestaña activa presionando las teclas Ctrl+F4
2.5. Abrir archivos.

Para abrir un archivo almacenado en el disco podemos hacerlo seleccionando desde el menú
de opciones: Archivo->Abrir archivo

El atajo de teclas para que aparezca el diálogo de apertura de archivo es: Ctrl+O.

2.6. Crear otro archivo a partir de uno existente.

Es muy común tener que a partir de un archivo existente generar otro. Para esto debemos
tener seleccionada la pestaña con el archivo y luego desde el menú de opciones seleccionar
'Archivo -> Guardar como...

 Problema: a partir del archivo '[Link]'

generar un archivo llamado '[Link]' con el
mismo contenido.
 Seleccionar 'Archivo -> Guardar como..., en
el diálogo que aparece indicamos el nuevo nombre
de archivo: '[Link]'
(Esta misma acción la podemos hacer mediante las
teclas Ctrl+May+S).

2.7. Guardado automático.

Si queremos desentendernos de la grabación de los archivos podemos activar la opción de

"Autoguardado". Para activar esta funcionalidad en Visual Studio Code debemos ir a la opción
de menú: Archivo -> Autoguardado y dejarla tildada (si la seleccionamos nuevamente se
desactiva la opción)

A partir de ese momento cada cambio que hagamos a un archivo luego se ven reflejados en
el disco donde se almacena (es decir no necesitamos ejecutar 'Archivo->Guardar')
 3 - Carpeta : apertura y cerrado
3.1. Abrir carpeta

Vimos en el concepto anterior la metodología para editar archivos que nos presenta VSCode.
Cuando tenemos que trabajar con un conjunto de archivos que se encuentran en una carpeta
lo más conveniente es utilizar la funcionalidad de " Abrir carpeta" para que se nos muestre la
lista de archivos contenidos en la misma y no tener que abrir en forma individual cada archivo.

Hay varias formas de poder hacer esta actividad:

1. Presionar el botón de "Explorador" de la "barra de actividades" que se encuentra al

lado izquierdo:

Seguidamente en el panel que aparece presionamos el botón "Abrir carpeta":

Seleccionamos la carpeta que queremos abrir y se nos muestra un cuadro de diálogo
para confirmar que los archivos a abrir son seguros:

Luego de confirmar, tenemos como resultado la lista de archivos y carpetas que tiene
dicha carpeta (en nuestro ejemplo solo tenemos 3 archivos, pero podemos abrir
carpetas que contienen subcarpetas):

Podemos seleccionar con el mouse cualquiera de los archivos contenidos en el

"Explorador" y ver su contenido inmediatamente en una pestaña de VSCode:

Los contenidos que seleccionamos con el mouse aparecen siempre en la misma

pestaña, si necesitamos abrir dicho archivo en otra pestaña debemos hacer doble clic
sobre el nombre del archivo.
 2. La segunda forma de "Abrir carpeta" es desde el menú de opciones de VSCode
seleccionando "Archivo -> Abrir carpeta...", o por medio del atajo de teclado (Ctrl+K,

Ctrl+O):
Si salimos del editor VSCode, al regresar en otro momento queda almacenada la última carpeta
abierta.

3.2. Cerrar carpeta

Cuando se abre una nueva carpeta se cierra la carpeta abierta actualmente, pero si queremos
podemos cerrar la carpeta abierta actualmente mediante la opción del menú " Archivo ->
Cerrar carpeta" o también podemos cerrarlas con las teclas de atajo (Ctrl+K, F):
 4 - Area de trabajo : creación, apertura,
modificación y cerrado
Es la tercera forma de trabajar con VSCode cuando tenemos proyectos más complejos que
requieren de más de una carpeta.

Cuando un proyecto es pequeño o mediano es muy común que todos los archivos se
encuentren alojados en una misma carpeta con sus subcarpetas, pero cuando tenemos que
trabajar con un proyecto muy grande, el cual se puede encontrar en carpetas de la misma
unidad o que se almacenan en distintos discos duros, por ejemplo, lo más adecuado es crear
un área de trabajo que haga referencia a dichos directorios.

4.1. Creación de área de trabajo

Para crear un área de trabajo desde el menú de opciones seleccionamos " Archivo -> Agregar
carpeta al espacio de trabajo":
Repetimos la misma operación para agregar más directorios a la misma área de trabajo. Luego
podemos ver que todos los directorios añadidos aparecen en la sección de " Explorador":

En el ejemplo que se ve en la imagen hemos agregado dos directorios ubicados en

c:\TutorialVSCode y c:\documentacion

Podemos abrir ahora cualquiera de los archivos que hace referencia el área de trabajo. Si
salimos del VSCode, cuando volvamos a ingresar se mostrará la última área de trabajo que
hemos creado, pero si intentamos abrir por ejemplo una carpeta sin añadirla al área de trabajo
actual se nos informará que el área de trabajo se perderá.

VSCode nos da la posibilidad de almacenar áreas de trabajo con un nombre en el disco duro
de nuestra computadora para poderlas abrir en otro momento. Para almacenar un área de
trabajo desde el menú de opciones seleccionamos " Guardar área de trabajo como...":

En el diálogo que aparece indicamos un nombre para poder recuperar ésta área de trabajo
creada y no tener que crearla nuevamente en otro momento. Se genera un archivo con el
nombre del área de trabajo indicada más la extensión 'code-workspace':

[Link]-workspace
Si vemos el contenido de este archivo podremos ver que en su interior hace referencia a todas
las carpetas del 'área de trabajo':

4.2. Cerrar un área de trabajo

Si tenemos un área de trabajo abierta podemos cerrarla seleccionando la opción " Archivo ->
Cerrar área de trabajo" o el atajo (Ctrl+K, F):

4.3. Abrir un área de trabajo

Si en algún momento grabamos un área de trabajo en un archivo con extensión *.code-
workspace podemos hacer su apertura seleccionando desde el menú de opciones " Archivo ->
Abrir área de trabajo desde archivo..."

4.4. Eliminar carpetas propias de un área de trabajo.

En cualquier momento podemos agregar carpetas a un área de trabajo como vimos

anteriormente, pero también podemos borrar la referencia a carpetas (no se borra la carpeta
del disco duro, sino solo la referencia en el área de trabajo)

Para desvincular una carpeta de un área de trabajo debemos presionar el botón derecho del
mouse sobre el nombre de la carpeta y seleccionar "Quitar carpeta del área de trabajo":
 5 - Configuración del VSCode
Otra de las características fundamentales que tiene el editor de texto Visual Studio Code es la
posibilidad de configurar sus funcionalidades como pueden ser fuentes, colores, tamaños de
fuentes, tabulaciones, modos de presentar en pantalla el editor etc.

En este punto podemos configurar cientos de características.

Para acceder a la ventana de configuración del VSCode lo podemos hacer de tres formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

2. También podemos acceder a la pestaña de configuración desde el menú de barra

seleccionando (Archivo -> Preferencias -> Configuración):
 3. Finalmente, en cualquier momento podemos abrir la pestaña de configuración
mediante las teclas (Ctrl+,):

5.1. Ventana de configuración

Si no tenemos ninguna carpeta o área de trabajo abierta, solo nos aparece una pestaña
"Usuario", esto significa que todas las configuraciones que efectuemos se aplicarán siempre,
por ejemplo cambiemos el tamaño de fuente por defecto y luego procedamos a abrir distintos
archivos:

Ahora procedamos a abrir una carpeta y cambiemos el tamaño de fuente a 30, procedamos a
abrir algún archivo de dicha carpeta y podremos ver que la configuración de la fuente es de
30 y no 20 (solo se aplica a dicha carpeta):

Además podemos ver que se ha creado una carpeta llamada '.vscode' y en su interior un
archivo llamado '[Link]' que contendrá todas las configuraciones que especifiquemos
para dicha carpeta:

5.2. Configuración de usuario, de carpeta y configuración de

área de trabajo
En el ejemplo anterior modificamos la "Configuración de usuario" y de una carpeta, podemos
definir configuraciones particulares a un área de trabajo, para eso el área de trabajo debe estar
abierta.

Para probar la configuración de un área de trabajo primero hagamos la apertura de un área

de trabajo que tengamos guardada y procedamos a entrar a " Configuración":

Debemos seleccionar la opción "Area de trabajo" y recién pasar a modificar valores de

configuración.

La configuración definida solo tiene efecto en esa área de trabajo, luego si cerramos dicha área
de trabajo y abrimos otra veremos que la configuración hecha anteriormente no tiene efecto.

La configuración del área de trabajo VSCode lo resuelve modificando el archivo con extensión
'.code-workspace':

{
"folders": [
{
"path": "C:\\TutorialVSCode"
},
{
"path": "C:\\documentacion"
}
],
"settings": {
"[Link]": 10
}
}
En cualquier momento podemos volver al valor por defecto para una propiedad de
configuración accediendo al menú lateral de dicha opción:
 3 - Paleta de comandos
Otra herramienta que nos provee VSCode es una paleta de comandos donde podemos
acceder a todas las funcionalidades. Tenemos que buscar la funcionalidad escribiendo su
descripción. Para hacer que aparezca la paleta de comandos podemos lanzarla de cuatro
formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

2. También podemos acceder a la "paleta de comandos" desde el menú de barra

seleccionando (Ver -> Paleta de comandos...):
 3. Podemos abrir la "Paleta de comandos" mediante la tecla (F1), o en cualquier
momento podemos abrir la "Paleta de comandos" mediante las teclas (Ctrl + Shift +
P):

La "Paleta de comandos" aparece en pantalla en forma centrada y en su editor debemos

escribir la acción que queremos hacer dentro de VSCode:

Por ejemplo si queremos entrar a la sección de preferencias de configuración de usuario y

configurar el idioma del VS Code:
La cantidad de comandos se van filtrando a medida que ingresamos una o más palabras. Una
vez que la ubicamos hacemos clic sobre la misma, en este ejemplo deberá aparecer la pestaña
que ya conocemos de configuración.

La "Paleta de comandos" desaparece inmediatamente luego de lanzar la actividad.

Esta herramienta que nos provee VSCode es muy útil en un principio, a medida que
conozcamos las teclas de atajo para cada actividad necesitaremos menos la "Paleta de
comandos".

3.1. Ejercicios

Buscar las siguientes actividades desde la "Paleta de comandos":

 abrir archivo
 abrir carpeta
 abrir área de trabajo
 guardar

Teniendo el cursor activo en una línea de un archivo HTML, buscar en la paleta de

componentes:

 eliminar línea
 agregar comentario
 buscar
 cerrar editor
 4 - Tema de color, tema de ícono de
archivo y tema de ícono del producto
4.1. Tema de color

En el primer concepto vimos cómo cambiar rápidamente el "Tema de color" que trae VSCode
con el objetivo de mostrar un tema claro y no el oscuro que trae por defecto. Para hacer que
aparezca el cuadro de selección de tema podemos hacerlo de tres formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

2. También podemos acceder desde el menú de barra seleccionando (Archivo ->

Preferencias -> Tema de Color):
 3. Mediante las teclas (Ctrl + K, Ctrl + T):

Cuando se abre el panel con los "Temas de color" mediante las teclas de flechas o el mouse
podemos ir seleccionando cada uno y ver como se actualiza en tiempo real la interfaz de

VSCode:

Si seleccionamos "Oscuro + (Oscuro predeterminado)":

Disponemos una lista limitada de "temas de color" pero podemos descargar de la tienda de
complementas de VSCode otros creados por la comunidad.

La búsqueda de temas también la podemos hacer desde el mismo VSCode seleccionando la

opción "Examinar temas de color adicionales...":

Cuando elegimos esta opción podemos escribir el nombre del tema y ver en tiempo real:

Probemos de instalar un tema de color muy popular llamado "Drácula":

La existencia de tantos "Temas de color" puede parecer algo banal, pero pensemos que un
programados pasa miles de horas con la vista puesta en el editor de texto.
 4.2. Tema de ícono de archivo

En forma muy similar a los "Tema de color" se administran los "Temas de ícono de archivo".

Para hacer que aparezca el cuadro de selección de "Tema de ícono de archivo" lo podemos
hacer de dos formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

2. También podemos acceder desde el menú de barra seleccionando (Archivo ->

Preferencias -> Tema de ícono de archivo):
Cuando se abre el panel con los "Temas de ícono de archivo" mediante las teclas de flechas o
el mouse podemos ir seleccionando cada uno y ver como se actualiza en tiempo real la interfaz
de VSCode:

Igual que los temas de color, la comunidad ha desarrollado "Temas de ícono de archivo" que
podemos instalar dando los mismos pasos visto anteriormente.

A medida que seleccionamos un "Tema de ícono de archivo" podemos ver en una pestaña
quién es el creador, la cantidad de descargar, sus características etc.:
 4.3. Tema de ícono del producto

En forma similar a los "Tema de color" e "Iconos de archivos" se administran los "Temas de
ícono del producto".

Para hacer que aparezca el cuadro de selección de "Tema de ícono del producto" lo podemos
hacer de dos formas:

1. Desde el ícono de la rueda dentada que aparece en la parte inferior izquierda:

2. También podemos acceder desde el menú de barra seleccionando (Archivo ->

Preferencias -> Tema del ícono del producto):
Podemos seleccionar alguno desarrollado por la comunidad y ver inmediatamente los cambios
del producto:
 5 - Explorador
El ícono de "Explorador" se encuentra en la "Barra de actividades" del lado izquierdo por
defecto. Ya hemos trabajado con el explorador cuando abrimos una carpeta o un área de
trabajo.

Cuando se lo presiona al ícono aparece el "Explorador" y si volvemos a presionar se oculta.

Cuando no hay ninguna carpeta o área de trabajo abierta el "Explorador" nos invita a "Abrir
carpeta" o "Clonar repositorio":

El explorador también lo podemos mostrar u ocultar presionando el ícono ubicado en la barra

de títulos:
Cuando tenemos abierta una carpeta o área de trabajo podemos desde el mismo explorador
crear archivos, carpetas, actualizar y contraer carpetas (los íconos de estas actividades solo son
visibles cuando la flecha del mouse se encuentra en la ventana del Explorador):

El "Explorador" tiene un menú que nos permite configurar que pestañas debe mostrar:

Ahora en el mismo "Explorador" en la parte superior se muestran todos los archivos que se
encuentran abiertos:
Podemos esconder esta pestaña nuevamente seleccionando la opción "editores abiertos".

En la parte inferior se muestra un esquema del contenido del archivo que se encuentra abierto
(depende del tipo de archivo que se muestra HTML, CSS, JavaScript, C# etc.):

Las teclas de acceso rápido para mostrar el "Explorador" ( Ctrl + Shift + E):

explorador vscode
Para abrir un archivo en el área de edición hacemos clic sobre el nombre en el "Explorador" y
con doble clic se abre una nueva pestaña(editor)

En algunas situaciones si necesitamos tener un mismo archivo abierto en forma simultanea

debemos presionar el ícono con un símbolo de dividir de la equina superior derecha:
Luego de dividir tenemos dos ventanas de edición paralelas (tiene sentido si tenemos archivos
muy grandes y tenemos que comparar contenidos que se encuentran en líneas muy distantes

entre si):

Podemos abrir archivos distintos en forma paralela arrastrando el segundo archivo a un lado
o a otro del archivo abierto actualmente:

Luego de este proceso tenemos abiertos en simultáneo los dos archivos.

Podemos abrir en forma simultánea muchos archivos en VSCode:
Podemos tener más de un archivo en una de las ventanas de edición:

El atajo para cambiar entre las distintas ventanas de edición es (Ctrl + 1) o (Ctrl + 2) o (Ctrl +
3)

Podemos en VS Code abrir ventanas de edición en forma vertical:

Luego tenemos como resultado:

Podemos tener varias ventanas en forma horizontal y vertical:

 6 - Buscar en carpetas o áreas de trabajo
6.1. Buscar.
La actividad de buscar es muy importante cuando estamos trabajando en un proyecto, luego
VSCode le reservó un ícono en la "Barra de actividades":

Las teclas de atajo para mostrar la ventana de búsquedas son Ctrl-Shift-F.

El diálogo de búsqueda tiene tres íconos que nos permiten hacer:

 Coincidir mayúsculas y minúsculas.
 Solo palabras completas.
 Usar expresiones regulares.
Cuando se confirma la búsqueda se muestra todas las líneas de los diferentes archivos de la
carpeta o área de trabajo que coinciden:

Si tenemos el siguiente archivo dentro de nuestra carpeta abierta en VSCode:

<!DOCTYPE html>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
</head>
<body style="background:rgb(32, 32, 199)">
<h1>Actividades en el día.</h1>
<h1>Actividades en el mediodía.</h1>
</body>
</html>

Luego buscamos la cadena 'día' tenemos como resultado:

Ahora seleccionemos el ícono de "Solo palabra completa" y el resultado cambia por:

6.2. Buscar y remplazar.

Si necesitamos remplazar las búsquedas podemos presionar el ícono del lado de la izquierda
y nos mostrará un cuadro para indicar por qué valor remplazar:
Luego podemos indicar la cadena de remplazo y efectuar dicha actividad:

La actividad de remplazo se efectúa cuando presionamos el ícono que aparece

inmediatamente después de la cadena de remplazo o mediante las teclas de atajos: Ctrl + Alt
+ Enter)

6.3. Excluir e incluir carpetas y archivos en las búsquedas.

Hay otro ícono en el diálogo de búsqueda que nos permite filtrar en que archivos y carpetas
buscar o excluirlos:
Podemos por ejemplo excluir la búsqueda en los archivos 'js':

Si desactivamos la exclusión de los archivos js:

Podemos hacer búsquedas en archivos que cumplan que tienen una determinada extensión:

Si tenemos que definir varias reglas de búsqueda debemos separarlas por una coma:

Si queremos que las búsquedas solo incluyan los editores abiertos disponemos un botón de
estado a la derecha:
 6.4. Exclusiones definidas en la configuración.

Por defecto VSCode tiene una serie de carpetas que se excluyen en su búsqueda, podemos
acceder a ellos desde "Configuración":

En muchas herramientas web como Angular, Vue, React, NodeJS etc. requieren una serie de
librerías que se localizan en la carpeta node_modules y que cada vez que hacemos una
búsqueda no tiene sentido procesar los miles de archivos que contiene ésta carpeta.
 7 - Buscar en un único archivo
Vimos en el concepto anterior como buscar y eventualmente remplazar datos en todos los
archivos de una carpeta o área de trabajo.

Cuando el proceso de búsqueda lo queremos limitar solo a la pestaña(editor) seleccionada

podemos hacerlo mediante las teclas de atajo (Ctrl + F) o desde el menú de barra (Editar ->
Buscar):

Se nos muestra un diálogo en la parte superior de la pestaña con una interfaz similar a las
búsquedas globales:

Luego de la búsqueda disponemos de dos botones que nos permiten desplazarnos en cada
una de las coincidencias que aparecen dentro del archivo:

Podemos presionar el botón que aparece a la izquierda de la búsqueda para permitir ingresar
un valor de remplazo para las búsquedas que coinciden:
Luego podemos remplazar cada coincidencia una a una mediante el botón:

Para un remplazo automático de todas las coincidencias tenemos el otro botón:

Hay una opción para poder conservar mayúsculas/minúsculas cuando hace el remplazo:

7.1. Búsquedas en un bloque

Podemos hacer búsquedas solo en un bloque de líneas seleccionadas, para esto debemos
primero seleccionar un conjunto de líneas y seguidamente activar el ícono:

7.2. Opciones de buscar en Visual Studio Code.

Todas las opciones de búsqueda que vimos en el concepto anterior y éste se pueden acceder
desde "Editar".

Si queremos buscar y remplazar en la pestaña activa tenemos las opciones:

 Buscar
 Remplazar
Si queremos buscar y remplazar en una carpeta o área de trabajo tenemos:
 Buscar en archivos
 Remplazar en archivos
 8 - IntelliSense
El concepto de IntelliSense en Visual Studio Code se lo asocia a un conjunto de funcionalidades
de edición de código que incluyen por ejemplo: sugerencia de métodos y propiedades de un
objeto, información de parámetros y sus tipos etc.

Visual Studio Code trae esta funcionalidad por defecto para los lenguajes JavaScript,
TypeScript, CSS, HTML JSON, Less y Sass. Luego veremos que existen muchas "extensiones"
que pueden agregar la funcionalidad de IntelliSense a lenguajes tan disímiles como Python,
Java, C#, Go, SQL etc.

Para probar su funcionamiento crearemos un archivo JavaScript llamado '[Link]':

function fijarHora() {
const fecha = new Date();
let cadena = [Link]() + ':' + [Link]() + ':' + [Link]
nds();

[Link]('hora').innerText = cadena;
}

[Link](
'load',
setInterval(() => fijarHora(), 1000),
false);

Luego de crear un objeto de una determinada clase cada vez que disponemos un punto luego
del nombre del objeto se activa IntelliSense para sugerirnos valores permitidos:
En este ejemplo a medida que escribimos el método que necesitamos llamar veremos que las
opciones se van filtrando:

Si se nos cierra el cuadro de sugerencias por ejemplo al cambiar de ventana o cualquier otro

motivo:

Podemos activarlo fácilmente por medio del atajo de teclado (Ctrl + Espacio):

Lo mismo sucede que se activa "IntelliSense" cuando comenzamos a escribir los parámetros
de un método o función:

Nos informa la cantidad y tipo de parámetros, así como una descripción del mismo.
Si necesitamos una información ampliada de cada propiedad o método que se sugiere
debemos presionar las teclas (Ctrl + Espacio) estando activas las sugerencias y veremos que

aparece una segunda ventana con la explicación del método o propiedad, si mediante las
teclas de flechas nos desplazamos entre los métodos podremos ir consultando cada definición,
para ocultarla debemos presionar nuevamente (Ctrl + Espacio):

También podemos activar la explicación extendida presionando el ícono de color azul:

8.1. Iconos
Cuando aparece el cuadro de sugerencias de "IntelliSense", del lado izquierdo se muestran
una serie de íconos que tienen un determinado significado:

8.2. Detección de errores

Cuando introducimos errores en nuestro código, VSCode nos sugiere posibles correcciones.
Probemos de ingresar un objeto literal sin separar sus propiedades por coma:

let actual = {
dia: 1
mes: 5
año: 2018
}

Luego veremos que aparece subrayado en rojo el atributo mes. Si disponemos la flecha del
mouse sobre el identificador nos sugerirá una posible corrección:
Una vez que efectuamos las correcciones desaparecen los subrayados rojos:

8.3. Sugerencias según el tipo de archivo.

IntelliSense actúa según el tipo de archivo que estamos trabajando, por ejemplo si editamos
un archivo CSS las sugerencias serán adecuadas para este formato:

Es importan el mensaje que nos muestra VSCode en la parte inferior derecha, aquí nos informa
el formato de archivo que estamos trabajando.
Es común que a veces creamos un archivo (Ctrl + N) y no le asignemos un nombre al principio,
en estos casos VSCode no puede inferir el formato de datos que cargamos y no aparecerá
activo IntelliSense:

En la parte inferior aparece un mensaje de "Texto sin formato". Podemos cambiar este valor
por el formato de nuestro archivo, en ese momento ya tendremos activo algunas
funcionalidades de IntelliSense, de todos modos para la activación completa debemos
grabarlo en disco.
 9 - Terminal integrado en VSCode
VSCode ha incorporado la posibilidad de mostrar una terminal de comandos del sistema
operativo donde se ejecuta.

Para activar la terminal podemos hacerlo mediante el atajo de teclado (Ctrl+` ), o también con
el menú de opciones o el ícono de la barra de título:

La consola normalmente se muestra en la parte inferior de pantalla dentro del editor VSCode:
 9.1. Ejemplo de uso.

Vamos a instalar NodeJS para hacer unas pruebas como podemos ejecutar las aplicaciones
codificadas con esta herramienta.

El primer paso será descargar e instalar NodeJS, si tiene alguna duda puede consultar el tutorial
[Link] Ya. - El objetivo no es estudiar NodeJS sino ver como podemos interactuar con el mismo
desde VSCode: codificar los programas y ejecutarlos desde el mismo entorno. - Una vez instalado
NodeJS procederemos a codificar un programa mínimo (creamos el archivo '[Link]'):

[Link]('Mi primer programa con [Link]');

[Link]('Fin');

Ahora desde la terminal podemos ejecutar nuestra primera aplicación en [Link]:

En [Link] cuando utilizamos el método log del objeto Console los datos se muestran en la
misma terminal:

Desarrollaremos una segunda aplicación [Link] que cree un servidor web ('[Link]'):
 const http=require('http');

const servidor=[Link]((pedido,respuesta) => {

[Link](200, {'Content-Type': 'text/html'});
[Link](`<!doctype html><html><head></head>
<body><h1>Sitio en desarrollo</h1></body></html>`);
[Link]();
});

[Link](8888);

[Link]('Servidor web iniciado');

Ahora podemos lanzar la aplicación desde la terminal:

El servidor web creado con [Link] está en ejecución y esperando peticiones en el puerto
8888, ahora solo nos queda desde el navegador hacer la petición a dicho servidor:

Hemos visto el uso de la terminal aplicada a [Link] pero existen muchos otros lenguajes que
podemos ejecutarlos y/o compilarlos desde la terminal: Python, Java, Ruby, Go etc.
En conceptos futuros veremos otros entornos que requieren la consola integrada de VSCode.
 10 - Depuración de programas
Otra área fundamental que VSCode nos trae dentro del editor es la depuración de código.

Recordemos que depurar es el proceso que hacemos a nuestros programas para identificar
errores que hay en los mismos.

Dentro de la "Barra de actividades" de VSCode podemos identificar el ícono que nos abre el
diálogo de depuración:

Cada ambiente de trabajo tiene sus propias herramientas de depuración: [Link], Python, C#
etc.

10.1. Prueba de depuración con [Link]

Crearemos un pequeño proyecto con dos archivos y algunos errores en su interior para
posteriormente depurarlos.

En una carpeta crearemos dos archivos que ejecutaremos luego desde el ambiente de [Link].

[Link]
const PI = 2.14;

function sumar(x1, x2) {

return x1 - x2;
}
 function restar(x1, x2) {
return x1 - x2;
}

function dividir(x1, x2) {

if (x2 == 0) {
mostrarErrorDivision();
}
else {
return x1 / x2;
}
}

function mostrarErrorDivision() {
[Link]('No se puede dividir por cero');
}

[Link] = sumar;
[Link] = restar;
[Link] = dividir;
[Link] = PI;

[Link]
const mat=require('./matematica');

let s = [Link](2, 2);

let r = [Link](4, 1);
let d = [Link](6, 3);

[Link]('La suma de 2+2=' + s);

[Link]('La resta de 4-1=' + r);
[Link]('La división de 6/3=' + d);
[Link]('El valor de PI=' + [Link]);

Abrimos el archivo '[Link]' y presionamos el botón de 'Ejecutar y depurar', se nos muestra

que podemos ejecutarlo con Node:
Podemos ver la consola y comprobaremos que algunos resultados son incorrectos (la suma y
el valor de PI):

En la pestaña donde se llama a la función 'sumar' dispondremos un punto de ruptura. Esto se

logra disponiendo la flecha del mouse a la izquierda del comando:

Procederemos ahora a abrir la opción de "Depurar" ( Ctrl + Shift + D o el ícono de la barra de

actividades) e iniciamos la depuración:
El programa empieza a ejecutarse y se detiene en la línea donde dispusimos el punto de
ruptura (break point):

Como vemos aparece una barra de botones que nos permite:

 Continuar (F5) (el triángulo azul)

 Depurar paso a paso por procedimiento (F10)
  Depurar paso a paso por instrucciones (F11)
 Salir de depuración (Shift + F11)
 Reiniciar (Ctrl + Shift + F5)
 Detener (Shift+F5)
En nuestro problema elegiremos "Depurar paso a paso por instrucciones" para analizar el
algoritmo de la función sumar:

Disponiendo la flecha del mouse sobre el nombre de una variable o parámetro se nos muestra
su contenido. Podemos identificar luego que la lógica de la función sumar es incorrecta:

return x1 - x2;

Cuando debería ser:

return x1 + x2;

Reiniciar la depuración y probemos ahora de ejecutar "Depurar paso a paso por

procedimiento", veremos ahora que la función sumar se ejecuta en forma completa pero sin
entrar y ejecutarla paso a paso sus instrucciones:
 10.2. Acceso a las opciones de depuración desde el menú de
barra.

Todas las opciones que hemos visto hasta ahora las podemos acceder también desde la opción
de menú de barra "Ejecutar":
 11 - Extensiones
Una de las opciones fundamentales del editor de texto VSCode es la posibilidad de agregar
características mediante las "extensiones". Algo ya hemos trabajado con esto cuando
agregamos extensiones sobre "Temas de color" y "Temas de íconos de archivo".

Existen miles de "extensiones" con objetivos tan diversos como:

 Lenguajes de programación
 Depuradores
 Formateadores de código fuente
 Temas
 Teclas de acceso rápido de otros editores

Para consultar la tienda de extensiones para VSCode podemos visitar

[Link]/vscode. La popularidad de las extensiones la podemos
comprobar cuando vemos la cantidad de descargas de las mismas (la extensión de Python
tiene más de 59 millones de descargas):

11.1. Instalación de una "Extensión"

Para conocer los pasos para la instalación de una extensión instalaremos la de Python, para
eso primero descargaremos el lenguaje Pythhon 3.x del sitio [Link]

Una vez que hayamos instalado el lenguaje Python procederemos a instalar la extensión de
Python en VSCode. Desde la "Barra de actividades" a través del ícono, comenzamos a escribir
'Pyth' y aparecen las extensiones:

extensiones VSCode
Cuando seleccionamos una extensión se nos muestra una pestaña con toda la información de
dicha extensión:

Procederemos a su instalación presionando el botón "instalar" que aparece dentro de la

pestaña de la extensión:
El VSCode dependiendo del ambiente de trabajo nos puede mostrar notificaciones que nos
informan de configuraciones necesarias u otras extensiones a instalar (las notificaciones
aparecen en la parte inferior derecha)

Ya tenemos todo listo para probar nuestro primer programa en Python, procedemos a crear
un archivo '[Link]' y codificar:

lado=input("Ingrese la medida del lado del cuadrado:")

lado=int(lado)
superficie=lado*lado
print("La superficie del cuadrado es")
print(superficie)

Podemos ahora abrir la opción de depurar y proceder a ejecutar nuestra aplicación en Python
(la misma acción se puede lograr con el triángulo de la derecha):
En la consola procedemos a ingresar el lado del cuadrado y obtener el resultado de nuestro
programa de Python:

El objetivo no es aprender Python sino entender los pasos de instalación de una "Extensión",
si desea estudiar Python puede visitar el tutorial de Python YA

11.2. Problema

Buscar la extensión "Code Runner" y proceder a su instalación. Verificar luego la ejecución de

2 líneas de un programa codificado en Python (Debemos seleccionar con el mouse 2 líneas del
programa, luego presionar el botón derecho del mouse y seleccionar la opción "run code"):
Cuando no utilizamos una extensión es conveniente deshabilitar para que VSCode cargue más
rápido, para esto seleccionamos el ícono de extensiones y procedemos a deshabilitarla:

Podemos tener distintas áreas de trabajo con ciertas extensiones habilitadas.

Si no vamos a utilizar más una "Extensión" podemos proceder a su desinstalación.

 12 - Escritura de HTML y CSS con Emmet
Emmet es un complemento que ya viene integrado en VSCode que nos aumentó nuestra
velocidad cuando tenemos que codificar páginas HTML y CSS.

Consiste en disponer ciertos caracteres y que el editor VSCode nos sugiera una cadena que
sustituya dichos caracteres. Veamos con un ejemplo como funciona, creemos un archivo vacío
llamado '[Link]' y dentro del editor escribamos el caracter '!':

Luego si presionamos la tecla "Enter" se sustituye el caracter '!' por el código:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

También luego de dar "Enter" quedan ciertas partes del bloque generado con otro color,
mediante la tecla 'Tab' podemos ir avanzando y cambiando los valores propuestos como por
ejemplo el valor para la marca 'title':
Existen innumerables características que propone Emmet, iremos viendo algunas para
entender su filosofía.

12.1. Insertar un ancla a otro sitio web

Dispongamos el caracter 'a' e inmediatamente se nos sugieren distintos valores por los que
podemos sustituir dicho caracter, elijamos el segundo:
Luego de presionar 'Enter' pasemos mediante la tecla 'Tab' a cargar la url del sitio web y el
texto que debe aparecer en la página:

12.2. Insertar una hoja de estilo

Creemos primero en nuestro proyecto una carpeta llamada 'css' y dentro de ella un archivo
llamado '[Link]'. Simplemente disponiendo en la página HTML la marca 'link' aparece la
sugerencia de 'Emmet' para generar toda la etiqueta:

Luego cuando tenemos que disponer el 'path' o camino donde se encuentra el archivo 'css' el
mismo VSCode nos propone el nombre de la carpeta y seguidamente la selección del archivo
de dicha carpeta:
 12.3. Insertar un archivo JavaScript

Creemos primero en nuestro proyecto una carpeta llamada 'js' y dentro de ella un archivo
llamado '[Link]'.

De forma similar escribamos la etiqueta 'script' y dejemos que Emmet nos sugiera por cual
cadena remplazarlo:

Luego solo nos queda ingresar la dirección del archivo JavaScript:

 12.4. Insertar un comentario HTML

Simplemente presionamos la letra 'c' y Emmet aparece para que seleccionemos comentario:

12.5. Insertar un formulario

Ingresemos la etiqueta 'form' y seleccionemos la generación para el envío mediante el método

'post':

Dispongamos ahora un control input de tipo text y otro de tipo password:

Finalmente dispongamos un botón de tipo 'submit':

12.6. Otras etiquetas HTML

Todas las etiquetas de HTML pueden ser generadas por Emmet, recordemos que debemos
disponer directamente el nombre de la etiqueta y no anteceder el caracter '<'

El sitio oficial de Emmet dispone de un recordatorio de todas las etiquetas HTML y los valores
con los que se sustituyen: Sitio oficial

12.7. Archivos CSS

También podemos utilizar Emmet cuando codificamos las hojas de estilo. Si ingresamos el
primer caracter del nombre de la propiedad, luego dos puntos y el primer caracter tenemos:

Luego se termina completando con:

Si la propiedad tiene varios valores luego se pueden ir cargando dichos valores y presionar la
tecla 'Tab' para pasar a la carga del siguiente valor:

Luego de confirmar cargamos los valores:

Finalmente, luego de remplazar los valores faltantes tenemos:
 13 - Emmet con expresiones compuestas
Esta es otra característica fundamental de Emmet por la cual nos reduce el tiempo de creación
de una página HTML evitando que escribamos ciertas partes repetitivas. Con un ejemplo debe
quedar más claro:

Una vez que confirmamos la cadena: 'div#contenedor>div#cabecera>li*5>a' se genera el

código:
Vamos a ver algunas de las reglas de Emmet del porqué se genera éste código.

13.1. Elementos hijos (>)

Utilizamos el caracter '>' para indicar el elemento padre y el elemento hijo:

table>tr>td

Con esto indicamos que la etiqueta 'table' tiene una etiqueta hija de tipo 'tr' y esta a su vez
tiene su etiqueta hija de tipo 'td'.

A medida que codificamos con Emmet en VSCode podemos ver como va a quedar el código
HTML cuando se procese la expresión:

Cuando presionamos 'Enter' se confirma la expresión Emmet y se la sustituye por el valor

respectivo:
Si en algún momento se cierra el diálogo Emmet debemos presionar las teclas 'Ctrl + Espacio'
estando el cursor al final de la expresión:

13.2. Multiplicación de elementos (*)

Es muy común en HTML tener que disponer un conjunto de etiquetas del mismo tipo como
podrían ser 'li' dentro de una lista o 'td' dentro de 'tr'.

Veamos como generar una tabla HTML de 3 filas y 6 columnas:

Resulta muy natural la expresión Emmet para generar la tabla de 3 filas y 6 columnas:

table>tr*3>td*6
Luego de confirmarla el cursor se dispondrá en cada una de las celdas de la tabla para que
carguemos un valor. Debemos presionar la tecla 'Tab' para pasar a la siguiente posición a
cargar:

13.3. Elementos hermanos (+)

Utilizamos el caracter '+' para crear etiquetas que se encuentran en el mismo nivel. Veamos
un ejemplo de crear un título de nivel 1, luego un título de nivel 2, 5 párrafos, otro título de
nivel 2 y finalmente 3 párrafos más:

h1+h2+p*5+h2+p*3

Luego de confirmado se expande en:

<h1></h1>
<h2></h2>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<h2></h2>
<p></p>
<p></p>
<p></p>
Todos los elementos son hermanos ya que se encuentran a la misma altura.

13.4. Definición de 'id' y 'class'

Luego del tipo de elemento podemos definir el nombre de su 'id' y/o 'class' antecediendo los
caracteres '#' o '.'

Veamos con un ejemplo:

Se genera un div con la definición del atributo 'id' con el valor 'contenedor' y su atributo class
con el valor 'general'.

Luego tiene dos div hijos que son hermanos y definen sus respectivos 'id'.

El código generado para esta expresión Emmet es:

<div id="contenedor" class="general">

<div id="cabecera"></div>
<div id="cuerpo"></div>
</div>

13.5. Numeración de elementos ($)

Mediante el caracter '$' podemos generar valores enteros consecutivos cuando empleamos el
'*'.
Supongamos que necesitemos crear una tabla de 10 filas y los id de cada fila deben llamarse:
fila1, fila2, fila3 etc., lo resolvemos con la siguiente sintaxis de Emmet:

Si necesitamos que los elementos se numeren de mayor a menor utilizamos la sintaxis ( @- )

después del caracter '$':

table>tr#fila$@-*5>tr*2

Tenemos como resultado:

13.6. Disponer texto en la expresión {}

Debemos encerrar entre llaves para generar dicho texto en la expresión Emmet:
Dentro de un texto podemos emplear el caracter '$' para numerar:

13.7. Disponer atributos personalizados []

Podemos disponer en la expresión Emmet atributos que por defecto no se definen, para eso
debemos encerrar entre corchetes el atributo:

13.8. Agrupar parte de una expresión con paréntesis

Podemos encerrar entre paréntesis ciertas partes de la expresión para tener un determinado
resultado:

El resultado es muy distinto si no lo agrupamos con paréntesis:

 14 - Atajos de teclado: edición de código
Cuando estamos editando un programa tenemos frecuentemente que borrar líneas, copiar
bloques, modificar nombres de variables etc. Estas actividades si bien muchas se pueden hacer
desde opciones disponibles en el menú de barra lo más conveniente y rápido es hacerlas
mediante distintas combinaciones de teclas.

1. Borrar la línea donde se encuentra el cursor: Ctrl + X

2. Copiar la línea donde se encuentra el cursor al portapapeles: Ctrl + C
3. Copiar en el editor los datos almacenados en el portapapeles: Ctrl + V

Las tres primeras opciones las ubicamos en el menú de barra en:

4. Mover la línea donde se encuentra el cursor hacia abajo: Alt + flecha abajo
Si tenemos el cursor en el primer párrafo:
Luego presionamos tres veces: Alt + flecha abajo. Tenemos como resultado la línea donde se
encuentra el cursor desplazada tres filas hacia abajo:

5. Para desplazar la línea donde se encuentra el cursor hacia arriba debemos utilizar las
teclas: Alt + flecha arriba
6. Para copiar la línea actual en la línea siguiente disponemos del atajo de teclado: Shift
+ Alt + flecha abajo
Si tenemos el cursor en la línea de la etiqueta h1:

Luego presionamos tres veces los atajos de teclas Shift + Alt + Flecha abajo. Tenemos
como resultado que la línea donde se encontraba el cursor se ha copiado tres veces:

7. De modo similar para copiar la línea donde se encuentra el cursor hacia arriba
debemos utilizar las teclas: Shift + Alt + flecha arriba.
8. Para insertar una línea abajo de donde se encuentra el cursor (no importa en qué parte
de la línea actual se encuentra el cursor) debemos seleccionar: Ctrl + Enter
 Si tenemos el cursor en medio del tercer párrafo:

Luego presionamos las teclas Ctrl + Enter. Tenemos como resultado que se ha
agregado una línea abajo y se ha desplazado el cursor a dicha línea:

9. De modo equivalente si queremos insertar una línea arriba de donde se encuentra el

cursor y desplazar el cursor a dicha línea tenemos el atajo de teclado: Shift + Ctrl +
Enter.
10. Para deshacer la última actividad desarrollada en el editor contamos con el atajo: Ctrl
+ Z.

Si escribimos 4 palabras en un párrafo:

 Luego presionamos las teclas Ctrl + Z tres veces, tenemos como resultado que se han
borrado las últimas tres palabras ingresadas (cualquier programa actual cuenta con la
función de deshacer los últimos cambios efectuados):

11. La funcionalidad inversa de "deshacer" es "rehacer", esto se logra mediante el atajo de

teclado: Ctrl + Y. Las funcionalidades de "deshacer" y "rehacer" son muy importantes
y se encuentran en el menú de barra:

12. Para desplazar el cursor al principio de la línea disponemos la tecla "Inicio"

13. Para desplazar el cursor al final de la línea disponemos la tecla "Fin"
14. Para desplazar el cursor al principio del archivo debemos presionar Ctrl + Inicio
15. Para desplazar el cursor al final del archivo disponemos las teclas Ctrl + "Fin":
16. Desplazar el cursor hacia abajo una página completa: Avpág
17. Desplazar el cursor hacia arriba una página completa: Repág
18. Hacer escroll hacia abajo sin desplazar el cursor: Alt+Avpág
19. Hacer escroll hacia arriba sin desplazar el cursor: Alt+Repág
20. Para encerrar como comentario la línea donde se encuentra el cursos tenemos el atajo
de teclado: Ctrl + /

Si tenemos seleccionado un bloque de líneas se comentan todas.

VS Code detecta el lenguaje y agrega los caracteres válidos según corresponda (HTML,
JavaScript etc.):

Para quitar los comentarios hacemos uso del mismo juego de teclas.
21. También podemos disponer o quitar comentarios de bloque a un conjunto de líneas
seleccionadas mediante el atajo de teclas: Shift + Alt + A

Luego se generan los caracteres de bloque de comentarios:

Usamos el mismo juego de teclas si queremos quitar los comentarios a un bloque de

código seleccionado. Las opciones de comentar una línea o un bloque de líneas
pueden ser accedidas mediante el menú de barra:
 15 - Atajos de teclado: expansión y
contracción de código
El editor VS Code permite mostrar en forma completa o parcial el código. Mediante el mouse
podemos hacer la contracción de código fuente presionando el botón '-' que aparece a la
izquierda de ciertas líneas:

Cuando se lo contrae tenemos una vista más

resumida (aparece el símbolo '+' en el caso que se
pueda expandir):
Esta funcionalidad está definida para distintos lenguajes como puede ser JavaScript, HTML,
CSS:

Disponemos de atajos de teclas para:

1. Contraer todos los bloques mediante las teclas (Ctrl + K, Ctrl + 0[cero]).
Luego de ejecutar este comando tenemos como resultado todo el código

fuente:
2. Expandir todos los bloques mediante las teclas (Ctrl + K, Ctrl + J)
3. Según donde se encuentre el cursos podemos contraer el bloque donde se
encuentra inserto mediante las teclas (Ctrl+K, Ctrl+[)
4. Según donde se encuentre el cursor podemos expandir el bloque mediante
las teclas Ctrl+K, Ctrl+]
 16 - Atajos de teclado: disponer múltiples
cursores
Otra de las características que provee VS Code es la posibilidad de definir múltiples cursores
para agregar o modificar datos en forma simultánea.

1. Si tenemos la siguiente función:

function sumar(v1, v2) {

return v1 + v2;
}

Queremos cambiar los nombres de parámetros por 'valor1' y 'valor2' podemos

disponer un cursor al lado de cada caracter 'v', para esto debemos tener presionada
la tecla 'Alt' y presionar el botón derecho del mouse en el espacio siguiente al caracter

'v':
Luego de agregar la cadena 'alor' podemos desactivar los múltiples cursores
presionando la tecla 'Esc':

2. Si necesitamos agregar datos en una misma columna podemos tener presionado la

tecla 'Alt' y luego teniendo presionado el botón central del mouse avanzar por cada
una de las filas donde disponer cursores.

Por ejemplo, si tenemos 6 párrafos y queremos agregar una clase a cada uno de ellos:
 <p>párrafo 1</p>
<p>párrafo 2</p>
<p>párrafo 3</p>
<p>párrafo 4</p>
<p>párrafo 5</p>
<p>párrafo 6</p>

Debemos presionar en forma simultanea la tecla 'Alt', el botón central del mouse y
desplazarnos por ejemplo de arriba hacia abajo en la columna de la marca 'p':

Seguidamente una vez que los cursores están activos procedemos a efectuar el ingreso
de la clase y presionar luego 'Esc' para eliminar los cursores múltiples:

Esta misma funcionalidad la podemos obtener mediante el atajo de teclado

(Ctrl+Mayús+Alt+flecha arriba o abajo):
Si van a ser más de una página los cursores a disponer podemos utilizar los atajos de
teclado (Ctrl+Mayús+Alt+página arriba o página abajo):

3. Podemos disponer un cursor en todas las palabras que coinciden donde se encuentra
actualmente el cursor mediante el atajo de teclas Ctrl + F2:

Por ejemplo, si el cursor se encuentra posicionado en el parámetro 'x1', luego de

presionar 'Ctrl + F2' aparecen los siguientes cursores:
 Todas las palabras aparecen seleccionadas con un cursor al final. Si ingresamos un
nuevo nombre al parámetro 'x1' se borra. Presionando la tecla flecha a la derecha
podemos hacer que no se borre el valor actual seleccionado.

4. Si tenemos un bloque seleccionado podemos disponer un cursor en todas las

ocurrencias mediante el atajo de teclado (Ctrl + Shift + L):
 Si tenemos seleccionado por ejemplo la cadena '(x1, x2)' y queremos disponer un
cursor al final de cada ocurrencia:

5. Podemos insertar un cursor al final de cada línea de un bloque que se encuentre

actualmente seleccionado mediante el atajo de teclado (Shift + Alt + I)

Por ejemplo si tenemos seleccionado el bloque:

Y presionamos Alt+Shift+I, tenemos como resultado un cursor al final de cada línea

seleccionada:

6. Podemos seleccionar un rectángulo desde donde se encuentra el cursor presionando

las teclas Shift + Alt y arrastrando con el mouse:
 17 - Atajos de teclado: vista general del
editor VS Code
VS Code tiene una gran cantidad de características que afectan como se muestra el editor en
pantalla.

1. Hay una funcionalidad que muestra el contenido de la pestaña seleccionada ocupando

toda la pantalla, evitando con ello cualquier distracción al programador.

Esta forma de presentar el contenido de un archivo se lo llama "modo zen" y se lo

activa con el atajo de teclas (Ctrl + K Z), luego la pantalla del VS Code se transforma

en:

Es una funcionalidad bastante utilizada que inclusive la encontramos en el menú de

barra:

Para regresar a la pantalla normal de VS Code podemos presionar nuevamente el

mismo juego de teclas (Ctrl + K Z) o dos veces la tecla 'Escape'.
2. Mediante el atajo de tecla 'F11' se activa el modo pantalla completo. En este modo no
aparece la barra de título ni la barra de opciones:

Para retornar al modo normal debemos presionar nuevamente la tecla 'F11'.

3. Podemos aumentar o disminuir el 'Zoom' del programa en forma completo (tanto del
editor activo como la barra de actividades') Esta acción la hacemos mediante las teclas:
Ctrl + '+' para aumentar el zoom y Ctrl + '-' para disminuirlo. De igual manera, en el
menú de opciones de VS Code encontramos esta funcionalidad en:

Con el atajo de teclas Ctrl+NumPad0 volvemos al zoom por defecto:

4. Cuando tenemos varios grupos de editores abiertos podemos alternar que se

muestren en forma vertical u horizontal mediante el atajo de teclas (Shift + Alt + 0)

En forma vertical aparecen:

En forma horizontal aparecen:

En el menú de opciones de VS Code encontramos esta funcionalidad en:

5. Para mover la "Barra de actividades" lo debemos hacer desde el menú de barra:

6. Para mostrar u ocultar íconos en la "barra de actividades" debemos presionar el botón

derecho del mouse y seleccionar alguna de sus opciones:

7. Para ocultar o hacer visible la barra lateral tenemos el atajo de teclado: Ctrl + B:

Tener en cuenta que no se ocultan los íconos de la "barra de actividades".

8. La funcionalidad de minimapa se muestra activa por defecto. El minimapa nos permite
movernos por todo el código sin la necesidad de hacer scroll:

Para activar o desactivar el minimapa debemos acceder al menú de barra:

9. Podemos disponer el código de la pestaña activa en forma centrada. Accedemos a

esta funcionalidad desde el menú de barra: Ver -> Apariencia -> Alternar diseño
centrado.
10. Para ocultar la barra de menú debemos acceder mediante la opción Ver-> Apariencia
-> alternar barra de menús. Cuando está oculta la barra de menú podemos activarlo
temporalmente presionando la tecla 'Alt':

11. La barra de estado que aparece en la parte inferior del editor se la puede ocultar
accediendo desde el menú de barra a la opción "Ver -> Apariencia -> Ocultar barra
de estado":
 18 - Fragmentos de código (snippets)
Los fragmentos de código son un bloque de una o más instrucciones que el programador
debe ingresar en forma repetitiva a lo largo de la codificación de un programa. Las estructuras
repetitivas, condicionales, bloques de comentarios etc. son instrucciones que debemos
codificar constantemente en nuestro programa y los "Fragmentos de código" nos automatizan
el ingreso de los mismos.

Los fragmentos de código son particulares de cada lenguaje de programación. Los lenguajes
básicos que soporta VS Code como JavaScript, TypeScript, HTML etc. incorporan fragmentos
de código básicos.

Los fragmentos de código se muestran junto a IntelliSense.

Veamos como insertar un fragmento de código cuando codificamos un programa en

JavaScript, supongamos que tenemos que mostrar los números del 1 al 10 por la consola, en
el momento que disponemos el bloque while se nos muestra la posibilidad de insertar un
"Fragmento de código":

Es decir, se nos propone sustituir:

while

Por el fragmento (snippet):

while (condition) {

Luego de confirmar el fragmento el cursor se posiciona en la condición del 'while' y podemos

codificarla:
Finalmente, luego de disponer la condición presionamos la tecla 'TAB' y procedemos a
codificar el bloque repetitivo:

El fragmento de código nos agiliza la codificación de bloques de programación. Hay muchos

fragmentos configurados por defecto para JavaScript:

18.1. Fragmentos de código según el lenguaje.

Los fragmentos de código que propone IntelliSense dependen del lenguaje que estamos
codificando. Cuando instalamos extensiones de otros lenguajes las mismas incorporan
fragmentos propios.

Si estamos codificando en Python y hemos instalado su extensión luego se nos muestran

fragmentos como por ejemplo:
Si hemos instalado la extensión del lenguaje C# que suministra Microsoft, luego los
fragmentos de código serán:
 19 - Fragmentos de código
personalizados
Vimos en el concepto anterior que VS Code trae una serie de fragmentos de código para los
lenguajes que apoya por defecto (JavaScript, TypeScript, HTML etc.), también hay extensiones
para otros lenguajes como C#, Python etc. con fragmentos de código.

Ahora veremos que podemos crear nuestros propios fragmentos de código para luego
utilizarlos en nuestros proyectos.

Para crear un fragmento de código lo podemos acceder desde la barra de actividades:

O desde el menú de barra de VS Code:

Una vez elegida esta opción debemos seleccionar el lenguaje al cual le agregaremos nuestro
fragmento de código personalizado:

Se abre un archivo llamado '[Link]' donde debemos configurar nuestros fragmentos

(aparece una explicación y un ejemplo):

{
// Place your snippets for javascript here. Each snippet is defined under a snippet nam
e and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be
expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another}
for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "[Link]('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
}

19.1. Fragmento de una sola línea

Crearemos un fragmento que inserte un mensaje de 'Hola mundo' por consola cuando el
operador ingrese en el editor VS Code la palabra 'hola' :

{
// Place your snippets for javascript here. Each snippet is defined under a snippet name an
d has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expa
nded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for
placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
 // "[Link]('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Hola mundo": {
"prefix": "hola",
"body": "[Link]('Hola mundo');",
"description": "muestra un hola mundo por la consola"
}
}

Luego de grabarlo al archivo '[Link]' y comenzar a escribir un programa en 'JavaScript'

al ingresar la palabra 'hola' IntelliSense nos muestra el fragmento de código que hemos
codificado:

Si confirmamos presionando la tecla 'Enter' se remplaza el texto que hemos ingresado por el
valor del snippet:

Si analizamos el archivo '[Link]' hemos definido una propiedad llamada "Hola mundo"
que es un objeto que en su interior define tres propiedades:

- prefix: es el nombre que IntelliSense identificará cuando ingresemos en el editor VS Code.

- body: es el fragmento de código propiamente dicho.
- descripction: es una descripción del objetivo de dicho snippet

19.2. Fragmento de varias líneas

Si el fragmento de código a implementar tiene varias líneas la propiedad "body" deberá definir
un array con los valores de las distintas líneas. Debemos encerrar entre corchetes y separados
por coma cada una de las líneas:

Creemos un fragmento que tenga tres líneas que genere un comentario para recordar revisar
el algoritmo de una función:

{
 // Place your snippets for javascript here. Each snippet is defined under a snippet name an
d has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expa
nded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for
placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "[Link]('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Hola mundo": {
"prefix": "hola",
"body": "[Link](\"Hola mundo\");",
"description": "muestra un hola mundo por la consola"
},

"Comentario función": {
"prefix": "comentario revisar función",
"body":[
"//-----------------------------------------",
"//--------Revisar \"Función\"----------------",
"//-----------------------------------------"
],
"description": "genera un bloque de comentarios para recordar revisar algoritmo de la fun
ción"
}
}

Lo primero que debemos notar es que hemos agregado el fragmento de código al archivo
'[Link]' y hemos dejado el fragmento anterior. En este nuevo fragmento cuando el
operador comience a escribir 'comentario revisar función' Intellisense nos propondrá sustituir
por el valor definido en 'body'. La propiedad 'body' define entre corchetes y separados por
coma cada una de las líneas del fragmento de código:

"body":[
"//-----------------------------------------",
"//--------Revisar \"Función\"----------------",
"//-----------------------------------------"
],

Si en un fragmento de código debemos disponer las comillas dobles debemos anteceder el

caracter \

Cuando escribamos en el editor:

Si confirmamos el fragmento luego se escribe en forma automática:

19.3. Ubicación del cursor dentro del fragmento.

Podemos generar un fragmento que luego de escribirse dentro del editor nos ubique el cursor
en lugares específicos para que el programador los complete y mediante la tecla 'Tab' pase al
siguiente punto de configuración.

Desarrollaremos un fragmento de código que nos permita generar una estructura repetitiva
for donde podamos definir el valor inicial y final del contador del for (borraremos los otros dos
fragmentos de código desarrollados anteriormente para dejar más claro nuestro archivo
'[Link]' sabiendo que en la realidad luego podremos tener múltiples fragmentos):

{
// Place your snippets for javascript here. Each snippet is defined under a snippet name an
d has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expa
nded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for
placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "[Link]('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"for desde hasta": {
"prefix": "for desde hasta",
"body": [
"for(let x = $1; x <= $2; x++) {",
" $0",
"}"
],
 "description": "genera un for con incremento unitario desde un valor inicial hasta uno fi
nal"
}
}

Para indicar la primera posición donde debe aparecer el cursor utilizamos la sintaxis $1, luego
que el programador presiona la tecla 'Tab' el cursor se posiciona en $2 y así sucesivamente.

Con $0 indicamos la posición final donde debe aparecer el cursor.

Para activar este fragmento de código debemos ingresar:

Cuando se presiona la tecla 'Enter' se genera el fragmento y el cursor se posiciona en el lugar

donde dispusimos el símbolo $1:

Luego de ingresar el valor inicial para el contador 'x' presionamos la tecla 'Tab':

Luego de fijar el valor final para el contador presionamos nuevamente la tecla 'Tab' y el cursor
se posiciona finalmente en donde definimos el símbolo $0:
 19.4. Ubicación del cursor con valores por defecto.

Cuando disponemos el cursor dentro del fragmento podemos definir un valor por defecto
para que se muestre, luego es responsabilidad del programador de confirmar dicho valor
presionando la tecla 'Tab' o cambiarlo.

Modifiquemos el fragmento de código para que el 'for desde hasta' por defecto sea del
número 0 al 10:

{
// Place your snippets for javascript here. Each snippet is defined under a snippet name an
d has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expa
nded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for
placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "[Link]('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"for desde hasta": {
"prefix": "for desde hasta",
"body": [
"for(let x = ${1:0}; x <= ${2:10}; x++) {",
" $0",
"}"
],
"description": "genera un for con incremento unitario desde un valor inicial hasta uno fi
nal"
}
}

Debemos encerrar entre llaves la posición del cursor y luego de dos puntos el valor por defecto
a mostrar: ${1:0}

Cuando aceptamos el fragmento de código nos aparecen seleccionados los valores por
defecto:

Si presionamos la tecla 'Tab' en forma sucesiva los valores 0 y 10 quedan confirmados.

 19.5. Aplicación web para generar fragmentos (Snippets) de
código

He desarrollado esta pequeña aplicación en Angular para facilitar la creación de fragmentos

de código. La misma nos permite no tener que generar manualmente la propiedad 'body':
[Link]

Si quiere guardar un enlace directamente a la aplicación de generador de Snippet para VS

Code ingrese aquí
 20 - C# con VSCode
Podemos utilizar el editor VSCode para codificar nuestras aplicaciones en C#, veremos cómo
crear una aplicación de consola.

20.1. Pasos

1. Lo primero que haremos es instalar la extensión C# de OmniSharp, podemos hacer su

búsqueda directamente desde la sección de extensiones de VSCode (la cantidad de
instalaciones nos refleja la popularidad de la misma):

2. Crearemos una carpeta llamada: C:\TutorialVSCode\c# donde alojaremos todos los

archivos del proyecto.

Desde la línea de comandos que abrimos en VSCode procedemos a ejecutar el

siguiente comando:

dotnet new console --framework net6.0

Recordemos primero abrir la carpeta C:\TutorialVSCode\c#, luego mostrar la ventana

de la línea de comandos (fácilmente desde el ícono de la barra de menú):
 Ahora tenemos creado el esqueleto de nuestra aplicación que podemos ver en la
ventana de "explorador":

3. Procedamos a modificar el archivo "[Link]", crearemos la aplicación elemental y

famosa de Fizz Buzz:

for(var x=1;x<=100;x++) {
if (x%3==0 && x%5==0)
[Link]("Fizz Buzz");
else
 if (x%3==0)
[Link]("Fizz");
else
if (x%5==0)
[Link]("Buzz");
else
[Link](x);
}

4. Para ejecutar la aplicación debemos escribir lo siguiente desde la línea de comandos:

dotnet run

Luego en la misma consola obtenemos la salida de datos de la ejecución de la

aplicación:
 Si nuestro código tiene algún error sintáctico, en la consola se mostrará el mismo y
podemos hacer doble clic para pasar a la línea del editor donde se ubica dicho error:

Tener en cuenta que en versiones más antiguas de .NET (menores a la 6), las
aplicaciones de consola requieren obligatoriamente implementar una clase y el
método Main donde codificamos nuestro algoritmo:

namespace Proyecto1
{
class Programa
{
static void Main(string[] args)
{
for(var x=1;x<=100;x++) {
if (x%3==0 && x%5==0)
[Link]("Fizz Buzz");
else
if (x%3==0)
[Link]("Fizz");
else
if (x%5==0)
[Link]("Buzz");
else
[Link](x);
}
}
}
}

Si tenemos que implementar aplicaciones de consola, aplicaciones backend, como editor de

texto para Unity etc. VSCode es una gran herramienta, pero si tenemos que implementar
aplicaciones Windows Forms o WPF será más conveniente utilizar el entorno de Visual Studio.
 21 - Java con VSCode
Otro lenguaje ampliamente utilizado en el desarrollo es Java. Los entornos de desarrollo más
utilizados son Eclipse, NetBeans e IntelliJ, pero perfectamente podemos utilizar el editor
VSCode para trabajar con Java.

21.1. Pasos para su uso

1. Debemos tener instalado el JDK de Java como primera medida, podemos descargarlo
del sitio oficial de Oracle.

2. Ahora pasaremos a instalar la extensión "Extension Pack for Java", podemos hacer su
búsqueda directamente desde la sección de extensiones de VSCode (la cantidad de
instalaciones nos refleja la popularidad de la misma):

3. Crearemos una carpeta llamada: C:\TutorialVSCode\java donde alojaremos nuestra

aplicación en Java.

Procedemos a crear un archivo llamado '[Link]' y codificar el siguiente

programa de consola en el editor de texto:
 public class FizzBuzz {
public static void main(String[] ar) {
for(int x=1;x<=100;x++) {
if (x%3==0 && x%5==0)
[Link]("Fizz Buzz");
else
if (x%3==0)
[Link]("Fizz");
else
if (x%5==0)
[Link]("Buzz");
else
[Link](x);
}
}
}

4. Disponemos de un ícono en forma de triángulo en la parte superior derecha para

compilar y ejecutar la aplicación.
En la consola aparecen los datos de la ejecución de la aplicación:

Si nuestro código tiene algún error sintáctico, en la consola se mostrará el mismo y podemos
hacer doble clic para pasar a la línea del editor donde se ubica dicho error:
 22 Referencia bibliográfica
Tutorial Visual Code Studio.
[Link]

Códigos y referencia EMMET

[Link]