Instalar VSCode

Les dejo los atajos de teclado para VSCode en Windows:
.

https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Leonardo Miranda

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.

Felipe Silva Gonzalez

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

Maria Gabriela Rodriguez Cuevas

🪛 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 😉

MAURICIO JIMENEZ

Casi que no entiendo, tenes que poner en el nombre del archivo que es .html, me dejaron media hora descubriendolo

Maria Zerpa

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… 😄

Kevin Davis Leyton

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

JUAN SEBASTIAN RODRIGUEZ JIMENEZ

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.

Juan Rossano

Para que me aparezca automaticamente <!doctype tuve que crear el archivo con extension .html. Si creo un archivo nuevo sin grabar ni porner extension y elijo el lenguaje HTML desde la lista de lenguajes no dio la opcion al escribir <.

Paula Ocampo

hace un mes

ME EMOCIONA ESTE PROCESO.

Jarol Jiménez

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

LISETH PAOLA OSPINA OJITO

excelente para quienes estamos desde 0, no se ve dificil 😃

Cherry Auxiliadora

Esteban Ramon Padrón Urdaneta

No se de html, pero teniendo en cuenta que la etiqueta “title” se encuentra dentro de “head”, y head es “encabezado”, supongo que la wed debe rederizar el nombre del titulo en el “encabeza de la pagina”

Henry Peralta

Un editor de código es una herramienta de software que se utiliza para escribir, editar y visualizar código fuente de programación. Los editores de código son programas diseñados específicamente para facilitar la escritura de código mediante el resaltado de sintaxis, la autocompletación y la organización de bloques de código.

Sergio Andres Vargas Bautista

hace 5 días

El title se mostrará en la ventana del navegador

Manuela Gomez

hace 11 días

Nota:
Poner .html
Si no se autocompleta de manera automatica poner Control+k

alexander perez

hace 12 días

creo que va salir en la pestaña donde sale los nombre creo no se deje en pause para escribir jaja

Juliana Castillo

hace 21 días

La etiqueta de titulo va a aparecer en el nombre de la pestaña de nuestro navegador Google Chrome

Juliana Castillo

hace 21 días

¿Cómo puedo restaurar a fabrica rapidamente VSC (Visual Studio Code)? ✨

Juliana Castillo

hace 21 días

Time to interactive, no conocia este nuevo termino

Carlos Ramos

hace 25 días

Clase 4 - Instalar VSCode

Repaso de la clase

¿Cómo se llama la herramienta que usa un desarrollador de software para escribir código?

Editor de código.

¿Microsoft Office es un editor de código, por qué?

No. Esto es porque este editor de texto agrega caracteres especiales al texto que estamos escribiendo.

¿Podemos usar el bloc de notas para escribir código?

Sí, pero esta herramienta no es eficiente para esta tarea.

¿Qué editor de código se recomienda usar hoy en día?

VSCode.

¿Quién desarrolló VSCode?

Microsoft.

¿Cuáles son las ventajas de usar VSCode como nuestro editor de código?

Brinda sugerencias al código que estamos escribiendo.
Permite hacer debugging.
Conexión con GitHub y Git.
Autocompletado de código.

¿Qué configuraciones se recomienda que hagamos mientras instalamos VSCode?

En la ventana “Select additional tasks” debemos activar las siguientes opciones:
- Add “Open with code” action to Windows explorer file context menu.
- Add “Open with code” action to Windows explorer directory context menu.

¿Cómo guardamos un archivo en VSCode?

Atajo: CTRL + S

Andres Ramirez

uffff que clase tan bacana

Leon Dario Gomez Yepes

hace un mes

es el titilo que va el la barra inicial de la página

Hugo Dónovan Aragón Cruz

hace un mes

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.

DEOC

🫡

Sergio Arturo Mata Contreras

También un dato extra que es de utilidad, si modificaron el archivo en Visual Studio Code y no se ha hecho el guardado, fíjense en la pestala del video en el minuto 5:43 ,cómo es que tiene el título del archivo ejemplo.html

Tiene justito al lado una bolita blanca, eso significa que no se han guardado los cambios, vean como el profe hace Ctrl+S y se quita la bolita, eso es porque así como ves el archivo se ha guardado correctamente.

Funciona mucho saber esto porque aveces ni sabes que pasó con el archivo, y porque usando Git te detecta cambios y tu ni en cuenta, pues eso sirve porque aveces uno le da clic a un botón por accidente y ya se modificó todo nuestro trabajo.

Sergio Arturo Mata Contreras

Este editor también tiene extensiones, en mi caso por ejemplo que uso las bases de datos, puedo configurar el archivo como .sql y detecta mis sentencias de búsquedas, y si detecta el comando lo hace como aquí en platzi

Select * From estudiantes

Pero ese es un lenguaje universal de sql, dependiendo del motor de búsqueda que uses tendrá sentencias especiales de dicho motor, en el caso de PostgreSQL tiene unos cuantos que no son básicos en el SQL pero al agregar una extensión en Visual Studio Code detectará los comandos especiales del programa que uses, en mi caso PostgreSQL

Gilberto C.

Jhair Jherson Flores Leon

En lugar de arrastrar el archivo a google, una mejor opción es instalar la extensión Live Server. Esta extensión actualiza de manera automatica el navegador, dandole click en la opción Go live que se activa al instalar la extensión. Abrira de manera automatica el archivo ejemplo.html.

Ronald Indriago

Cuando colocamos la etiqueta title aparece en el navegador como el nombre de la pestaña

Diana Carolina Osorio Jaramillo

La pagina ejemplo que se coloco en la etiqueta titulo es la descripción de la pagina que se esta creando como aparece en la parte superior de la ventana del navegador.

Luis Castro

¿Qué es Visual Studio Code?

Visual Studio es una herramienta de desarrollo eficaz que permite completar todo el ciclo de desarrollo en un solo lugar. Es un entorno de desarrollo integrado (IDE) completo que puede usar para escribir, editar, depurar y compilar el código y, luego, implementar la aplicación. Aparte de la edición y depuración del código, Visual Studio incluye compiladores, herramientas de finalización de código, control de código fuente, extensiones y muchas más características para mejorar cada fase del proceso de desarrollo de software.

Andres Felipe Camacho Rodriguez

Sale en la pestaña del navegador como la que mande el pantallazo

Andres Felipe Camacho Rodriguez

Aquí sale el title:
![](

Daniel Stalin Gualán Lozano

Haber era asi:
<!DOCTYPE html>
<html></html>
<head></head>
<title></title>

jhon freddy tavera blandon

Andrés Soret Chacin

fffffffr

maria cristina gaupmann

El titulo se muestra como nombre de la pestaña.

Andrés Soret Chacin

Visual Studio Code (VS Code)

Visual Studio Code es un editor de código desarrollado por Microsoft.
Se ha vuelto muy popular y ampliamente utilizado por desarrolladores.
Ofrece ventajas como IntelliSense, que proporciona autocompletado inteligente y sugerencias de código.
Permite ejecutar y depurar código, encontrar y corregir errores (bugs) y trabajar con repositorios de GitHub.
Se puede descargar e instalar en diferentes sistemas operativos, como Windows, macOS y Linux.

Porfirio González López

VSCode Download

Carlos Escobar Vázquez

La forma más rápida de crear un documento HTML es con el atajo en VS:
html:5

doge.py

Me surgió la curiosidad y bueno, aquí está en link de las características que tiene la computadora que está usando el profesor Celis. ¡Se ve BASTANTE guay! 👀

Jesus Rivero Reyes

el titulo apareceria en el encabezado, es decir arriba bueno espero ser mas concreto despues de ver mas html

Jafet Brito

Visual Studio Code me parece genial para codigo y si quieren algo más general TYPORA me gusta mucho.

abndan