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.

Creación de un archivo

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

creación de un archivo con VSCode

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

creación de un archivo con VSCode

Todavía no aparecen las etiquetas HTML coloreadas ya que no hemos guardado 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:

creación y grabación de un archivo con VSCode

Después de ésta acción el contenido que hemos escrito en VSCode queda almacenado en el archivo 'pagina1.html' 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:

archivo con VSCode no grabado

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 simultanea, 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):

creación y grabación archivo con VSCode

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 y la tecla de números):

    selección de pestaña VSCode

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

  3. Podemos también cambiar entre pestañas mediante las teclas (Ctrl y alguna de las teclas Av Pag. y Rt Pag):

    selección de pestaña VSCode

    (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 la Editor anterior:

    selección de pestaña VSCode

Grabar todos los archivos modificados.

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

archivos sin grabar VSCode

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):

grabar todos los archivos modificados VSCode

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:

    cerrar pestaña seleccionada  VSCode
  3. Cerrar la pestaña activa presionando las teclas Ctrl + F4:

    cerrar pestaña seleccionada  VSCode

Abrir archivos.

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

abrir archivo   VSCode

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

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...
Problemas a partir del archivo 'pagina2.html' generar un archivo llamado 'pagina3.html' con el mismo contenido:

archivo guardar como VSCode

En el diálogo que aparece indicamos el nuevo nombre de archivo: 'pagina3.html'

Esta misma acción la podemos hacer mediante las teclas: archivo guardar como VSCode teclas de atajo

Guardado automático.

Si queremos desentendernos de la grabación de los archivos podemos activar la opción de "Guardado automático". Para activar esta funcionalidad en Visual Studio Code debemos ir a la opción de menú: Archivo -> Guardado automático y dejarla tildada (si la seleccionamos nuevamente se desactiva la opción):

guardado automático  VSCode

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')