VISUAL STUDIO CODE

Vista previa del material en texto

Docente: 
M.A. Alex Pacheco Moya 
Visual Studio Code 
CONTENIDO 
• Instalación y 
Personalización 
• Página Web 
• Creación de archivos 
• Adición HTML básico 
• Instalación de 
paquetes 
 
S1 
 
 
M.A. Alex Pacheco Pagina #2 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Visual Studio Code 
 
 
 
M.A. Alex Pacheco Pagina #3 
Instituto de Educación Superior Privado El Buen Pastor 
Instalar Visual Studio Code 
1. Ubique sitio oficial de Visual Studio Code 
 
2. Descargar VStudio Code versión de Windows 
 
 
 
 
M.A. Alex Pacheco Pagina #4 
Instituto de Educación Superior Privado El Buen Pastor 
3. Descarga de V Studio Code 
 
4. Licencia – Instale todo por defecto 
 
 
 
 
 
M.A. Alex Pacheco Pagina #5 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
5. Interface de Visual Studio Code 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #6 
Instituto de Educación Superior Privado El Buen Pastor 
6. Agregar extensiones 
 
 
 
 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #7 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
 
 
 
 
M.A. Alex Pacheco Pagina #8 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
7. Barra de Actividades 
 
 
 
 
 
M.A. Alex Pacheco Pagina #9 
Instituto de Educación Superior Privado El Buen Pastor 
8. Explorador de Archivos 
 
Crear nueva carpeta 
 
 
 
 
 
M.A. Alex Pacheco Pagina #10 
Instituto de Educación Superior Privado El Buen Pastor 
9. Tareas habituales de VStudio Code 
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) 
 
 
M.A. Alex Pacheco Pagina #11 
Instituto de Educación Superior Privado El Buen Pastor 
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. 
 
 
M.A. Alex Pacheco Pagina #12 
Instituto de Educación Superior Privado El Buen Pastor 
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’ 
10. ¿Qué hay en una página web? 
El contenido, el estilo y la lógica interactiva se separan en archivos HTML, CSS y 
JavaScript, respectivamente. Un principio de diseño en la programación moderna es 
la separación de los intereses. Dos de los muchos motivos para separar los intereses son 
la simplicidad y la reutilización. Por ejemplo, al aplicar estilo a elementos HTML con CSS, 
puede simplificar el código HTML. En lugar de codificar el aspecto dentro de cada 
elemento, puede aplicar estilos CSS a todos los elementos de una página, 
independientemente de la complejidad de la página. Además, puede vincular varias 
páginas HTML a un único archivo CSS, lo que puede ayudarle a simplificar una 
apariencia coherente en todo el sitio web. 
 
 
M.A. Alex Pacheco Pagina #13 
Instituto de Educación Superior Privado El Buen Pastor 
Ejercicio: Configuración de la estructura 
de la aplicación web 
 
 
Hay diferentes maneras de crear y administrar proyectos de sitio web. Algunas de estas 
diferencias dependen de las herramientas específicas que tenga y de las preferencias de 
la organización. Al crear un sitio web, es habitual que la estructura del proyecto cambie 
con el tiempo a medida que se vuelve más complicado. Los proyectos de gran tamaño 
suelen requerir un mayor grado de cuidado y atención para que muchos usuarios 
puedan mantenerlo todo organizado. La clave está en mantener la apariencia de 
organización, y hay estrategias comunes que ayudan a que así sea. 
En esta unidad, crea una estructura de proyecto pequeña con Visual Studio Code. El 
proyecto tiene tres archivos: un archivo HTML, un archivo CSS y un archivo de JavaScript. 
También agrega una extensión de Visual Studio Code para simplificar la ejecución del 
sitio web en el explorador. 
Creación de una carpeta nueva para su sitio web 
1. Abra Visual Studio Code. 
Al abrir Visual Studio Code, se abre la página de Bienvenida. Tenga en 
cuenta que puede crear un archivo o abrir una carpeta en la lista Inicio. 
 
Si la página principal no aparece, puede mostrarla seleccionando Ayuda > 
Bienvenido en el menú. (También puede mostrar la 
 
 
M.A. Alex Pacheco Pagina #14 
Instituto de Educación Superior Privado El Buen Pastor 
página principal abriendo la Paleta de comandos con el método abreviado 
de teclado Mayús+Ctrl+P en un equipo con Windowso Mayús+Cmd+P en 
macOS, o seleccionando Ver > Paleta de comandos en el menú 
Visual Studio Code. Cuando se muestre la Paleta de comandos, 
escriba >Ayuda: principal en el campo de búsqueda para abrir la 
página principal). 
1. Seleccione Abrir carpeta en la lista Inicio de la página principal o 
seleccione Archivo > Abrir carpeta en el menú de Visual Studio Code. 
 
Cuando se abre una carpeta, el sistema operativo tiene la opción de 
menú Nueva carpeta para crear una nueva. 
3. Vaya a la ubicación donde desea crear la nueva carpeta para el sitio web y 
seleccione Nueva carpeta. 
4. Asigne a la carpeta el nombre simple-website y seleccione Seleccionar carpeta. 
Creación de algunos archivos 
1. Cree un archivo; para ello, seleccione Archivo > Nuevo archivo en el menú 
o use Control+N en Windows o Comando+N en macOS. 
2. Guarde el archivo mediante Control+S en Windows o Comando+S en macOS. 
3. Escriba index.html como nombre de archivo y, a continuación, 
seleccione Guardar. 
4. Repita los pasos anteriores para crear dos archivos más, main.css y app.js. 
Cuando haya terminado, la carpeta de proyecto simple-website en el 
 
 
M.A. Alex Pacheco Pagina #15 
Instituto de Educación Superior Privado El Buen Pastor 
explorador de código de Visual Studio Code debe contener los siguientes 
archivos: 
o index.html 
o main.css 
o app.js 
 
Puede crear un sitio web incluyendo todo el código HTML, los estilos CSS y el código 
JavaScript en un único archivo. Sin embargo, en este ejercicio está usando un archivo 
HTML para el contenido, un archivo CSS para los estilos y un archivo JavaScript para la 
interactividad. 
La configuración de tres archivos ayuda a mantener organizado el proyecto del sitio 
web. La separación de contenido, estilos y lógica es un ejemplo de mejora progresiva. Si 
JavaScript no está habilitado o no es compatible con los clientes, HTML y CSS seguirán 
funcionando. Sin embargo, si CSS no es compatible con los clientes, al menos su 
contenido HTML aparecerá. 
Instalación de extensiones o paquetes 
Puede ampliar la funcionalidad de Visual Studio Code mediante el marketplace de 
extensiones. Tenga en cuenta que estas extensiones son recursos desarrollados por la 
comunidad y que suele haber varias soluciones para el mismo tipo de característica. 
Puede instalar las extensiones de forma individual en el editor, o bien varias al mismo 
tiempo con la línea de comandos. 
Para el desarrollo web, todo lo que necesita ahora es abrir en el explorador. Esta 
extensión lo ayuda a abrir rápidamente el sitio web en el explorador predeterminado, en 
lugar de copiar y pegar la dirección URL del archivo en el explorador. 
 
 
M.A. Alex Pacheco Pagina #16 
Instituto de Educación Superior Privado El Buen Pastor 
Para instalar esta extensión, siga estos pasos: 
1. Seleccione el icono Extensiones en la barra de actividad vertical (panel 
izquierdo). 
2. Escriba "abrir en" en el cuadro de búsqueda y, a continuación, seleccione la 
extensión abrir en el explorador publicada por TechER. 
3. Seleccione Instalar para que Visual Studio Code instale la extensión. 
 
4. Vuelva al Explorador; para ello, haga clic en el icono superior de la barra de 
actividad o use Control+Maýus-E en Windows o Comando+Maýus-E en macOS. 
Bien hecho. El proceso de instalación y configuración tarda un poco más, pero solo debe 
realizarse una vez. Ahora ya está listo para crear un sitio web. 
Ejercicio: Adición de HTML básico a la 
aplicación web 
Completado100 XP 
• 10 minutos 
Por el momento, el sitio web tiene un archivo HTML vacío. Se agregará algo de código. 
El objetivo es usar el lenguaje de marcado de hipertexto (HTML) para describir la página 
web que deben mostrar los exploradores de los clientes. ¿No sería buena idea tener una 
 
 
M.A. Alex Pacheco Pagina #17 
Instituto de Educación Superior Privado El Buen Pastor 
plantilla inicial? De forma cómoda, los editores pueden rellenar automáticamente parte 
del texto reutilizable o la estructura HTML típica. 
En esta unidad, agregará contenido HTML básico, abrirá la página HTML en un 
explorador y echará el primer vistazo a las herramientas de desarrollo. 
Incorporación de código HTML 
Visual Studio Code proporciona compatibilidad básica para la programación de HTML 
desde el principio. Incluye resaltado de sintaxis, finalizaciones inteligentes con 
IntelliSense y formato personalizable. 
1. Abra el sitio web en Visual Studio Code y, a continuación, abra el 
archivo index.html seleccionando el archivo index.html en el Explorador. 
2. En la página index.html, escriba html:5 y después seleccione ENTRAR. El código de 
plantilla HTML5 se agrega al archivo. 
3. Edite el código de la plantilla para que se parezca al siguiente. A continuación, guarde 
el archivo mediante Control+S en Windows o Comando+S en macOS. 
 
Edición del elemento head 
El elemento <head> del código HTML contiene información sobre el sitio web no visible 
dentro de la pestaña del explorador. 
Los metadatos definen datos sobre el documento HTML, como el juego de caracteres, 
los scripts y el explorador en el que se abre la página web. 
 
 
M.A. Alex Pacheco Pagina #18 
Instituto de Educación Superior Privado El Buen Pastor 
El título de una página web aparece en la parte superior de la ventana del explorador y 
es significativo por muchos motivos. Por ejemplo, el título lo usan y lo muestran los 
motores de búsqueda. Vamos a agregar un título. 
1. En el editor, modifique el elemento <title> para que se parezca al ejemplo siguiente. 
 
 
Para aplicar estilos a los elementos HTML de la página web, podría escribir el código CSS 
directamente en el encabezado de la página web. La escritura de CSS en la página HTML 
se denomina CSS interno. Pero un procedimiento recomendado consiste en separar la 
estructura HTML y los estilos CSS. Tener una página CSS independiente se 
denomina CSS externa. El código suele ser más fácil de leer cuando es conciso y 
compartimentado. Puede usar una o varias hojas de estilos externas para dar servicio a 
varias páginas web. En lugar de actualizar cada página HTML con código CSS replicado, 
puede realizar cambios en un único archivo CSS y hacer que esas actualizaciones se 
apliquen a todas las páginas web dependientes. Vamos a vincular a un archivo CSS 
externo. 
1. En el editor de Visual Studio Code, agregue una línea en blanco después 
del elemento <title>, escriba link y, a continuación, 
seleccione ENTRAR. Visual Studio Code debe agregar la siguiente línea al 
archivo index.html. 
 
 
 
 
M.A. Alex Pacheco Pagina #19 
Instituto de Educación Superior Privado El Buen Pastor 
2. Actualice href= a href="main.css" y guarde el archivo 
presionando Control+S en Windows o Comando+S en macOS. 
 
Edición del cuerpo 
Para empezar, ahora se rellenará el elemento <body>. 
El elemento <body> contiene el contenido del sitio web visible para sus clientes en sus 
exploradores. 
1. Dentro del elemento <body>, agregue un elemento de encabezado<h1>, 
seguido de un elemento de párrafo<p> y, a continuación, cree una lista 
desordenada<ul> que contenga varios elementos de elementos de lista<li>. 
2. Edite el código, o cópielo y péguelo, para que tenga un aspecto similar al 
siguiente ejemplo. 
 
 
 
M.A. Alex Pacheco Pagina #20 
Instituto de Educación Superior Privado El Buen Pastor 
Se puede usar un atributo ID (que se usa en el elemento <p>) para aplicar estilo a un 
elemento, mientras que el atributo de clase (que se usa en el elemento <li>) sirve para 
aplicar un estilo a todos los elementos de la misma clase. 
Antes del paso siguiente, asegúrese de que el archivo se guarda 
presionando Control+S o Comando+S. 
Abrir en el explorador 
Puede obtener una vista previa local de la página web si abre el archivo HTML en un 
explorador. En lugar de una dirección de sitio web que comienza con https://, el 
explorador apunta a la ruta de acceso del archivo local, quedebería tener un aspecto 
similiar a C:/dev/simple-website/index.html. 
• Para obtener una vista previa con Visual Studio Code, haga clic con el 
botón derecho en index.html y seleccione Abrir en el explorador 
predeterminado o seleccione el archivo index.html y use el método 
abreviado de teclado Alt+B 
 
 
 
 
M.A. Alex Pacheco Pagina #21 
Instituto de Educación Superior Privado El Buen Pastor 
 
 
---------------------------------------------------- 
 
 
Referencia: 
 
Tutorial de Visual Studio Code para principiantes 
https://keepcoding.io/blog/tutorial-de-visual-studio-code-para-iniciar/ 
 
 
Aprende VS Code ahora! | curso completo de VSCode desde CERO 
https://www.youtube.com/watch?v=Ei1y51K8jQk 
 
Visual Studio Code desde CERO | Configuración, tips, atajos, 
extensiones 
https://www.youtube.com/watch?v=HqE-lGznGac 
 
https://keepcoding.io/blog/tutorial-de-visual-studio-code-para-iniciar/
https://www.youtube.com/watch?v=Ei1y51K8jQk
https://www.youtube.com/watch?v=HqE-lGznGac