Si te interesa el desarrollo web y estás buscando herramientas y programas que te ayuden a desarrollar, Visual Studio Code es la herramienta que necesitas. En este post, desarrollaremos un tutorial de Visual Studio Code para principiantes programación.

¿Qué es Visual Studio Code?

VS Code es un editor de código fuente moderno que admite muchas funcionalidades practicas al momento de trabajar con el código. Se caracteriza por ser open source, por lo tanto vas a poder tener acceso gratuito y directo desde su pagina web para descargarlo, así como la oportunidad de compartir tu trabajo en diferentes plataformas de gran impacto como GitHub.

Tutorial de Visual Studio Code

Lo primero que hay que tener en cuenta son las características de los entornos de desarrollo integrado (IDE). Los editores de texto o IDE, están pensados para la creación y modificación de archivos existentes así como también para llevar un control de versiones, acceder a bases de datos, gestionar maquinas de Docker, personalizar temas y fuentes, etcétera. En conclusión, buscan facilitar la vida del programador.

Creación de un archivo

1. Desde el menú de opciones de VSCode seleccionas «Archivo -> Nuevo archivo» (o mediante el atajo Ctrl + N)
2. Ahora en la ventana de edición procedes a codificar un archivo HTML básico.
3. Todavía no aparecen las etiquetas HTML con color ya que no has guardado el archivo en el disco duro donde indicarás con la extensión el tipo de archivo.
4. Para grabar el archivo desde el menú de opciones eliges «Archivo->guardar« (o mediante el atajo Ctrl + S)
5. Ahora seleccionas en el diálogo la carpeta y nombre de archivo que le asignaras:
6. Después de ésta acción el contenido que has escrito en VSCode queda almacenado en el archivo ‘pagina1.html‘ en la unidad C:\TutorialVSCode
7. Si introduces un cambio con el editor VSCode podemos comprobar que en la pestaña de trabajo de la página cambia la cruz por un círculo indicando que debes grabar los cambios introducidos para que se alojen de forma permanente. Para actualizar estos cambios en el archivo debes seleccionar nuevamente la opción «Archivo guardar» o (Ctrl + S).
8. Puedes crear varios archivos y tenerlos abiertos en forma simultánea, cada uno en una pestaña diferente.

Cambio entre pestañas

1. Por medio del mouse puedes seleccionar la pestaña del archivo que necesitas editar, también puedes cambiar entre pestañas mediante las teclas (Alt y las teclas de numéricas)
   (Selecciona la segunda pestaña presionando Alt+2)
2. También puedes cambiar entre pestañas usando las teclas (Ctrl y alguna de las teclas Av Pag. y Rt Pag)
3. Por último, desde el menú de opciones de VSCode puedes cambiar entre pestañas seleccionando alguna de las dos opciones: Ir -> Cambiar editor -> Editor siguiente o la Editor anterior

Graba los archivos modificados

1. Para que puedas probar esta opción, debes introducir algunos cambios en las dos pestañas de los archivos ‘pagina1.html’ y ‘pagina2.html’. Puedes ver en el primer ícono de la izquierda que se presentan dos archivos modificados sin grabar
2. La opción del menú que graba todos los archivos modificados es (Archivo->Guardar todo) o el atajo de teclado (Ctrl + K, luego soltamos las teclas control + K y presionamos finalmente la tecla S)

Cerrar pestañas

Existen tres diferentes formas de cerrar una pestaña en Visual Studio Code:

1. Mediante el mouse puedes presionar la cruz de la pestaña (si no se ha guardado te aparece un diálogo que 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

Abrir archivos

1. Para abrir un archivo almacenado en el disco puedes hacerlo seleccionando desde el menú de opciones: Archivo->Abrir archivo
2. El atajo de teclas para que aparezca el diálogo de apertura de archivo es Ctrl + O.

Crea otro archivo a partir de uno existente

Es normal tener que generar un nuevo archivo desde uno existente. Para esto debes tener seleccionada la pestaña con el archivo y luego desde el menú de opciones seleccionar ‘Archivo -> Guardar como… Y así logras, a partir del archivo ‘pagina2.html’, generar un archivo llamado ‘pagina3.html’ con el mismo contenido. En el diálogo que aparece indicas el nuevo nombre de archivo ‘pagina3.html’

Esta misma acción la podemos hacer mediante las teclas Ctrl + Mayus + S.

Guardado automático

Por último, si quieres desentenderte del guardado de los archivos, puedes activar la opción de «Autoguardado». Para activar esta funcionalidad en Visual Studio Code debes ir a la opción de menú: Archivo -> Autoguardado y dejarla tildada, si la seleccionas nuevamente se va a desactivar la opción.

A partir de ese momento cada cambio que hagas a un archivo se verá reflejado en el disco donde se almacene. De esta manera, ya no necesitas usar la opción ‘Archivo->Guardar’

El Desarrollo Web puede ser intimidamente si estás dando tus primeros pasos. Esperamos que este tutorial de Visual Studio Code para principiantes, te venga fenomenal para empezar tu camino como desarrollador ¿a qué esperas?

¿Cómo aprender más de Visual Studio Code?

Ahora que has dado tus primeros pasos como Web Developer con este tutorial de Visual Studio Code, ¿Quieres seguir formandote? Con nuestro Bootcamp en Desarrollo Web podrás dominar esta y otras herramientas y tecnologías como JavaScript, React, Microservicios y hasta despliegue de servidores en menos de 7 meses. ¡Inscríbete ahora!