Visual Studio Code
Link a la presentación Prof. Ramiro Estigarribia
¿Qué es 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 de forma ilimitada.
Visual Studio Code
Mini Mapa
Es muy útil para tener una visión global del archivo y movernos
con facilidad.
Descargar y abrir con Visual Studio Code:
[Link]
A la derecha se genera el mini mapa.
Número de Línea y Columna.
Abajo se indica el número de línea y columna donde estamos.
Ln7 Col1 = Linea 7 Columna 1.
Tabulación y Tipo de Archivo
Abajo se indican los espacios de tabulación, y el tipo de archivo.
Spaces: 4, HTML. Se pueden cambiar allí mismo.
Ruta del Archivo
En la parte de arriba aparece la ruta del archivo:
home > ramiro > Descargas > [Link]
Cerrar y movernos en pestañas
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.
Consola de comandos
Permite ingresar comandos para interactuar con nuestro código.
Para abrir presionar: Control + Shift + P
Abrir archivo de Ejemplo.
Descargar y abrir con Visual Studio Code: [Link]
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.
Ver 2 archivos en simultáneo.
Elegir en el menú la opción: View - Editor Layout - Two Columns.
Luego estirar la pestaña a la columna deseada.
1 solo archivo en 2 columnas
En archivos grandes es útil ver el mismo archivo en distintas partes.
Abrimos un archivo y luego vamos a: View - Editor Layout - Split Left.
Crear Proyecto.
Para crear un nuevo proyecto:
Menu File - Add Folder to Workspase (y elegimos la carpeta)
Buscar en un archivo
Para buscar en un archivo elegir la opción del Menu Find
( Control + f ). Existen varias opciones de búsqueda.
Seleccionar y Moverse entre texto
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
Convertir texto a Mayúscula
Abrir la Consola de comandos (Control + Shift + P) y luego
escribir: Transform to Uppercase.
Abreviaturas para HTML5
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 Bootstrap
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)