Visual Studio Code desde CERO | Configuración, tips, atajos, extensiones
Вставка
- Опубліковано 1 сер 2024
- 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:
ua-cam.com/users/yoelvism?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
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 👨🏻💻
Gracias, gran trabajo!!
HOLA AMIGO ME PUEDE AYUDAR
Muchisimas gracias!!
Muchas gracias, excelente video
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!
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!!!!
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.
Gracias Yoelvis, desde cero, para quienes empezamos. Clarísimo todo lo que explicas!
Muchas Gracias!!!! Había empezado un curso muy básico de visual studio code y con este video pude resolver dudas. :D
¡Gran video! Claro, preciso y conciso
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!
Muchísimas gracias por el tutorial. Bien explicado ✨
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.
Excelentes tips para el uso mejorado del editor.
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!
Muy útil el vídeo mostrándonos todas estas características de VSC. Gracias Yoelvis.
Excelente!! Muy claro y didáctico! Felicitaciones y gracias!!
Hola Yoelvis. Gracias por compartir tus conocimientos. Eso hace grande a una persona. Saludos desde Tucumán, Argentina
Excelente tutorial, muchas gracias!
Todos tus vídeos muy buenos..!
Gracias por todo tu aporte
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.
Muy buen aporte Yoelvis, exelente.
Gracias Elvis, uso el cobalt y nunca habia visto que lo habias hecho vos. Muy bueno!
Excelente información! Muchas gracias
Muy bien video como siempre muchas gracias!!!
Espectacular Muchas gracias Yoelvis!
Muy interesante esos próximos vídeos sobre debug en el VSC para javascript etc.
Excelente tutorial!! Gracias 👍
No sabes lo útil que es tu video, gracias eternas!!!!🤩😍🤩
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!
Muchas gracias por el tutorial, he despejado muchas dudas.
gracias Yoelvis, muy bien explicado!! por fin tengo mi vsc listo !!
Estuvo muy explicado. gracias
Gracias! Me fue muy útil
Gracias por este fantástico video amigoo!! me salvaste genio
muchas gracias por estos atajos!!!
Mil gracias, me ayudó mucho tu vídeo
Muchas gracias, de grandísima utilidad. Gracias.
Muy bueno su vídeo. Gracias
EXCELENTE TUTORIAL, MUY BUENO!
Muy buen video, bien explicado
Excelente explicacion
Excelente maestro ! gracias
Excelente, gracias!👍
Muy buen video recomendado al 100X100,ver hasta el fin INTERESANTISIMO .Saludos
eres un crack, espero que sigas subiendo videos
excelente video y explicación!!
Muy buen video.Sos un capo!!
GRACIAS, muy completo.
Gracias!! me sentia re perdida y tu video me ayudo un moton!
Muy buenos consejos de atajos.
Gracias por la enseñanza y ayuda 🇦🇷👍👏👏👏🤓
Muchas gracias 😁😁
Muy Bueno . Gracias
Gracias por tu conocimiento..
muchas gracias!!!
Muchas grscias!!!
Excelente material, felicitaciones me sirvió mucho.
muy buena explicacion
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!!
Genial, todo se entiende muy bien👍
Que bueno, saludos mi hermano!
saludos crack desde costa rica , sigue adelante con esos videasos !!
muchas gracias yoelvis¡¡ a mi me has ayudado mucho¡¡¡
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!.
Muchas gracias, dentro de poco estaré de vuelta con nuevos videos
Thanks bro that was really helpful
Excelente video, ya agregué todas las sugerencias super util, muchas gracias!
que bueno jeffrey, saludos!
Hace dos días luchando por solucionar un problema y este video me dio la solución. Muchas gracias
Me encanto el video la verdad, quería ver si hay extensiones php pero salí satisfecho.
eres un pro we xd
primer vídeo que veo y te ganaste un suscriptor y un pupilo
saludos
Everything works perfectly
Thank you so much this helped a lot!!!! You saved my life
Buen video me ayudara a tener un espacio de trabajo mucho mejor
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
Exelente video, toma tu like buen hombre😇😅
Justo lo que buscaba para romper el hielo con el VS Code. Gracias!
THANK YOU SO MUCH IT WORKS FOR ME!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
es oro molido, me hubiera gustado conocer el 80% de las extensiones desde el comienzo. 👍
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
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!
Gracias Luis, justo ahora estoy preparando un video sobre Debug y después hablaré de Git. Saludos
Gracias por tu dedicacion, una guia de react-table filtrando paginando agregado botones funciones
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.
Tus vídeos son magistrales. Por favor prepara de Javascript puro desde cero.
Si por favorrrrrrr
¡Gracias!
Muchas gracias!
Grande yoelvis! Saludos desde Argentina.
saludos Lautaro!
tk bro
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
Yoelvis! Espero puedas sacar un curso de javascript pronto, saludos!
Desde Cuba
Ese nombre me dijo: es mi compatriota ❤Gracias
works gj
Hey Bro, Don't talk down to yourself like that. believe in yourself and don't let nobody change your mindset of that!
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
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
Hola tengo problemas para configurarlo para PHP, asi que volvi a brackets, podrias hacer un video de configuracion?
work
excelte como lo esplicas yo me estoy formado en el tema de programar
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.
Buenas, si, Python es compatible, solo debes instalar algunas extensiones para que te funcione todo bien
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 😄
Hola Ernesto, creo que tu respuesta está por acá:
prettier.io/docs/en/ignore.html
Saludos!
puedes comentar la línea que quieres ignorar y listo:
/* prettier-ignore */
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
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?
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
Hola Victor, que bueno que te gusta la programación, me podrías detallar por qué no puedes codificar en mac?
@@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.
@@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!
@@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.
@@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.
Thanks for tNice tutorials content. It was the first soft soft video I've seen that didn't assu I knew my way around all of the functions.
Hola que tal? tengo una duda. PRETTIER trae por defecto una indentacion de (2) espacios y VSC trae (4) entonces cuando usas formatear documento te pone toda la indentacion de HTML a (2) pero luego si seguis escribiendo vuelve a (4) que es la que utiliza HTML, lo que pude hacer es en SETTING poner el TAB en (2) pero como tengo que hacer para que PRETTIER tenga por defecto (4). A alguien mas le paso esto?
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.