No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Instalar VSCode

4/17
Recursos

Aportes 49

Preguntas 12

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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

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.

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

馃獩 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: 鈥淓dici贸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 鈥淓l 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 鈥淓l 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 馃槈

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

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鈥 馃槃

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

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.

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 <.

ME EMOCIONA ESTE PROCESO.

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

excelente para quienes estamos desde 0, no se ve dificil 馃槂

No se de html, pero teniendo en cuenta que la etiqueta 鈥渢itle鈥 se encuentra dentro de 鈥渉ead鈥, y head es 鈥渆ncabezado鈥, supongo que la wed debe rederizar el nombre del titulo en el 鈥渆ncabeza de la pagina鈥

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.

El title se mostrar谩 en la ventana del navegador

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

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

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

驴C贸mo puedo restaurar a fabrica rapidamente VSC (Visual Studio Code)? 鉁

Time to interactive, no conocia este nuevo termino

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 鈥淪elect additional tasks鈥 debemos activar las siguientes opciones:
    • Add 鈥淥pen with code鈥 action to Windows explorer file context menu.
    • Add 鈥淥pen with code鈥 action to Windows explorer directory context menu.

驴C贸mo guardamos un archivo en VSCode?

  • Atajo: CTRL + S

uffff que clase tan bacana

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

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.

馃

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.

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

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.

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

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.

驴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.

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

Aqu铆 sale el title:
![](

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

fffffffr

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

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.

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

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! 馃憖

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

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

RESUMEN DEL VIDEO

  1. Instala VSCode 鈥https://code.visualstudio.com/download
  2. Sigue el proceso de instalaci贸n dando click en siguiente.
  3. Una vez finalizada la instalaci贸n de VSCode, ejecuta VSCode.
  4. Configura VSCode en espa帽ol, lo recomendable es dejarlo en ingl茅s (c贸mo viene por Default), pero es una buena pr谩ctica de programaci贸n utilizarlo en ingl茅s.

El titulo aparece en la pesta帽a del navegador

隆Como nombre del sitio web!

Gracias!