Uso de Visual Studio Code para Desarrollo Web Básico

Clase 4 de 17 • Curso de Configuración de Entorno de Desarrollo en Windows

Leonardo Miranda

student•

se que lo dejaron en ingles los paso en español. Acciones generales Ctrl + Shift + P: Abrir la paleta de comandos. Ctrl + Shift + N: Crear un nuevo archivo. Ctrl + X: Cortar la línea actual. Ctrl + C: Copiar la línea actual. Ctrl + V: Pegar la línea cortada o copiada. Ctrl + Z: Deshacer la última acción. Ctrl + Shift + Z: Rehacer la última acción. Ctrl + S: Guardar el archivo actual. Ctrl + Shift + S: Guardar todos los archivos abiertos. Navegación del editor Ctrl + Tab: Cambiar entre pestañas abiertas. Ctrl + 1, Ctrl + 2, etc.: Cambiar a una pestaña específica. Ctrl + G: Ir a una línea específica del archivo. Ctrl + Shift + O: Ir a un símbolo (variable, función, etc.) en el archivo. Ctrl + Shift + M: Mostrar la lista de errores y advertencias. Edición de texto Alt + ↑ y Alt + ↓: Mover la línea actual hacia arriba o hacia abajo. Ctrl + Shift + L: Seleccionar todas las ocurrencias de la selección actual. Ctrl + D: Seleccionar la siguiente ocurrencia de la selección actual. Ctrl + U: Deshacer la última selección. Ctrl + Shift + ]: Indentar el texto seleccionado hacia la derecha. Ctrl + Shift + [: Indentar el texto seleccionado hacia la izquierda. Depuración F5: Iniciar la depuración. F10: Paso a paso en la depuración. F11: Paso a paso en la depuración con entrada en las funciones. Shift + F11: Salir de una función en la depuración. F9: Establecer o eliminar un punto de interrupción. ¡Espero que esta lista te sea útil! Recuerda que también puedes personalizar los atajos de teclado en Visual Studio Code según tus preferencias.

raul steven lerma

student•

muchas gracias

Marcos Monteverde

student•

excelente!!

Felipe Silva Gonzalez

student•

Profe, se saltó crerar el primer archivo y la pantalla de bienvenida a visual code. El resto, pepa, muy muy muy bueno.

Max Andy Diaz Neyra

student•

Comentario extra: si uno desea volver a la pantalla de bienvenida puede usar: control + shift + p para activar la paleta de comando y escribir walkt y lo primero que aparece te llevare a opciones relacionados con esa pantalla

Brandon Gomez Forero

student•

Para los que no sabemos nada de nada, quede varado totalmente porque no puedo crear mi archivo html porque se salto ese pasó! Como puedo resolverlo por favor?

Maria Gabriela Rodriguez Cuevas

student•

🪛 Clase #4: Instalar VSCode 4/17 🪛

IDE 📓

Un IDE (Integrated Development Environment) representa un entorno de desarrollo integrado, un ambiente en donde puedes programar. Este IDE trae consigo herramientas que ayudan al desarrollador, como: debugger (depurador), consola, GIT, inteligencia (la cual te ayuda a corregir la sintaxis cuando estás escribiendo código), etc. Lo que hace ser código al código es la sintaxis y el formato del archivo (.js , .css) etc. Existen diferentes tipos de IDE, como por ejemplo: • Visual Studio Code: “Edición de código redefinida”, es totalmente gratuito, está construido encima de open source, es decir que es de código libre y se ejecuta o corre en cualquier sistema operativo. Es muy versátil y puede servir con muchos lenguajes de programación. • WebStorm: Se venden a sí mismos como “El IDE más inteligente para JavaScript”. • Eclipse: es un IDE para el desarrollo de Java, sin embargo, admite varios lenguajes como C / C ++, PHP, ColdFusion, Python, Scala y la plataforma Android. Fue desarrollado en Java y sigue el modelo de código abierto. • Atom: se venden a sí mismos como “El editor de texto hackeable”, es decir que nos dejan construir herramientas, modificarlo, hacerle variaciones a su código para adaptarse a lo que necesitamos. • Editor de texto: Existen editores de texto / editores de código, las cuales son herramientas más minimalistas donde puedes programar pero con ciertos límites. Como el Bloc de Notas.

Visual Studio Code 🔵

Tiene la siguiente interfaz:

Ejemplo de HTML de la Clase: 🖱

<!DOCTYPE html>
<html>
	<head>
		<title>Página ejemplo</title>
	</head>
</html>

Tips 📌

La forma de “Autocompletar” dentro del archivo html, se coloca el signo de admiración (!) y sale automáticamente un menú como éste:

Si seleccionas el primero: ! te sale una plantilla HTML.
Si eliges el segundo: ! !! solo aparece el <!DOCTYPE html>
Das ENTER en cualquiera que seleccionas y listo 😉

Eduardo Monzón

student•

Gracias por el resumen.

Marcos Monteverde

student•

gracias

Lucero peña

student•

hola, para los super principiantes , en este video se omite el paso en que se cre una carpeta para guardar el proyecto (yo lo hice en Escritorio para no perderme) y también se omite que antes de escribir el código debes guardar el archivo con extension html para que pueda funcionar el autocompletado de visual studio code.

Tambien no sé si es necesario pero yo lo hice, instalar el plug in de html. Esto se hace dando click en el icono de extensiones a la izquierda y buscando html.

Luis Carlos González Cortés

student•

este es el comentario que necesitaba, no sé por que mucha gente no es tan comprensiva con los que venimos desde 0, creen que todo es intuitivo cuando no lo es sin sus conocimientos, así que te agradezco por tomar el tiempo de explicarlo

. .

student•

Excelente comentario, si no se guarda como el archivo como extension .html el archivo no "funciona"

Juan Carlos Martínez

student•

Por favor verifiquen el Quiz, salen preguntas sobre temas que no corresponden al curso, las opciones de respuesta no coinciden con las preguntas ¿Han logrado verificar esto?

Porfirio González López

student•

Mmm... Me parecio lo mismo. La inche pregunta de que extensión te permite apagar y prender JS en tu archivo y según yo y lo que recuerdo de la clase es Toggle JavaScript, pero ni siquiera aparece.

Beyra Lapierre Tumalan

student•

Lo mismo me ocurrió con la pregunta de Toggle

Kevin Davis Leyton

student•

no es un curso de html pero falto la configuracion inicial del Visual Studio y que el archivo se debe llamar .html si no no te lo muestra en el navegador como en el video

GERMAN GARCIA

student•

Si lo hizo, lo llamó ejemplo.html pero se paso se hubiera aventado un h1 minimo jajaja, un hola mundo.

Maria Zerpa

student•

Dato curioso aprendido: VSCode es de Microsoft. Amo el autocompletado de las etiquetas, te ayuda mucho a ahorrar tiempo. El atajo de ctrl+s se convierte en algo tan automatico en la programacion, que no te das cuenta cuando lo haces... :D

Jafet Brito

student•

Cierto es, el autocompletado es bueno para ahorrar tiempo.

DIANA ESPERANZA CHIRIVI AMAYA

student•

Al inicio me perdí, porque no sabía cómo iniciar un documento, sin embargo explorando encontré que el Getting started with Visual Studio Codeal tiene un tutorial al servicio, el cual muestra paso a paso como iniciar el editor de código fuente desarrollado por Microsoft.

Yulisa Vanesa Rivas

student•

Si, no lo explica

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

student•

Un editor de código es una aplicación de software diseñada para escribir, modificar y formatear código fuente de programas informáticos. Estas herramientas están especialmente diseñadas para desarrolladores de software y programadores, que necesitan crear y modificar el código fuente de sus aplicaciones.

Los editores de código son herramientas esenciales para los desarrolladores de software, ya que les permiten escribir y mantener su código de manera eficiente y organizada. Además, muchos editores de código son de código abierto y están disponibles de forma gratuita, lo que los convierte en una opción accesible para cualquier programador. Algunos ejemplos populares de editores de código incluyen Visual Studio Code, Sublime Text, Atom, Notepad++, entre otros.

Un editor de código proporciona una interfaz para escribir y editar el código fuente de un programa en varios lenguajes de programación, como HTML, CSS, JavaScript, Python, C++, entre otros. Los editores de código tienen características avanzadas, como el resaltado de sintaxis, la indentación automática, autocompletar , la búsqueda y reemplazo de texto, la integración con herramientas de depuración, entre otras.

Denise Silva

student•

Todas las preguntas del Quiz están basadas en el contenido de los videos. Por ejemplo lo del Toggle JavaScript lo explica en el video "Manejo básico de las DevTools" en el min 3:40 aprox.

Daniel Eduardo Mutis Rodríguez

student•

tengo una duda al momento de darle finalizar el programa y se instala y se abre, no se como creo ese ejemplo.html alguien podria ayudarme porque no entiendo

Jesus Alberto Rojas Reyes

student•

Vas a File/New File
Le pones ejemplo.html
Clic en Create New file
Elige la ubicación en la que quieres guardar
Clic en Create File
Ve a la ubicación en que guardaste el archivo
Abre el navegador y arrastra ejemplo.html hasta el navegador

David Jimenez

student•

¿Alguien sabe por qué cuando utilizo el signo menor que (<) no me despliega el "DOCTYPE" como en el video?

Juan Camilo Sanclemente Alzate

student•

Me pasa igualito..

Diana Isabel Rosas Montiel

student•

porque solo lo nombraste como proyecto1 y debe ser proyecto1.html , siempre debe tener la extensión del tipo de archivo

Jarol Jiménez

student•

se salto la parte para habrir una carpeta y todo eso y ahora ...... a buscar x mi cuenta un buen rato sera

Patricia Velazquez

student•

¿Qué duda tienes?

Juan cubides

student•

yo me perdi apenas instale que hago

Jorge Arturo Peña Peña

student•

Editor de código

Editor de texto diseñado específicamente para editar código.

Visual Studio Code

Editor de código diseñado por Microsoft.

Dónovan Aragón

student•

++Que es el InteliSense++: IntelliSense es una función de autocompletado usada en el entorno de desarrollo integrado Microsoft Visual Studio y también en el editor de código fuente Visual Studio Code. Es un auxiliar de finalización de código que incluye una serie de características como lista de miembros, información de parámetros, información rápida y palabra completa.

++Qué es el debugging:++ La depuración de programas es el proceso de identificar y corregir errores de programación. Es conocido también por el término inglés debugging, cuyo significado es eliminación de bugs (bichos), manera en que se conoce informalmente a los errores de programación.

Camila Ossa

student•

Es posible que no tengas habilitada la función de autocompletado en Visual Studio Code. Para asegurarte de que funcione correctamente, verifica lo siguiente:

Configuración de Autocompletado: Ve a Archivo > Preferencias > Configuración, busca "suggestions" y asegúrate de que la opción "Editor: Quick Suggestions" esté habilitada.
Extensiones: Asegúrate de tener instalada la extensión de HTML para Visual Studio Code. Esto mejora la experiencia de codificación y debería permitirte ver las sugerencias al escribir.
Modo HTML: Asegúrate de que el archivo esté guardado con la extensión .html, para que el editor reconozca que estás escribiendo HTML.
Reinicia el Editor: A veces, reiniciar Visual Studio Code puede solucionar problemas temporales.

Si sigues sin ver las opciones de autocompletado, revisa la documentación de Visual Studio Code o considera reinstalar el editor.

Harry Oswaldo Martel Benites

student•

En mi caso, empecé usando el editor de Dreamweaver; luego, SublimeText y Atom. Recien empiezo a usar VSCode, ya que he visto que es superior en algunos aspectos y, sobre todo, permite escribir código de forma ágil. ¿En qué curso me pueden enseñar a sacarle el máximo provecho a VSCode?

Cesar Haziel Pineda Pacheco

student•

Hay un curso en UDEMY de Fernando Herrera gratuito Visual Studio Code: Mejora tu velocidad para codificar

Adicional si tienes tiempo puedes ir directamente a su documentación.

Camila Ossa

student•

Paso de bienvenida omitido:

Laura Jaliff

student•

Hola, que tal? Podrian ayudarme por favor. Soy totalmente principiante y me siento muy perdida. Abri el Visual studio Code pero no se como seguir, por favor. Podrian ayudarme?

Jonathan Harley Sabogal toro

student•

puedes crear carpetas cuando lo inicias previamente tienes que abrir un directorio - carpeta, donde vas a crear tu proyecto es recomendable que lo uses en ingles pero si no en Spanish Language Pack for Visual Studio Code - Visual Studio Marketplace puedes descargar ese paquete de idioma del ide lo ejecutas y se cambiaria el idioma y animo mira mas cursos sobre visual studio code

Albert Jose Salas Yustiz

student•

Tómalo con calma Laura Jaliff eso a todos nos pasa cuando se empieza algo nuevo, así que es muy comprensible que este un poco perdida pero lo mejor es que siempre preguntes y no te quedes con la duda ya que si hay alguien que te puede ayudar mucho mejor.

Te recomiendo:

Aquí en Platzi hay mucho contenido de forma implícita acerca del uso del Visual Studio Code (VSC), es decir como es un editor de código muy versátil para múltiples lenguajes entonces encontraras mucho contenido al respecto y eso te puede abrumar, así que desconozco si tus intereses es formarte en front end o en back end o full stack o en alguna tecnología especifica.

Pero si te interesa el front end básico (html, css, JavaScript) te recomiendo los cursos básicos en el cual usaras (VSC) Visual Studio Code

Por ejemplo el siguiente curso

Curso de Fundamentos de JavaScript

desde la clase 2 y 3era clase ya comienzas paso a paso a usar el VSC

https://platzi.com/cursos/javascript/hola-mundo-en-winows/

O si deseas algo diferente

VISUAL STUDIO CODE: Tutorial para principiantes

https://www.youtube.com/watch?v=CxF3ykWP1H4

Curso de VISUAL STUDIO CODE desde CERO (Completo)

https://www.youtube.com/watch?v=TbzrOz8HbFM