Tutorial de Visual Studio Code para principiantes

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, te mostramos un tutorial de Visual Studio Code para principiantes en programación. Al terminarlo, entenderás cómo empezar a programar en Visual Studio Code y cómo crear un archivo.

¿Qué es Visual Studio Code?

Antes de empezar con el tutorial de Visual Studio Code, veamos qué es. VS Code es un editor de código fuente moderno que admite muchas funcionalidades practicas a la hora 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 página 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 en el tutorial de Visual Studio Code 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 para llevar un control de versiones, acceder a bases de datos, gestionar maquinas de Docker, personalizar temas y fuentes, etc. Como conclusión antes de profundizar en el tutorial de Visual Studio Code, podemos decir que los IDE buscan facilitar la vida del programador.

Creación de un archivo

1. Lo primero que haremos en el tutorial de Visual Studio Code es, desde el menú de opciones de VS Code, seleccionar «Archivo -> Nuevo archivo» (o mediante el atajo Ctrl + N)
2. Ahora, en la ventana de edición, hay que 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 que es.
4. Para grabar el archivo desde el menú de opciones, elige «Archivo->guardar« (también puedes hacerlo mediante el atajo Ctrl + S).
5. Ahora selecciona en el diálogo la carpeta y el nombre de archivo que le asignarás.
6. Después de esta acción en el tutorial de Visual Studio Code, el contenido que has escrito en VS Code queda almacenado en el archivo ‘pagina1.html‘, en la unidad C:\TutorialVSCode.
7. Si introduces un cambio con el editor VS Code, podemos comprobar que en la pestaña de trabajo de la página se cambia la cruz por un círculo. Esto indica 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. Con el ratón puedes seleccionar la pestaña del archivo que necesitas editar. También puedes cambiar entre pestañas mediante las teclas Alt + número (por ejemplo, Alt + 2); cada número suele representar la posición relativa de la pestaña, lo que facilita la navegación rápida sin necesidad de utilizar el ratón.
2. También puedes cambiar entre pestañas usando Ctrl junto con las teclas Av Pag. (avanzar página) y Rt Pag. (retroceder página) en tu teclado. Estas teclas son una forma conveniente de navegar entre las pestañas de archivos abiertos.
3. Por último, desde el menú de opciones de VS Code, puedes cambiar entre pestañas seleccionando alguna de las dos opciones: Ir -> Cambiar editor -> Editor siguiente o Editor anterior.

Graba los archivos modificados

1. Para que puedas probar esta opción en el tutorial de Visual Studio Code, debes introducir algunos cambios en las dos pestañas de los archivos ‘pagina1.html’ y ‘pagina2.html’. Puedes ver en el primer icono 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 ratón 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. Puedes 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 común necesitar crear un nuevo archivo basado en uno existente. Para hacerlo, selecciona la pestaña del archivo y luego ve al menú de opciones, elige Archivo -> Guardar como. De esta manera, puedes crear un nuevo archivo, por ejemplo, ‘pagina3.html’, manteniendo el mismo contenido que el archivo original, ‘pagina2.html’. En el cuadro de diálogo que aparece, especifica el nuevo nombre del archivo, ‘pagina3.html’.

Una forma más rápida de realizar la misma acción es presionar las teclas Ctrl + Mayús + S, lo que también abrirá el cuadro de diálogo para guardar el archivo con un nuevo nombre.

Guardado automático

Para simplificar el proceso de guardar archivos, puedes habilitar la función de «Autoguardado». En Visual Studio Code, puedes activar esta característica y olvidarte de tener que guardar manualmente. Dirígete al menú Archivo -> Autoguardado y marca la opción. Si decides desactivarla en el futuro, simplemente desmarca la casilla.

Una vez activado, cada modificación que realices en un archivo se guardará automáticamente en el disco donde está almacenado. Con esto, ya no será necesario utilizar la opción Archivo -> Guardar cada vez que hagas cambios.

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

Ahora que has dado tus primeros pasos como desarrollador con este tutorial de Visual Studio Code, ¿quieres seguir formándote? Aprende como crear un archivo python en visual studio code, como crear una nueva carpeta en visual studio code y activar autocompletar visual studio code. Con nuestro Desarrollo Web Full Stack Bootcamp podrás dominar esta y otras herramientas y tecnologías de vanguardia, como JavaScript, React, microservicios y hasta despliegue de servidores, en muy pocos meses. ¡Inscríbete ahora y da el paso que transformará tu vida!