Extensiones de Visual Studio Code QUE DEBES INSTALAR ahora mismo

[@EDteam]

Comienza a estudiar gratis programación y tecnología en EDteam 💻 edy.to/yt y *descubre porque en español nadie explica mejor*

[@Eleve6634]

3:54 Prettier - Formatear el código 5:29 Live Share - En tiempo real editar un mismo código con un compañero 6:32 Gitlens - Herramientas para trabajr con git 8:07 Editorconfig - Configurar un editor con un archivo 9:53 Polacode - Screenshot de una sección de código 10:30 Eslint - Linter para javascript. 12:39 Indent Rainbow - Colores en el indentado 13:47 Live Server - Servidor local 14:42 SVG - Gráficos hecho con códigos

[@roycabrera3464]

gracias por el aporte

[@jeancarlosluciano9211]

Heroe sin capa👍

[@code_castle]

xq esto es lo que hace un verdadero hombre.

[@alexiscalderon1467]

Kappa sin heroe

[@elProdigio]

@@jeancarlosluciano9211 Héroe sin tilde.

[@mirtaarredondo]

Gracias Alvaro! Soy una joven de apenas sesenta años y estoy aprendiendo programación gracias a tus videos claros, didácticos y entradores. Soy profe de robótica y la programación nunca fue mi fuerte. Gracias a ti comprendo mas y me entusiasma estudiar. La pandemia a muchos les resulta pesado. Yo disfruto tus videos y aprendo.Gracias, gracias, gracias

[@willycasana5820]

Wow! 60 años y aprendiendo programación, es inspirador su caso.

[@willycasana5820]

@@flycrack ya esta corregido, gracias.

[@Ivi_Mendieta]

Gran ejemplo de que no importa la edad para aprender , nunca es tarde.

[@jsp2694]

Hola Mirta de donde eres? somos colegas yo también soy prof. de robótica, tenemos un grupo de whasapp de robótica educativa, te puedo pasar el numero del administrador para que te agregue (pasame un correo)

[@redentor1008]

No la conozco señorita pero mi respeto y admiración !,!, hechele y mucho éxito

Recomiendo también: Error Lens: te muestra los errores dentro del mismo código no tienes que esperar alguna ventana flotante. Import Cost: Cuando utilizas librerías y/o framework en import o require te dice cuando es el peso que estás agregando. Debugger chrome o firefox: depende del navegador esto te ayuda hacer debugger de forma más fácil. One Dark Pro: Es un tema chévere pero es más opcional si no les gusta los tema de vscode. vscode-styled-component: si utilizas react y styled component te ayuda mucho para darle estructura. Settings sync: sincronizar tus configuraciones de vscode en tantas máquinas que desees.

[@migueldelahoz4740]

Breakpoint

[@juancaos01]

Gracias!, me sirve

[@edisoft00]

Gracias

[@carmenxita1292]

gracias! one dark pro esta genial :D

[@emiliohenry2890]

Emilio Henry Soy un amante de la programacion, la estudio de forma autodidacta y sus tutoriales han sido de gran ayuda para mi, gracias.

[@jonathanvargasv2009]

Qué alegría saber que existen líderes como usted, apoyando la comunidad de programadores de latinoamerica. Años atrás hubiese querido tener la oportunidad de tener un mentor como vos lo eres para tantos hoy. Aunque llevo años de ser programador, siempre aprendo muchísimo con vos. Saludos desde Costa Rica.

[@omarrosas5524]

Saludos, un hombre tan humilde, sencillo, y práctico en su labor. Vocación pedagógico.

[@rolantb895]

me encanta como EDteam promociona su contenido con conocimiento útil y no con publicidad repetitiva.

[@luisyapuchura5486]

Tienes mucho talento pedagógico...he visto muchos videos...los tuyos son los mejores ....sigue así...saludos desde Bolivia.

[@luzmilenaosorno1174]

soy estudiante inicial de html . estoy viendo tus videos y son muy claros mil gracias por esta razon me atrvo a molestarte , gra cias por tener un metodo tan claro pa ra enseñarnos

[@EDteam]

Si quieres aprender más sobre HTML, ingresa a ed.team/cursos/html y empieza a estudiar 👋

[@titothiago]

Soy el único que se sintió hipnotizado? Posta, voz de locutor. SALUDOS DESDE ARGENTINA

[@alexandercanon84]

Hay uno que me gusta y uso mucho se llama ** Flatland Monokai Theme ** Es el tema más bonito que he podido encontrar pruebenlo, Gracias EDteam !! Saludos desde Colombia.

[@joseraulescalonaaguilera5478]

Excelente... buen aporte para utilidad de los iniciados en programación. Gracias Álvaro.

[@steveo0156]

Muchas gracias por compartir tus conocimientos. Recién empecé a probar VSC y me encantó!

[@FEMARPRO]

Bracket Pair Colorizer Esta es buenísima a mi parecer se parece un poco a Indent Rainbow en su función. Lo que hace esta extensión es colorear los (),{},[] dependiendo a quien pertenezca por ejm: class hola{ constructor(){ } } Las llaves de la clase hola serán amarillos y los del constructor serán morados.

[@FEMARPRO]

Tal vez a alguna persona no les cueste eso pero a otros principiantes tal vez si, además se ve mas bonito el código

[@karimaguirre5017]

Gracias hermano!

[@MaiteCaceres-2345]

Estimado Alvaro & Team,Gracias por la ayuda y enseñanza !!💻👍

[@tonsofcode2478]

Justo lo que necesitaba, mi dosis de EDteam diaria.

[@javifelices]

Extensiones "generalistas" que no dependan de un lenguaje, diría: - Better Comments - Color Highlight - Path Autocomplete - SonarLint - Visual Studio IntelliCode Y aunque al final no sé que tan usable o cómoda será, pero la indico, Peacock, si abrís varias instanacias de VSCode, se le puede dar a cada una un color

[@enriqueatala2567]

muchas gracias por el video, una consulta, como se usa el Indent? Saludos

[@mayannasilvaoliveira3018]

Excelente!!!! Qué software usas para grabar la pantalla de tu computadora?

[@Clip_byte]

Muy bien vídeo de verdad que hará si que seré un poco más rápido, Gracias Álvaro por tus motivaciones, enseñanza de verdad te lo agradezco, sigo tú curso de HTML en tu página y creeme que estoy aprendiendo bastante. Gracias Alvaro

[@elgranvegetajl3249]

muchas gracias por sus aportes profe

[@34Pabl]

Hola queria agregar que tambien es muy util la extension de "Flutter" para desarrollos para equipos moviles que permite desarrollos para Android y IOS al mismo tiempo. Esta extension utiliza el lenguaje Dart que hay que instalar aparte.

[@LuisDanilo95]

Git graph también es útil para visualizar las ramas de un repositorio, commits y demás, es como git kraken pero hecha plugin.

[@carlosj.diazflores2999]

No lo conocia, y esta muy genial !!! Gracias por el dato 👍🏻

[@jonathanalbertoacostallall1367]

@@carlosj.diazflores2999 Hola eso es dentro de vs code no?, no lo podria usar dentro de git bash no es asi?

[@henrycastro2703]

te felicito porque explicas muy bien los temas, y no dejas dudas sobre el alcance de los temas

[@efrainballado4236]

Para cuando la segunda parte de las extensiones, me encanto la primer parte y casi puse todos los que recomendaste pero ya hace falta refrescar a los que pueden ser novedad, espero con ansias la segunda parte. Saludos.

[@PiloGang]

Muchas gracias, tome su clase de HTML y estoy trabajando con vs code para desarrollar la clase.

[@luiscaballero1043]

Acepto que subestime el video antes de verlo, oro puro

[@Antonnyk]

Extensión Comment Anchors, para poner anclas o secciones en los comentarios del código en su fase de desarrollo. Es bastante útil ya que resalta líneas determinadas que puedes encontrar fácilmente en el explorador de la extensión.

[@joseenet]

Muchas gracias por la información, me gusto mucho eso del concepto del Nuevo Microsoft, Saludos

[@mavfabila]

Muchas gracias Alvaro por esta información que ayuda mucho para los que estamos en esto de la programada. Quería aprovechar para preguntarte si eres tan amable de compartir que equipo y software utilizas para realzar estos video en donde aparezcas tu y la pantalla. Muchas gracias de antemano, abrazo desde México!

[@oscarfiblas2096]

Son tan variadas las recomendaciones que hacen los distintos canales que tengo una gran confusión...debería recomendar las básicas (temas de color, iconos, etc) y luego sugerir otras extensiones según el ambiente de desarrollo, unos lo hacen con php, otros con pythom otros php, etc...

[@fabriziolezcano1231]

Liveshare es muy completo, no hace falta usar zoom aparte, porque tiene sus extensiones para el chat dentro de liveshare aparte de poder hablar como si se tratase de una llamada de zoom también. Buscando live share les aparece "live share extension pack" ya les viene la extensión del chat, del audio y el propio liveshare. Además de que el host puede compartir su server, si es que trabajan con localhost o con uno de paga lo mismo, pueden acceder desde liveshare a el servidor y a la base de datos, hacer ediciones y demás y también se puede compartir una terminal

[@andresgroveralbinochambi4589]

Existe otro tambien, CSS Peek, que ayuda a ver el codigo fuente de las hojas de estilo de tu proyecto y editarlo. Ayuda mucho. Un pequeño granito de arena. Saludos cordiales

[@horusblack4889]

Hola gracias por las sugerencias. La mayoría las conocía pero algunas no así que les daré un vistazo. Sobre las que que RECOMIENDO son: *Bookmarks: Marcado de lineas para alguna observación posterior, y una rama para ver todos tus archivos marcados. *css-minify: genera un archivo minificado de algún estilo css que tengamos. *Color Manager: Permite ingresar el código de color que necesitamos en una hoja de estilos mediante un gráfico para mayor facilidad. *TEMAS BONITOS: Horizon Theme, Night Owl, Noctis, Panda Theme.

[@TheDestUnknow]

Buen contenido Álvaro, los conocí hace 2 semanas y ya me he visto muchos de sus videos, son de mucha ayuda.

[@rfrodrigo7979]

Buenas,muy bueno su canal! Mi consulta es la siguiente,baje la versión 2022 y no encuentro esas extensiones,sabría decirme cómo encontrarlas o que nombre llevan ahora?

[@gaboexodia]

Amigos liveshare tiene opción de audio integrado, no hace faltar complementar con una app de llamadas

[@soyfernandopatricio]

Como dicen es el mejor editor y sigue mejorando, una opción que se viene es la sincronización con cuentas de correo algo súper esperado.

[@brayanvilchezdaga9257]

Ya se puede sincronizar con la extensión sync-setting con GitHub

[@MsRubendaniel]

me encanta VS CODE, otros editores son buenos tambien, pero comparto tu opinion, el mejor editor

[@hector_matias]

tambien puedes instalar live share audio para hablar por ahi mediante llamada o live share chat para tener el propio chat dentro del editor, Muchas gracias por el vídeo no conocía live share, Un saludo

[@yoni07informatico46]

Muchísima gracias Excelentes vídeo, es de muchas ayuda. Bendiciones

[@romerlunar757]

Buenas tardes, caballero podrían explicar comointalar/ configurar /desintalar de Mac

[@erickortiz3301]

Hola que tal mira esta muy bueno el vídeo pero la pregunta puedo utilizar las misma plugin o extensiones de sublime texto con visual estudio code por ejemplo emmet, y entre otros que no mencionaste para ayudar en la habitación y escritura de código para html,vas, javascript, php y entre otros también el auto guardado y debería de ser un vídeo más sobre esas extensiones

[@hectorcuellar9813]

Justo estoy haciendo mis prácticas de sus cursos en VSCode

[@andrescaleno4614]

Hola una pregunta ... Hay que instalar el programa antes de utilizar VScode? Por ejemplo Python o JavaScript. Gracias

[@nifares8744]

@@andrescaleno4614 No para nada solo crea y guarda el archivo con la extensión del lenguaje.

[@lujagose3395]

Excelente video muchas gracias Alvaro

[@sergioraulorozcovalenzuela1743]

me encantan tus videos siento que odias brackets conozco muchos desarrolladores que lo siguen usando

[@joseangellemus5382]

Muchas gracias por el video, EDteam (Álvaro). Recién instalé VS Code y tengo que agregar esas extensiones que sugieres. En los proyectos que estoy trabajando utilizo mucho PHP y he instalado unas extensiones (PHP Intellisense y PHP Live Server), pero no he encontrado cómo configurarlas. La primera es un lint, y la segunda me crea conflicto con el localhost. Ojalá alguien pudiera ayudarme a configurarlas, realmente me sería de mucha ayuda. ¡Sigan creciendo EDteam! Gracias por compartir conocimiento y ayudar a crear un mejor mundo mediante la educación.... NUNCA TE DETENGAS!!! APRENDE, APLICA, PRACTICA!!!

[@rafaelarrietat.7955]

Para poder usar Live Server con PHP tienes que instalar adicionalmente la extension Live Server Web Extension (Chrome), aqui te dejo el link: chrome.google.com/webstore/detail/live-server-web-extension/fiegdmejfepffgpnejdinekhfieaogmj Una vez instalado presiona el icono de la live server en chrome y configura de la siguiente manera: 1. Actual Server Address: la ruta donde tienes tu proyecto (localhost/carpeta_proyecto/) 2. Live Server Address: ruta por defecto que se muestra al ejecutar live server desde VS code (en mi caso es 127.0.0.1:5500/) 3. Activar la opción Live Reload Ahora si desde VS Code, en tu proyecto PHP inicia Live Server, se abrirá una pagina con la ruta de live server por defecto (en mi caso 127.0.0.1:5500/), cambia esa direccion por la de tu proyecto (localhost/carpeta_proyecto/).

[@blackerhawk1508]

16:00 los íconos si, pero y los fondos y las galerias de fotos o carruseles? Según yo basta aplicar tinypng, webp y avif no más. En ese sentido es más importante tener HTTP2

[@mauricioreyes2838]

excelente, Álvaro es de mucha ayuda, saludos desde Colombia

[@EDteam]

Saludos desde EDteam 🤩

[@angelvlkk]

Una pregunta la extención Eslint cuál me recomiendan "Eslint" o "Prettier Eslint" y cuál es la diferencia. Muchas gracias

[@hectororlandocrispens201]

La mejor extensión que he visto hasta el momento es tabnine

[@victormoncayo2878]

Hola... Podrías recomendarme alguna extensión para poder trabajar la parte visual con Java, es decir, manejar ventanas botones y demás?. Algo parecido a lo que tiene Netbeans... Muchas gracias.

[@ramirogonzalez1590]

Buen video edteam... podrían hacer un video mostrando cual es el proceso final del software después de creado? Y mostrar el proceso que se lleva tanto en un lenguaje interpretado como en uno compilado... como haces funcionar lo que haz escrito en otras terminales , hay un proceso de empaquetado ? Y si lo hay ... como es? Gracias

[@marimendoza6499]

Hola tengo este error al utilizar quokka: You may use the "node" setting to configure the location of node. Como puedo resorverlo

[@sorcerereye]

Confirmo que _todas_ las 9 extensiones sugeridas en este video se pueden instalar en VSCodium (la versión completamente open-source de VSCode, ya que la versión que liberó hace poco Microsoft no es completamente libre). Eso sí, el marketplace de VSCodium tiene muchas menos ofertas, supongo qe por el hecho de qe supervisan qe las extensiones de su marketplace sean libres. El único par de variantes fueron: En vez de Polacode fue CodeSnap (funcionalidad la misma con varias personalizaciones, incluso le dan un agradecimiento a Polacode, es de suponer que tiene alguna configuración adicional) y en vez de Live Share fue Code Together (dicen tener soporte multi-IDE o aunque alguno de los colaboradores lo haga desde un navegador)

[@victoraldairgironrodriguez1971]

Wouuu me encanto el video, llevo tiempo buscando un video actualizado de extenciones de VSC y este video es como caido del cielo :D

[@FranzJacanamejoy]

En lo personal me gusta la combinación, entre Visual Studio Code y Windows Subsystem Linux (Shell Ubuntu 18.04) con el complemento Remote-WSL

[@patricioeb]

Buenísimo, gracias. Acabo de instalar el VSC y todo lo necesario para comenzar a desarrollar en Flutter y quisiera conectar mi dispositivo Android (a través de USB o red) para poder probar las apps sin emulador. Me podrías echar una mano o referirme algún tuto. Mil gracias y saludos desde Tenerife.

[@fernandopioli1230]

no supe cómo usar el .editorconfig traté de generar ese archivo pero no se donde debe ubicarse. Muchas gracias Alvaro!

[@leiplumblyco]

muy buenos videos. necesito ayuda , VS code dice: the active code can not provide outline information. tengo Mac catalina. Agradeceria tu ayuda

[@edsontorres3705]

Gracias Alvaro, realmente los contenidos de tu canal son extraordinarios. Saludos

[@yxro-music]

yo tengo mucho tiempo trabajando con phpStorm, me es muy cómodo pero es bastante aburrido, quiero al vscode para uso cotidiano y esto me viene de perlas :)

[@luisrogelio98]

TabNine es super recomendada , es un autocompletado de codigo con inteligencia artificial que en base a lo que esta escrito en tu codigo te da recomendaciones desde metodos a nombres de variables hasta lineas enteras que se hacen repetitivas Unica desventaja no es para todos los sistemas ya que tenerla funcionando consume unos 3Gb de RAM por si sola,.

[@dijhonsdeveloper4785]

Hola buenas noches. Hace un tiempo vi, un video en el que explicas sobre node js, como instalar en vsc, no lo encuentro, si tienes el link, y me lo puedes compartir seria de gran ayuda.

[@EdgarDC96_]

Me encantan sus miniaturas.

[@cavetajimmy]

Sigo Aprendiendo cada dia + y +... Gracias por todo :) Lima -Perú

[@luisalbertmorlasanchez3020]

Recomendaría tambien extensiones como: -"Live Sass compiler",de Ritwick Dey, si es que estás trabajando con Sass en un rpoyecto Web. -"Git Graph"para ver como van tus ramas con cada merge, commitss, y todos los procesos involucrados con las ramas, ver archivos cambiados en cada commit hecho y mucho mas, se puede ver como un complemento extra a Git Lens que ya se menciona en el video.

[@linpipe]

Live Share Audio agrega funcionalidades de voz a Visual Code, buena combinación para Live Share.

[@hectorandrehuambachanotorr3281]

Buenas tardes Álvaro. ¿Es lo mismo extensión y plugin?

[@jhon_kennedy95]

Excelente dato, recién me uno pero a ustedes, son los mejores. Gracias EDteam !!!

[@mf-11111]

GENIO!!! Que grandee! Te ganaste un subscriptor más, tus videos son lo más! Enserio, sigue así ;) Te dejo tu merecido LIKE

[@damien4734]

Excelente vídeo.!. Alvaro podrías hablar sobre PWA o Progressive Web App, sus características y vías para su desarrollo, ademas de su participación actual en el mundo laboral y en el desarrollo web, por favor.

[@williamswilmanalvarezzabal6064]

Live Share! Andaba buscando algo así! Muchas gracias!

[@arielmmos]

Como haces el foco en el cursor del mouse cuando señalas la pantalla, se ve un circulo claro con sombra por fuera?

[@الحقائقمؤلمة]

Una pregunta: Instale VSC en la particion D del disco en windows 10 y cuando quiero ejecutar un codigo en HTML o JS me sale el mensaje : "'node' is not recognized as an internal or external command," ¿que hago para eliminar ese mensaje y que funcione el codigo?

[@christian-b9m2j]

Muy buen video, saludos desde México!!!

[@leontelarrauri2988]

Live Server, hace lo mismo que usar XAMPP modificas el codigo y lo ve inmediatamente.

[@totimang]

muy buenas las extensiones, gracias por compartirlas!

[@bl3ssedc0de]

Mi humilde recomendación *Settings Sync:* _Sincroniza todas sus extensiones VScode, configuraciones, Snippets y Themes usando GitHub Gist._ marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync *MySQL Client for vscode:* marketplace.visualstudio.com/items?itemName=cweijan.vscode-mysql-client *Kite Python Autocomplete:* marketplace.visualstudio.com/items?itemName=kiteco.kite

[@jairoantoniorohatanzapata9617]

Yo lo uso y es muy interesante. buen video

[@mariadc3917]

Hola! Gracias por la información. Una pregunta, es importante instalar V s intelliCode?? Esta ext es de Microsoft

[@richardgiraldo363]

grandes videos soy un nuevo suscriptor recien hace como 1 mes y waooo me sorprende la calidad de sus videos y grandes enseñanzas , una consulta con que programa usas para grabarte y poner tus presentaciones?

[@mapse.online]

Perdón por no saber. ¿Cómo ejecuto el código ya armado en vstudio y como lo voy guardando?

[@afmartinezv]

Seria interesante que incluyeran en este canal el formato podcast, una trasmision en vivo de aprox una hora, creo que le añadiria mas dinamismo a todos estos temas

[@jorgedu74]

Suelo utilizar Sublimetext, y una característica que me gusta cuando doy mis clases es que puedo incrementar o reducir el tamaño de la letra con Ctrl+Rueda del mouse. Esta acción la intente hacer en VS Code pero resulta que también se amplió los botones laterales. Conoces de algún mecanismo para manipular el tamaño del texto rápidamente porq la verdad me atrae bastante este nuevo editor. Gracias por compartir tu conocimiento 👍

[@joelarraez2345]

Toca ir a la configuración y cambiar tamaño de fuente

[@pired4559]

Ctrl + Tecla + o Ctrl + Tecla -

[@TheStarlinSoxShow]

Hola a todos soy nuevo el en canar, mi pregunta es, ¿Que programa es mejor para hacer una bases de datos para teléfono y que tengas su propia ejecución.

[@eduardomorenopalacios8779]

Saludos Genial trabajo que hacen, cuidense mucho

[@alexisotsa]

Aunque Gitlens me gusto bastante, deje de usarla cuando perdí trabajo (un par de horas), se ve que se fue a stash y no tuvo un buen manejo del mismo la extensión, buscando soporte vi un caso de una dev que perdió 2 meses de trabajo. Con cuidado nomas.

[@FJMD1987]

Felicidades por el Video!

[@willyfigueroa6389]

Me encanta Visual Studio tambien!

[@Terzaghi12]

Hay uno que se llama que "Bracket Pair Colorizer" te pone de color los paréntesis y llaves para que sepas por color que llave o paréntesis es el cierre de otro que esté por ahí marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

[@ignaciomarcos6378]

me gustaria que hicieran un video de como cargar extenciones de vhdl y hagan una simulacion ya que no he encontrado contenido de esto y creo que es algo util el trabajo con las cpld

[@victoriarodriguez2137]

Me ha encantado Polacode!!

[@gabrielalejandrobernalpere3018]

Pandoc también es buena para renderizar Markdown

[@mateubeltranabella3673]

Estoy empezando con el visual studio code y me parece realmente bueno. las extensiones como liveserver, eslint, coderunner.... Estan muy bien. No sabia lo del svg en extension tiene muy buena pinta... Soy mucho de corel draw, y tambien utilizo muchisimo inkscape... Mi pregunta es. Se podria diseñar un pagina web con inkscape y luego pasarla al visual studio code para ponerle etiquetas y demas ??

[@cdkr0]

Hola... cual es hoy por hoy el mejor editor para Python y sus extensiones?

[@nifares8744]

Buen video *Muchas Gracias* por el contenido EDteam, saludos desde Honduras.

[@josegarita939]

Señor Ed. muchas gracias por todas esa información tan instructiva. Una pregunta; como puedo normalizar el tamaño de la plataforma del VS CODE EDITOR?. Hace varios dias trate de minimizar lo pero se engrandeció de tal modo como un 500%, he tratado muchas formas de volverlo al tamaño normal pero imposible. Muchas gracias amigo. Saludos desde COSTA RICA.

[@danisabadiabejarano6873]

No sé si puedas conseguir la extención de brackets la de vista previa dinamica, he visto similares en visual estudio pero la de brackets de muestra en tiempo real cual es la etiqueta que tienes seleccionada la encierra en azúl y eso es bastante util cuando tienes una pagina con mucho codigo, hace lo mismo que hace el modo desarrollador de chrome, he estado buscando mucho y no he podido conseguir una.