Visual Studio Code es un editor de código que permite ejecutar tareas complejas de forma rápida y sencilla. Soporta muchos lenguajes de programación y dispone de un sistema de instalación de paquetes adicionales que amplían sus características. Permite ver archivos de forma simultánea, buscar texto, aplicar formato automático y cuenta con atajos de teclado para realizar diversas acciones.

1. Visual Studio Code
Prof. Ramiro Estigarribia
Link a la presentación

2. Es un editor de código que permite ejecutar tareas complejas
de forma rápida y sencilla.
Soporta muchos lenguajes de programación y dispone de un
sistema de instalación de paquetes adicionales que amplían
sus características de forma ilimitada.
Visual Studio Code
¿Qué es Visual Studio Code?

3. Es muy útil para tener una visión global del archivo y movernos
con facilidad.
Descargar y abrir con Visual Studio Code:
ejemplo.vscode.html
A la derecha se genera el mini mapa.
Mini Mapa

5. Abajo se indica el número de línea y columna donde estamos.
Ln7 Col1 = Linea 7 Columna 1.
Número de Línea y Columna.

6. Abajo se indican los espacios de tabulación, y el tipo de archivo.
Spaces: 4, HTML. Se pueden cambiar allí mismo.
Tabulación y Tipo de Archivo

7. En la parte de arriba aparece la ruta del archivo:
home > ramiro > Descargas > ejemplo.vscode.html
Ruta del Archivo

8. Para cerrar una pestaña presionar: Control + w
Si queremos restaurar la pestaña que acabamos de cerrar,
debemos presionar: Control + Shift + t
Para movernos entre pestañas abiertas, presionar ALT + 1
(primera pestaña), ALT + 2, ALT + 3, etc.
Cerrar y movernos en pestañas

9. Permite ingresar comandos para interactuar con nuestro código.
Para abrir presionar: Control + Shift + P
Consola de comandos

10. Descargar y abrir con Visual Studio Code: ejemplo2.html
Aplicar formato automatico, abriendo la consola de código:
Control + Shift + P, y luego ingresar format.
Otra forma de hacer es: click derecho sobre cualquier parte
del código y elegir Format Document.
Abrir archivo de Ejemplo.

12. Elegir en el menú la opción: View - Editor Layout - Two Columns.
Luego estirar la pestaña a la columna deseada.
Ver 2 archivos en simultáneo.

13. En archivos grandes es útil ver el mismo archivo en distintas partes.
Abrimos un archivo y luego vamos a: View - Editor Layout - Split Left.
1 solo archivo en 2 columnas

14. Para crear un nuevo proyecto:
Menu File - Add Folder to Workspase (y elegimos la carpeta)
Crear Proyecto.

15. Para buscar en un archivo elegir la opción del Menu Find
( Control + f ). Existen varias opciones de búsqueda.
Buscar en un archivo

16. Presionando Alt y la tecla de dirección a la derecha, se
moverá entre palabras.
Para seleccionar la palabra donde estamos posicionados
presionar Control + D.
Para seleccionar la linea donde estamos posicionados
presionar Control + L
Seleccionar y Moverse entre texto

17. Abrir la Consola de comandos (Control + Shift + P) y luego
escribir: Transform to Uppercase.
Convertir texto a Mayúscula

18. Al escribir una abreviatura pulsa Enter o Tab:
div <div></div>
p <p></p>
a <a href=””></a>
br <br>
h1 <h1></h1>
form <form action=""></form>
! Todo el cuerpo HTML5.
Abreviaturas para HTML5

19. Instalar la extensión: Bootstrap 5 & Font Awesome Snippets
Al escribir una abreviatura pulsa Enter o Tab:
b5 Elegir los componentes principales.
fa Elegir componentes de Font Awesome.
! Todo el cuerpo HTML5, elegir con Bootstrap. (b5)
Abreviaturas para Bootstrap