Instalación de Visual Studio Code y configuración inicial
6/84
Recursos
Si vas a aprender a programar, necesitas un editor de código. Pero ¿Por qué usar uno? ¿Cuál elegir? ¿Y cómo instalarlo? Quédate conmigo y respondamos todas esas preguntas 😉.
¿Qué es un editor de código?
En pocas palabras, un editor de código es un software que te permite escribir y editar código en texto plano, a la vez que te brinda herramientas varias para facilitar tu proceso de trabajo.
El código se escribe en texto plano. Es decir, texto simple y sin ningún tipo de formato (como negritas, cursivas y variedades de tamaño o color). Por lo tanto, no puedes escribir código usando software dedicado a aplicar estos formatos en cartas y documentos (como Microsoft word, Google docs, o Pages).
Así que necesitas un software especializado que te permita escribir texto plano, pero que al mismo tiempo te brinde herramientas para facilitar tu proceso de trabajo. Algunas de estas herramientas son: detector de errores en el código, herramientas para autocompletar, buscar y reemplazar; resaltados varios para facilitar la lectura del código, entre otros.
Además. algunas de estas herramientas admiten la instalación de extensiones que permiten personalizar y ampliar aún más las capacidades del editor de código. Van desde asistencia con colores y resaltados, a herramientas de comunicación de equipos dentro del editor de código como CodeStream.
¿Qué editor de código instalo primero?
Si estás siguiendo este curso, te recomendamos que empieces probando Visual Studio Code.
Existen muchos editores de código en el mercado, y la mayoría son gratuitos (incluyendo el block de notas o el “notepad” que viene con tu computadora). Sin embargo, Platzi eligió esta para ti porque es gratuita, corre en windows, mac y Linux; y es una de las mejor valoradas en el entorno profesional al momento de lanzar este curso (2022).
¿Cómo instalar Visual Studio Code?
Entra al sitio web oficial de Visual Studio Code y descárgalo para tu sistema operativo.
Ejecuta el instalador que se descargó en tu computadora.
Acepta los términos y condiciones (si estás de acuerdo).
Luego tendrás que indicarle al instalador si deseas que realice alguna tarea adicional (abajo te explico qué significan estas opciones), y le das a siguiente.
Finalmente, esperas a que termine la instalación y le das finalizar 🙂
Tareas adicionales durante la instalación de Visual Studio Code
Te recomendamos habilitar las siguientes opciones: te recomendamos:
Crear el acceso directo en el escritorio (para que puedas abrirlo desde el escritorio con facilidad).
Agregar la acción “abrir en code” a los menu contextuales de archivo y de directorio (Esto te permite abrir archivos y carpetas desde el menú que se abre cuando haces click derecho en ellos).
Registrar Code como editor para los tipos de archivo admitidos (para que tu computadora abra los archivos con Visual Studio Code en lugar del Notepad).
Agregarlo al PATH (para que puedas abrir tus archivos y carpetas fácilmente desde la terminal y línea de comandos).
Estas opciones te beneficiarán en tu carrera cómo programador, especialmente si Visual Studio Code se convierte en tu editor de texto preferido.
Usando Visual Studio Code por primera vez
Solo la práctica te hará un maestro en Visual Studio Code. Sin embargo, déjame darte algunas nociones clave para que empieces a usarlo ahora mismo 👍
VSCode emplea ventanas al igual que el navegador de internet. Puedes trabajar con varios archivos a la vez desde la misma ventana.
Por defecto, VSCode suele mostrar una ventana de bienvenida y otra con las mejoras de la última versión instalada. Puedes cerrarlas cuando quieras.
Por defecto, VSCode te preguntará si confías en los autores de los archivos que intentes abrir. Esta es una medida de seguridad normal, y se toma para protegerte de archivos ejecutables que puedan puedan perjudicar tu computador.
VSCode tiene un menú superior muy similar a los de otros software, pero también tiene un menú a la izquierda que se distingue por íconos en lugar de palabras. Estos despliegan un panel lateral con diferentes funcionalidades.
El primer botón es el explorador de archivos. Si decides abrir una carpeta entera con VSCode, este panel te permite navegar fácilmente por los diferentes archivos que se encuentran dentro de la carpeta.
El segundo botón es un buscador. Te permite buscar palabras en cualquiera de los archivos de la carpeta que tienes abierta (y resalta todas sus iteraciones).
El tercero tiene que ver con un software de control de versiones (algo indispensable para programar profesionalmente. Más información en el Curso Profesional de Git y Github).
El cuarto es una herramienta interna de VSCode para correr y detectar bugs en el código.
El quinto abre un panel dónde podrás buscar e instalar extensiones para tu editor de código.
El editor de VSCode tiene tema oscuro por defecto para que distingas la implementación de colores dentro del código.
VSCode cuenta el número de líneas del archivo que tengas abierto. También destaca la indentación de código, y aplica un código de colores al texto del archivo (que depende de la extensión del archivo).
VSCode emplea una vista miniatura del código en el extremo derecho de la ventana. Puedes usar este para navegar fácilmente por tu código.
Puedes hacer zoom para aumentar el tamaño del código y facilitar su lectura. Puedes lograrlo pulsando Ctrl→”+” y Ctrl→”-”
Bonus: utf-8
El navegador no puede leer acentos y letras “ñ” si no indicas esto en el HTML.
Es probable que ya te hayas dado cuenta de que estos acentos no se muestran bien cuando cargas el archivo HTML común y corriente en tu navegador. Esto se debe a que los acentos no pertenecen al set de caracteres que carga por defecto el HTML.
Para usar caracteres comunes del español (como acentos y la letra “ñ”), necesitas activar el Unicode Transformation Format 8 (UTF-8) en tu archivo HTML colocando la siguiente etiqueta <meta> en el <head> de tu archivo:
.
Este editor de código es tan increíble que incluso puede escribir todo el código base por ti 😱. Por ejemplo, si abres un archivo .html vacío, puedes escribir html y verás que te aparece este menú:
.
.
Si le das click a la opción que dice: html:5 ¡verás que el código base se escribe solito automáticamente!
.
.
Ahora, vas a ver cosas medias raras como que hay una etiqueta meta con un http-equiv y otra con un name="viewport"… no te preocupes, Visual Studio Code es tan inteligente que te escribe esas etqiuetas por defecto que ayudan a tu navegador a interpretar de una mejor forma tu página web 😄. A medida que avances aprenderás sobre esas etiquetas, por ahora, si no te sientes segura o seguro con tener eso ahí escrito puedes borrarlo, pero ahora ya sabes cómo escribir de forma rápida esa base de código que acabas de aprender 💚.
ME ENCANTA ESTE CURSO Ver que ahora en este curso se utilizara Visual Estudio Code me da muchas ganas de terminarlo 👌😁 💚💚 La old school seguimos conservando nuestro ATOM 💚
<h1>Top5 extensiones de visual studio code que deberias tener</h1>
PRETTIER
Esta extensión permite formatear el código según las reglas de cada lenguaje. Soporta la sintaxis de una gran cantidad de lenguajes, como JavaScript, JSX, Flow, TypeScript, JSON, HTML, Vue, Angular, CSS, Less, SCSS, GraphQL, MarkDown, CommonMark, MDX y YAML. Prettier ya trae sus reglas predeterminadas, pero tú también puedes crear las tuyas, como dónde van los saltos de línea, las tabulaciones, los espacios, etc. 😎
.
.
LIVE SHARE
Te permite editar y depurar el código en tiempo real con otro programador, también puedes llamarlos, chatear, compartir terminales y servidores. Como en cualquier otra herramienta de trabajo colaborativo, puedes ver en dónde está tu compañero en el programa y en qué línea del código está trabajando. Si hay un problema que surja en el momento, pueden llamarse y encontrar la solución juntos. ¡Qué viva el trabajo en equipo y en tiempo real! 🙌
.
.
GITLENS
Esta extensión te brinda muchas herramientas para trabajar con GIT. Te permite ver el autor de las notas, información del repositorio en el que estás, las ramas y, dependiendo del archivo o línea que te encuentres, te mostrará el historial de cambios de cada archivo o cada línea para que puedas hacer comparaciones. ¡Es una herramienta muy completa para trabajar con GIT! 👨💻
.
.
LIVE SERVER
Esta es una de las extensiones más recomendadas por desarrolladores frontends, ya que crea un pequeño servidor local para que puedas ver lo que estás haciendo y se actualice automáticamente con cada cambio.
.
.
STORIES
¿Te imaginabas que podías compartir tu trabajo por stories?, ¿o qué podrías ver lo que otros desarrolladores están haciendo con su código? Con esta extensión podrás mostrar partes de tu código, ver el código de otros usuarios e incluso manipularlo, como si fuera un archivo local, y reutilizarlo en alguno de tus proyectos.
Visual Studio Code (VS Code) es un editor de código desarrollado por Microsoft. Es software libre y multiplataforma. VS Code tiene una buena integración con Git, cuenta con soporte para depuración de código, y dispone de muchas de extensiones, que básicamente te da la posibilidad de escribir y ejecutar código en cualquier lenguaje de programación.
Colorea las etiquetas, variables, funciones etc… → ayuda visual al DEV
tiene auto completado → agiliza el codeo
<aside>
💡 <meta charset=“utf-8” /> → dice que la pagina web tiene una serie de caracteres del estandar utf-8 (tiles,ñ, cosas del español)
TIP:
Para crear la estructura de un archivo HTML en VSC, basta con escribir HTML:5 y enter. Con esto se genera automáticamente toda la estructura de la página.
Por alguna razón cambiar el guion a un guión bajo solucionó mi problema con los caracteres especiales
si alguien más tiene este problema esa fue mi solución
Solo un detalle, colocar la / de cierre en la etiqueta <meta> es opcional, no es obligatorio, por lo cual es perfectamente posible solcamente usar <meta charset="utf-8">.
Fuentes:
¿Qué aprendimos hoy?
Para que se puedan leer los acentos y las ñ´s hay que usar la siguiente etiqueta
<meta charset =“utf-8” />
vamos lento, porque vamos lejos 😉
<!DOCTYPE HTML><html><head><metacharset="utf-8"/><title>Mi primera paginita</title><script>
a = 5
b=235
perrito = "Ciruelejo"
alert("El valor de a más b es "+ (a+b))
alert("Este código va a funcionar")
</script></head><body><h1> Mi primer sitio Web</h1><p>Hola <strong>querida</strong> clase</p><p>Este es mi primer programa completo y profecional</p><p>Gran programa</p></body></html>
Es una de múltiples opciones para usar una aplicación para programar mejor, hay unas que sirven mucho mejor que otras, por ejemplo Word, WordPerfect o en cualquier otra herramienta de texto enriquecido que sea para crear cartas y/o documento, esos lugares no permiten editar texto plano.
<aside>
💡 Texto plano: Texto que no tiene ningún formato, texto que no te permite colocar negrita, cursiva, subrayado o colores.
</aside>
La magia en las herramientas de código, es que te identifican los errores y te los colorean de una manera visual (No identifican todos los errores pero ayudan un montón.)
Puedes usar cualquier herramienta de código, al final del día es un archivo de texto. El editor no importar, el sistema no importa, pero la extensión del archivo si importa.
Las extensiones de los archivos es la forma en que los editores de código detectan que es lo que están viendo, entonces el código en Java Script es distinto a HTML, es distinto a CSS, es distinto a Python. Tienes que colocar la extensión de archivo correcta y tienes que entender la estructura de carpetas correctas dentro de tu navegador o dentro de tu computador.
Los colores en el código es una ayuda visual para que puedas programar mejor.
En estos momentos no funcionan las tildes, ya que no vienen por naturalidad en el código, para ello hay que agregarle una etiqueta especial llamada “meta”, se colocaría en el primer lugar de el head, dentro del head.
<html><head><metacharset="utf-8" /><title>Mi primera programada</title><script>
a = 5
b = 235
alert("el valor de a + b es: " + (a + b))
alert("Este código va a funcionar")
</script></head><body><h1>Mi primer intento de website</h1><p>Este es nuestro primer programa completo y profesional</p><p>Gran programa</p></body></html>
Cuando las etiquetas no tienen contenido por dentro (Ejemplo de las etiquetas que si tienen contenido es, <title>Titulo de la pagina</title> ), entonces se cierran con un “/>”, Y el espacio que hay “meta” y la palabra “charset” es absolutamente obligatorio, “charset” es un atributo de la etiqueta “meta”. lo que se le esta diciendo al navegador es que esta pagina web va a tener una serie de caracteres de un estándar llamado “UTF-8”
UTF-8 es el estándar que nos permite añadir las tildes, ñ y todas las cositas de nuestro maravillosa lengua española.
Es Visual Studio Code es una herramienta maravillosa. Y todo lo que podemos hacer con las extensiones. Apenas estoy aprendiendo pero quise verlo y complementarlo desde la visión de Platzi.
Podríamos hacernos la pregunta de por qué Microsoft Word no funcionaría para programar y el block de notas si. Te cuento.
Hagamos un experimento.
Ve y abre Word o su equivalente en Google, que es Google Docs.
Escribe una oración. Cualquiera. Por ejemplo, mi perro se llama Lucas. No importa qué escribas.
Guarda el documento localmente.
Ve a la ubicación del documento y:
Dale click derecho.
Dale click en abrir con.
Si te aparece el block de notas, seleccionalo. Si no, dale en donde dice Elegir otra app o algo por el estilo.
Busca el block de notas y lo seleccionas.
Al abrir, verás que no te saldrá la oración que escribiste, te saldrá algo como:
¿Ahora lo ves? Apps como Word no generan código plano, sino que tienen cierta lógica detrás que modifica el texto original si lo tratamos de abrir con una app como block de notas. Imagínate programar en Word y que al abrir VS Code te salgan esas cosas. 😅
Sin duda, el mejor editor de código de nuestro tiempo.
Lo genial de VScode es la gran cantidad de extensiones que puedes agregar, y muy fácilmente. Además, es muy ligero. Recuerdo aquellos días en que usaba Sublime Text y no tenía idea de como agregar una extensión, o cuando empecé a usar Atom y tardaba una eternidad en abrir un proyecto… VScode mejoró mucho las cosas.
Programar en un editor de texto al principio puede ayudarnos a memorizar la estructura de los lenguajes que estás aprendiendo.
Creo que si empiezas usando solo editores de código como VScode, en alguna oportunidad, (aunque rara), puede pasar que necesites programar en un equipo diferente y no cuentes con la herramienta. Muy seguramente no recordarás las estructuras de los lenguajes muy bien, porque el editor siempre te ayudó a autocompletar. Pero bueno, sería una rara ocasión.
Existen editores online que te servirán para hacer proyectos pequeños o prácticas. Muy útiles.
Aquí dejo unos cuantos:
NOTA: Para ver el texto más grande dentro de Visual Studio Code oprime a la vez las teclas Ctrl + (más). Si quieres hacer el texto más chico Ctrl - (menos), y si quieres dejar el texto al tamaño estándar Ctrl 0 (cero).
Les recomiendo que instalen Github Copilot, es muy útil y ahora más eficiente porque está reforzado con inteligencia artificial, nos permite autocompletar líneas de códigos…
Apenas estoy aprendiendo pero tuve la oportunidad de trabajar en la creación de una pagina web y aunque la otra persona era la que hacia todo yo estaba anotando y una de las cosas que noté fueron estos detalles. espero les funcione.
Soy completamente nuevo en esto, yo de oficio soy mecanico automotriz y estoy entendiendo :0
Creo que si voy a pagar la suscripcion una vez termine este curso
yo aprendi por otros medios que ya se html ,css,algo de javasCript pero esto lo repito por que es un buen recordatorio que todos debemos hacer pa que no se apague el cerebro
Hola Prosor
Escribí el código sin el meta y arrojo la palabra “código” con la tilde, no me ocurrió lo del video.!
<html><head><title>Mi primera pagina</title><script>
a=10
b=255
alert("el valor de a+b es " + (a +b))
alert("este código va a funcionar")
</script><body><h1>Hola Anita</h1><strong>Por favor</strong> no abras mis documentos ¡¡¡
<p> Leyder el programador. :)} </p><html>
He tenido la oportunidad ver ver las clases varias veces, y como principiante, al principio no entendía muy bien, pero como dijo David. Es cuestión de práctica y paciencia. Me encanta el curso me tiene inmerso completamente. Muchas gracias por la oportunidad que dan de aprender atravez de este curso gratuito.
Cuando escribes código en Visual Studio Code y notas que las palabras con tilde se resaltan en rojo, esto se debe a que el editor no tiene activada la detección del idioma o codificación adecuada. Asegúrate de agregar la etiqueta `<meta charset="utf-8">` en la sección `<head>` de tu archivo HTML, como se mencionó en el transcript. Esto permitirá que el navegador interprete correctamente los caracteres especiales.
Recuerda, siempre guarda los cambios y recarga la página para ver los efectos.
Para que tu computadora reconozca las tildes al escribir, asegúrate de que tu archivo HTML tenga la etiqueta `<meta charset="utf-8">` dentro del `<head>`. Esta etiqueta le indica al navegador cómo interpretar los caracteres, permitiendo el uso correcto de tildes y otros caracteres especiales.
Si ya has agregado esta etiqueta y aún no funciona, revisa la configuración de idioma y teclado de tu sistema operativo. Asegúrate de que esté configurado para español. Esto debería resolver el problema.
🐉 Hay algunas cosas muy geniales que se pueden hacer en VSC. Como tener imágenes de monas chinas de fondo.
No sé si solo me pasa a mi.. pero cada vez que hago click en un comentario se despliega todo el historial de comentarios en la misma pestaña y no en una nueva. Lo cual es bastante tedioso, ya que, perdemos el video de la clase que estamos viendo. Ojalá corrijan ese error, sería mucho mejor redirigir esta función a una nueva pestaña.
Gracias
Les voy a recomendear un atajo para el html. Cuando creen su index.html, en vez de escribir el html:5 pueden usar el: !+Tab y ya se les va a hacer la estructura
Holaaa, mi nombre es Jesús, me dicen Yisus y pues quería expresar que… Empecé a estudiar en platzi por una propaganda de YouTube, y empecé a estudiar programación en modo gratuito, al tope del curso por falta de pago, espere unos meses y algo me insistía que invirtiera en esto y aquí estoy pague el año y la verdad no me arrepiento de nada, tengo muchas ganas de crecer, espero que me den consejos y buenas practicas las leeré y tendré en cuenta
me gusta que esta vez se use VSC, en el curso de programacion basica anterior habiamos usado ATOM. Estoy haciendo este curso de nuevo porque parece mucho mas bonito
Buena tarde, una dudita, pese a que no tengo la etiqueta meta , me està dejando con tilde el mensaje del alert. Serà la versiòn del visual? Me parece curioso.
Porqué a mi, con el Visual Studio, cuando hago rodar el archivo, no se me aparecen los alertas en el navegador?
Aclaración: uso Mac y el navegador es el chrome.
Me ausento de este curso porque no he podido hacer una línea de código en el bloc de notas ni en el visual studio code. No sé porqué, si alguien me orienta, me da un consejo lo agradezco.🥺
Me agrada cómo ha cambiado para bien el nuevo curso de programación, más didáctico , mejores ayudas multimedia en la pantalla de la clase (visuales, nombres). También cambiaron el Atom por Visual Studio code
si no pueden instalar ningún editor les recomiendo una pagina que se llama replit, en ella puedes programar cualquier tipo de lenguaje y también es muy fácil de usar.
Que genial esta actualizacion te lleva de la A a la Z de un forma practica y sencilla y aun mas te muestra las herramienteas para que tu aprendizaje se vea mas enrequesidor.
Un archivo de texto plano es la forma en que el editor de código detecta lo que se está viendo.
Los colores evidenciados son ayudas visuales para el momento en que se esta programando.
La etiqueta meta va a tener el atributo charset, la cual para este caso en específico va a utilizar el standard UTF-8.
Cuando las etiquetas no tienen contenido se cierran en el mismo momento, no como la etiquetas que contienen algo para nuestro sitio. E.G: <meta charset=“UTF-8”/>
Raro, seguí paso a paso las instrucciones, pero a mi me salio el cuadro de dialogo con tilde en primera instancia sin necesidad de usar <meta charset=“utf-8” />
Si quieren practicar desde el celular pueden descargar TrebEdit. Tiene una version de paga con mejores opciones, pero lo que ofrecen gratis cumple para lo principal que es hacer páginas webs.
Visual Studio Code es el editor de código más famoso y usado, y como bien lo menciona Freddy, existen otros como Atom o Sublime Text.
Pero no solamente podemos usar dichos editores, tambien existen algo llamados IDEs, Freddy menciona uno que es Eclipse, hay otros como Intellij o Android Studio.
Un IDE (Entorno de desarrollo integrado) es un editor de código con más funcionalidades, ayudas o complementos, todo en un mismo software.
En este curso que se va a aprender html-css-js, recomiendo el IDE WebStorm que es el especializado para todo lo relacionado a JavaScript, es de pago pero si tienes correo educativo (el de tu universidad o instituto, tienen dominio .edu) puedes usarlo de forma gratuita (te regalan una licencia estudiantil)
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?