Visual Studio Code desde CERO | Configuración, tips, atajos, extensiones

Tutorial de Visual Studio Code enfocado en los principiantes.
VSCode es el editor de código más usado a nivel mundial, es gratuito y trae un montón de herramientas. En este video les comparto las configuraciones, tips, atajos, extensiones y mucho más que uso en el día a día. Todo desde cero enfocado en los que están comenzando en el mundo de la programación.
✅ Contenido:
0:00 Intro
0:28 Instalar vscode
1:50 Cambiar íconos y tema
5:51 Abreviaciones Emmet
10:54 Live Server
12:22 Formatear código - Prettier
15:52 Atajos de teclado
18:16 Manejo de pestañas
20:08 Paleta de comandos
21:50 Programación JavaScript
25:50 Completamiento de clases CSS
27:11 Múltiples cursores
29:11 Búsqueda y reemplazo
30:43 Otras configuraciones
33:20 Configuraciones para React.js
36:23 Usar la terminal
👀 Les sugiero pongan el video en 1080p para que puedan ver el contenido con nitidez.
🔔 Suscríbete al canal y activa la campanita para que no te pierdas ningún video:
kzbin.info?sub_...
🐦 Sígueme en twitter:
/ ymulenll
📌Enlaces:
Enlace descarga vscode: code.visualstudio.com/
Atajos Emmet: docs.emmet.io/cheat-sheet/
Muchas gracias por ver este video, espero le haya sido útil.
#vscode

[@YoelvisM]

Hola amigos 👋, espero les sirva el video, les pido lo compartan con sus amigos que estén comenzando en el mundo de la programación 👨🏻‍💻

[@guillermoffunaro6987]

Gracias, gran trabajo!!

[@DANIELJUNIOR-kd4ve]

HOLA AMIGO ME PUEDE AYUDAR

[@andreaalvarez9746]

Muchisimas gracias!!

[@santino406]

Muchas gracias, excelente video

[@gonzalez869]

Excelente trabajo, por favor no dejes de subir contenido, no bajes la calidad, paciencia de explicar y lo mas importante que fue con lo que te sacaste un "10" es que explicas con detalle y no pasas por alto las cosas básicas que todos pasan por alto creyendo que uno lo sabe y ese el gran error, no se si es por flojera que normalmente no lo explican. pero para personas que estamos comenzando es lo que nos detiene ya que no lo sabemos y es muy raro que alguien quiera compartir su conocimiento con paciencia y tomando en cuenta cada paso desde cero. !GRACIAS!

[@cristina6514]

Soy principiante en tema código, y eres el único que lo explica correctamente y muy fácil. Eres un Crak! cada vez que tengo un problema acudo a tus tutoriales, que siempre siempre me salvan la vida. Te animo a que sigas haciéndolo. Felicidades!!!!

[@jinnetkatherinecastillo4604]

Muchísimas gracias, estoy comenzando en este fascinante mundo y tu video lo he visto ya unas cuantas veces, lo explicas muy bien y detallado.

[@LARROUZ]

Buenas Yoelvis, excelente las explicaciones durante el video, hace tiempo buscaba un video así y me las tuve que apañar solo jaja y ahora me encontré con este para reforzar conocimientos, muchas gracias por este contenido de calidad!

[@EbinLuan]

Gracias Yoelvis, desde cero, para quienes empezamos. Clarísimo todo lo que explicas!

[@frostylon]

¡Gran video! Claro, preciso y conciso

[@lauraipurani9334]

Muchísimas gracias por el tutorial. Bien explicado ✨

[@Purplejud1]

Muchas Gracias!!!! Había empezado un curso muy básico de visual studio code y con este video pude resolver dudas. :D

[@sdfsfsfd437]

Muy útil el vídeo mostrándonos todas estas características de VSC. Gracias Yoelvis.

[@sdfsfsfd437]

Muy interesante esos próximos vídeos sobre debug en el VSC para javascript etc.

[@kicors4913]

me he suscrito a tu canal, de todos los videos que he visto en youtube este es el que mejor explica la configuración y comandos. Gracias.

[@claudioirianni1988]

Gracias Elvis, uso el cobalt y nunca habia visto que lo habias hecho vos. Muy bueno!

[@alejandrones5238]

Todos tus vídeos muy buenos..! Gracias por todo tu aporte

[@davidbailon6928]

Excelentes tips para el uso mejorado del editor.

[@guidoalbarracin_argentina]

Hola Yoelvis. Gracias por compartir tus conocimientos. Eso hace grande a una persona. Saludos desde Tucumán, Argentina

[@orlandocruz1787]

Muchas gracias por el tutorial, he despejado muchas dudas.

[@gregoloza7146]

Este video me soluciono muchos problemas de tiempo, estoy estudiando y cuando tengo que hacer ejercicios me parece super tedioso, esto me va a ayudar mucho, gracias.

[@gracielasosa7845]

Excelente!! Muy claro y didáctico! Felicitaciones y gracias!!

[@germanbaena6579]

Excelente tutorial, muchas gracias!

[@user-uq2ei3fv7o]

Fue muy oportuno que encontre tu video. estaba en otro curso de "hágalo sin saber programar" y de la nada , nos pidieron hagamos un curriculum con VSC, yo ni lo había descargado, ni entendía nada de las extensiones, yo no partía de cero sino de -10 : ). Gracias, me siento mas animada a aprender!

[@alexquintana7499]

gracias Yoelvis, muy bien explicado!! por fin tengo mi vsc listo !!

[@GeinerSb]

Muy bien video como siempre muchas gracias!!!

[@angelvictoriano7088]

Muy buen aporte Yoelvis, exelente.

[@celestegrimolizzi5239]

Gracias por este fantástico video amigoo!! me salvaste genio

[@marielrisso242]

No sabes lo útil que es tu video, gracias eternas!!!!🤩😍🤩

[@hectorospina612]

Excelente material, felicitaciones me sirvió mucho.

[@geovannizapata3739]

Wow! It works! The first time i tried it took forever to activate and when I disabled my antivirus it worked like in less than a minute! Thanks bro!

[@janetmarulanda8294]

Excelente información! Muchas gracias

[@lou-lu2644]

Gracias!! me sentia re perdida y tu video me ayudo un moton!

Espectacular Muchas gracias Yoelvis!

[@mikersson]

Gracias Yoelvis, estuve siguiendote hacer tiempo pero no me percaté que no me había suscrito a tu canal. Ya lo hice por lo que te agradezco nuevamente. Muy buenos datos!.

[@YoelvisM]

Muchas gracias, dentro de poco estaré de vuelta con nuevos videos

[@justopuertaspaule4429]

Muy buen video recomendado al 100X100,ver hasta el fin INTERESANTISIMO .Saludos

[@raquelpratto877]

Excelente tutorial!! Gracias 👍

[@fernandoromero768]

muchas gracias por estos atajos!!!

[@yordancarloscarballidocarb152]

Thank you so much! I can not wait to start setuping. I want to create original soft for comrcials and shows alongside my many other

[@dubanvalencia284]

Hace dos días luchando por solucionar un problema y este video me dio la solución. Muchas gracias

[@claudiocaceres1151]

Muchas gracias, de grandísima utilidad. Gracias.

[@edisonmaytamamani7342]

eres un crack, espero que sigas subiendo videos

[@JEFFREY808915]

Excelente video, ya agregué todas las sugerencias super util, muchas gracias!

[@YoelvisM]

que bueno jeffrey, saludos!

[@Adrian-uh6wd]

Hola, estaba buscando otra cosa y te encontré!, estoy empezando un curso de HTML Y CSS pero no me enseñaron nada de Visual Studio Code ahora que vi tu video ,estoy tranquilo ,excelente explicación, muchas gracias!!

[@ldiazortiz]

Tus vídeos son magistrales. Por favor prepara de Javascript puro desde cero.

[@michox7]

Si por favorrrrrrr

[@publimagenperu]

EXCELENTE TUTORIAL, MUY BUENO!

[@estelavillarreal2968]

Mil gracias, me ayudó mucho tu vídeo

[@DefaultName-kj3xy]

Muy bueno su vídeo. Gracias

[@curaciondecancer]

Muy buen video, bien explicado

[@KARUSDD1]

excelente video y explicación!!

[@jamelqui]

Gracias! Me fue muy útil

[@AlfTrucas]

muchas gracias yoelvis¡¡ a mi me has ayudado mucho¡¡¡

[@gposoft]

Excelente maestro ! gracias

[@gustavobirman8027]

Muy buen video.Sos un capo!!

[@galoboni]

Me encanto el video la verdad, quería ver si hay extensiones php pero salí satisfecho.

[@EddyTunki]

Estuvo muy explicado. gracias

[@josuevenom0646]

saludos crack desde costa rica , sigue adelante con esos videasos !!

[@josefranciscocortezmontano997]

eres un pro we xd primer vídeo que veo y te ganaste un suscriptor y un pupilo saludos

[@waltercaceres1144]

Gracias por la enseñanza y ayuda 🇦🇷👍👏👏👏🤓

[@Ostoveni]

Muy buenos consejos de atajos.

[@mujeresdesarolladoras3822]

GRACIAS, muy completo.

[@thenix77]

Gracias por tu dedicacion, una guia de react-table filtrando paginando agregado botones funciones

[@meditacionyarmonia4932]

Excelente, gracias!👍

[@yenielceperorosa402]

Genial, todo se entiende muy bien👍

[@YoelvisM]

Que bueno, saludos mi hermano!

[@jhonsz8526]

Buen video me ayudara a tener un espacio de trabajo mucho mejor

[@LordKaos666]

Justo lo que buscaba para romper el hielo con el VS Code. Gracias!

[@joseantonioamayapostigo2542]

Excelente explicacion

[@seyckermerlonina4966]

Wao vscode fue el primer idea que conocí desde que aprendí a programar, buen editor pero muy lento,ahoraque conozco neovim Me quedo con este ultimo, muy flexible y customizable

[@hugocarmona995]

Gracias por tu conocimiento..

[@c.penalba3024]

Thanks bro that was really helpful

[@caboneitor2852]

Muchas gracias 😁😁

[@luiscampos6064]

Muy completo el video, generalmente en esta plataforma rondan tutoriales de VSCode para cambiar el tema y colocar fonts con ligaduras,etc pero aqui ya se deja el editor a punto. A esta config solo le agrego desahabilitar telemetria y me gustaría si para el proximos video - segunda parte, se puede ver un poquito más de ESLINT aparte de la instalación además de Debug y Git. Nuevo suscriptor saludos!

[@YoelvisM]

Gracias Luis, justo ahora estoy preparando un video sobre Debug y después hablaré de Git. Saludos

[@juansuarez8529]

Muy Bueno . Gracias

[@krizthiandaniel7326]

Thank you so much this helped a lot!!!! You saved my life

[@ronaldcanales9572]

muy buena explicacion

[@josejesusteixeirarojas2944]

muchas gracias!!!

[@pedro-jesuspastormunoz9792]

Muchas grscias!!!

[@gomz810]

es oro molido, me hubiera gustado conocer el 80% de las extensiones desde el comienzo. 👍

[@juanpablocalderon2133]

Exelente video, toma tu like buen hombre😇😅

[@lautaroexequielfernandez5427]

Grande yoelvis! Saludos desde Argentina.

[@YoelvisM]

saludos Lautaro!

[@miguelangelherreraromero4833]

THANK YOU SO MUCH IT WORKS FOR ME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[@endersonmarin4035]

Yoelvis excelente, gracias por compartir tus conocimientos, podrías hacer un tutorial de deploy de una web nodejs, express, postgresql, en Railway como alternativa a heroku. Muchas gracias

[@luisaareiza5095]

Nice tutorial Micheal, great video to get us started. May you tell - how do I link two or more channels (in the rack channel) as to share the sa

[@carvaz3762]

¡Gracias!

[@YoelvisM]

Muchas gracias!

[@amildocalderon7181]

Everything works perfectly

[@renatoalcedom.7467]

Yoelvis! Espero puedas sacar un curso de javascript pronto, saludos!

[@deyaniraconsuegra1354]

Hola, me gusta como dicta la clase, intente seguir todos los pasos pero al final no logre lo mismo. La verdad yo nunca he estudiado programación y no se nada de CSS y HTLM, pero decidí hacer paginas web y me gustaría aprender para poder mejorar la visión en todos los dispositivo la web... voy a intentar de nuevo pero me gustaría saber si tienes una clase donde iniciar y prepara la carpeta donde se genera los codigos

[@YoelvisM]

Tips para Mac 🍎 Abran las preferencias del sistema (Van al ícono de la manzana y le dan a System Preferences), seleccionen Keyboard y activen "Use F1, F2, etc. keys as standard function keys", y después van a Shortcuts > Input Sources y desmarcan "Select the previous input source". De esa manera podrán usar mejor las teclas de función y la combinación "Ctrl + Espacio". En vscode abran la paleta de comandos (Cmd + Shift + P), escriban y seleccionen "Install 'code' command in PATH" para que puedan usar el comando "code" desde su terminal.

[@jimmycruz3321]

Hola tengo problemas para configurarlo para PHP, asi que volvi a brackets, podrias hacer un video de configuracion?

[@bitdefe]

tk bro

[@samuelluengas4042]

hola, en dado caso que escoja mal una sugenrencia hay algun comando para poder escoger de nuevo sin tener que deshacer la accion, osea solo selcionando la palabara y que me aparescan de nuevo todas las opciones?

[@carvaz3762]

Hola Yoelvis te felicito por tu magifica presentacion y explicacion de las bodades de Visual Studio Code, eres bastanrte concrto y muy acertivo en tus comentarios. Soy un principiante en este ambito aunque si tengo bases de progamacion muy basicas.. Solo me podrias decir si PYTHOM es compatible con VISUAL ESTUDIO CODE ??? Agradeceria mucho tu respuesta muchos saludos.

[@YoelvisM]

Buenas, si, Python es compatible, solo debes instalar algunas extensiones para que te funcione todo bien

[@TheAlexvargasDj]

works gj

[@LipDGtal]

Desde Cuba

[@juancarlosbarrancos8153]

excelte como lo esplicas yo me estoy formado en el tema de programar

[@LaTesea]

Ese nombre me dijo: es mi compatriota ❤Gracias

[@emfelpeto]

Gracias por el video. No he tenido tiempo de verlo completo, pero me gustaría saber si podés explicar cómo evitar que el plugin Prettier descolapse el código sass cuando salvo los cambios... Pido perdón si lo trataste en este video, de lo contrario, podría ser acá o podrías este tipo de tips hacer los videos shorts esos que andan de moda ahora entre los grandes youtubers como vos 😄

[@YoelvisM]

Hola Ernesto, creo que tu respuesta está por acá: prettier.io/docs/en/ignore.html Saludos!

[@YoelvisM]

puedes comentar la línea que quieres ignorar y listo: /* prettier-ignore */

[@adrianespinoza8862]

Cual es la manera de poner el botón de Play al lado derecho para ver el outcome del código que se escribe? No se si se puede aqui en VSC.

[@fabriziopinanez8770]

Buenas, la segunda línea dentro de las etiquetas de no me sale, como se podría solucionar eso?

[@AlexMSian-cu8cd]

Yo tuve problemas con VS. Me desequilibra la batería de mi laptop. Y obviamente me dura mucho menos la carga. Tuve que cambiar a Sublime text

[@rodakvegas1114]

Hey Bro, Don't talk down to yourself like that. believe in yourself and don't let nobody change your mindset of that!

[@rodrigogimenez9888]

Hola, tengo un problema con la extension live server. No abre la pagina web. Desintale el programa por completo varias veces y probe varias cosas y no logro que funcione, recientemente configure el path en las variables del sistema para usar python. Tendra algo que ver? Tengo windows 7

[@victorhechavarria333]

Hola amigo. Excelente video, todo muy claro. Soy principiante en esta esfera, la cual me gusta mucho. Tengo algunos proyectos basados en las explicaciones de sus videos. Ultimamente no puedo codificar en ellos, no puedo codificar. quisiera que me orientara en este sentido como puedo solucionar este problema. Yo utilizo el sistema operativo Mac. muchas gracias y agradecido de antemano. Mis felicitaciones por sus videos y la ayuda que brinda a los demás

[@YoelvisM]

Hola Victor, que bueno que te gusta la programación, me podrías detallar por qué no puedes codificar en mac?

[@victorhechavarria333]

@@YoelvisM Gracias por tu atención. El problema está en que no puedo escribir códigos en ninguno de los proyectos, incluso siguiendo la explicación que ofreces en el video, cuando llega la parte del atajo de emmet con el signo de admiración, no puedo ejecutar la acción . Me sale siempre un cursor grueso y parpadeante inamovible. No se si sea problemas de configuración o que el sistema operativo no es compatible. Todo comenzó cuando instalé la nueva versión de vs Code. Anteriormente este problema nunca se me había dado. Realmente no se que pasa y quisiera si fuera posible que usted me ayudara en ese sentido. Le repito que soy un principiante que incursiono en este mundo hace muy poco tiempo y para mi es muy cautivante. Nuevamente muy agradecido y espero que hayas comprendido donde radica la causa del problema.

[@YoelvisM]

@@victorhechavarria333 primero te recomiendo que intentes actualizar vscode, le das a la ruedita de abajo a la izquierda le sellecionas "check for updates", que ya el problema que me comentas estaba pasando con una versión de vscode, pero ya lo corrigieron. De todas formas siempre podrás lanzar las sugerencias presionando "Ctrl Espacio", si eso no te funciona, fíjate en los tips para mac que compartí en otro comentario acá abajo. Saludos!

[@YoelvisM]

@@victorhechavarria333 yo actualmente trabajo con mac y todo me funciona bien, el tutorial lo hice con otra laptop que tiene windows porque es lo que usan la mayoría de mis suscriptores, pero mac anda perfecto.

[@victorhechavarria333]

@@YoelvisM No dudo que te funcione excelentemente. Gracias por tus recomendaciones. Te comento que ayer comenzé a experimentar con el teclado, oprimiendo diferentes teclas desordenadamente. Creo que halle la solución. Resulta que en la barra de estado de vs Code, en el extremo izquierdo me aparece la palabra"Normal", en las versiones anteriores esto no aparecía. Resulta que apretando las teclas desordenadamente, las letras aparecían en la barra de estado que parta mi también era algo nuevo. Al teclear el la letra "S" veo que la palabra "Normal" cambia a "insert" y al mismo tiempo cambió la forma del cursor. Desde este momento pude introducir los códigos y hacer los cambios necesarios en los proyectos. Esta función de la tecla "S" la desconocía. Creo que esa fue la causa principal del problema: el desconocimiento. Felizmente pude resolver. Muchas gracias por su tiempo y sus recomendaciones. Te digo que he visto muchos videos de programación en youtube y los suyos son tremendamente explicativos motivaciones y lo principal que aprendes con ellos. Mis felicitaciones por su dedicación y por brindar sus conocimientos desinteresadamente. Seguiré siguiendo sus materiales y si aparece alguna duda sin falta consultaré contigo en primer lugar. Muchas gracias y muy agradecido.

[@FNokeru18]

llevo tiempo preguntándome si el cierre automático de etiquetas no se puede desactivar. Particularmente a mi se me hace un poco molesto porque tengo la costumbre de escribir las etiquetas de apertura y de cierre por experiencia previa en otro editor ¿Cómo desactivo ese atajo?