Las 8 mejores extensiones para potenciar tu experiencia en Visual Studio Code

Summary

En este video, el canal de YouTube de Dominic Cod presenta una serie de extensiones de Visual Studio Code que pueden mejorar significativamente la productividad de los desarrolladores. Se destacan extensiones como 'Autoclose Tag' para facilitar la edición de etiquetas HTML, 'Angular Language Service' y 'Angular Extension Pack' que ofrecen un conjunto completo de herramientas para desarrolladores de Angular, incluyendo snippets, autoimportación y generación de componentes. Además, se menciona la extensión para Tailwind CSS, esencial para los amantes de esta biblioteca de utilidades de CSS, que ayuda a identificar y aplicar clases de manera eficiente. También se aborda 'Git Graph', una herramienta gráfica que simplifica la navegación entre ramas y la gestión de historial de cambios en proyectos con múltiples ramas. Finalmente, se destaca 'Code Whisperer' de Amazon, una extensión de autocompletado de código que aprende del usuario y ofrece sugerencias de código personalizadas. El video concluye con una invitación a suscribirse al canal para recibir más recomendaciones y consejos útiles.

Takeaways

• 📺 La extensión 'autoclose tag' permite el cierre automático de etiquetas HTML, facilitando la edición de código.
• 🚀 La extensión 'angular Language service' mejora la experiencia de edición de plantillas de Angular, ya sea de forma integrada o externa.
• 🧩 'Angular extension pack' es un conjunto de extensiones esenciales para desarrolladores de Angular, incluyendo snippets, autoimport y schematics.
• 🎨 La extensión para Tailwind CSS es imprescindible para aquellos que utilizan esta biblioteca, ayudando a seleccionar y aplicar clases de manera eficiente.
• 🌟 La extensión 'Git Graph' visualiza y navega por las ramas de Git de manera gráfica, facilitando el trabajo en proyectos grandes y complejos.
• 🔍 'Code Whisperer' por Amazon es una herramienta de autocompletado de código que aprende del historial de edición del usuario para ofrecer sugerencias precisas.
• 🔗 Se recomienda suscribirse al canal de YouTube y activar la notificación para no perderse ningún contenido.
• 📝 La extensión de Git también facilita el uso de convenciones de commit, como 'git conventional', con una interfaz gráfica para estructurar mensajes de commit.
• 🔗 Enlaces a todas las extensiones mencionadas se proporcionarán en la descripción del video para facilitar su instalación.
• 🤖 Code Whisperer requiere una cuenta de Amazon Web Services para su funcionamiento y aprende del código base del usuario.
• 👥 Se anima a compartir el contenido del video con colegas y compañeros de trabajo para mejorar la productividad en equipo.

Q & A

¿Cuál es la primera extensión de Visual Studio Code que Dominic menciona en su video?

La primera extensión que Dominic menciona es 'AutoClose Tag', que permite el cierre automático de etiquetas HTML.

¿Para qué sirve la extensión 'Angular Language Service' en Visual Studio Code?

La extensión 'Angular Language Service' ayuda principalmente en la parte del HTML, proporcionando una experiencia enriquecida al trabajar con plantillas de Angular, ya sea de manera inline o external.

¿Qué es 'Angular Extension Pack' y por qué es esencial para los desarrolladores de Angular?

El 'Angular Extension Pack' es un conjunto de extensiones de Angular que un desarrollador necesita, incluyendo snippets para crear componentes y servicios, la Language service, auto import y otras herramientas que mejoran la productividad.

¿Cuál es la extensión que Dominic recomienda para los amantes de Tailwind CSS?

Dominic recomienda una extensión no提名ada específicamente en el script, pero es imprescindible para los amantes de Tailwind CSS, ayudando a mejorar la productividad al trabajar con esta librería de utilidades de CSS.

¿Cómo ayuda la extensión 'Git Graph' a los desarrolladores cuando trabajan con proyectos con muchas ramas?

La extensión 'Git Graph' ayuda a los desarrolladores a navegar de manera gráfica entre las ramas de un proyecto, hacer checkout a un determinado commit y ver el historial de un archivo de manera más rápida y fácil.

¿Qué es 'Git Convention' y cómo la extensión mencionada por Dominic puede facilitar su uso?

Git Convention es un conjunto de reglas establecidas para la redacción de mensajes de commit. La extensión que Dominic muestra en el video permite elegir entre diferentes tipos de commits y scopes, facilitando y agilizando el proceso de commit con el formato correcto.

¿Cuál es la extensión que Dominic ha estado utilizando para el autocompletado de su código?

Dominic ha estado utilizando 'Code Whisperer' de Amazon, una herramienta similar a CoPilot que aprende del código del usuario y ofrece autocompletado.

¿Qué es necesario para instalar y usar 'Code Whisperer' de Amazon?

Para instalar y usar 'Code Whisperer', se necesita una cuenta de Amazon Web Services y la configuración es fácil, simplemente buscar la dependencia, instalarla y iniciar sesión con Amazon Web Services.

¿Cuál es el beneficio de suscribirse al canal de Dominic y activar la campanita?

Al suscribirse al canal de Dominic y activar la campanita, los suscriptores no se pierden ninguna de las publicaciones del canal, lo que les permite mantenerse actualizados con las últimas recomendaciones y contenidos.

¿Por qué Dominic insiste en que los espectadores compartan sus videos con compañeros de trabajo o universidad?

Dominic insiste en compartir los videos para que otros desarrolladores también puedan beneficiarse de las extensiones que él recomienda, mejorando así su productividad en conjunto.

¿Cuál es el número de suscriptores que el canal de Dominic tiene según el script?

Según el script, el canal de Dominic tiene más de 990,000 suscriptores.

¿Qué tipo de contenido crea Dominic para sus espectadores?

Dominic crea contenido que ayuda a aumentar la productividad de los desarrolladores, incluyendo recomendaciones de extensiones de Visual Studio Code y otras herramientas útiles para el trabajo diario en programación.

Outlines

00:00

😀 Extensiones de Visual Studio Code para aumentar la productividad

El video comienza con una introducción sobre extensiones útiles para Visual Studio Code. Se menciona la extensión 'autoclose tag' para facilitar la escritura y modificación de etiquetas HTML. Luego, se habla de 'angular Language service', que mejora la experiencia al trabajar con plantillas de Angular. Se recomienda la instalación del 'angular extension pack', un conjunto de extensiones para desarrolladores de Angular, incluyendo snippets, autoimport y otras herramientas para aumentar la productividad. Finalmente, se destaca la extensión para trabajar con Tailwind CSS, que ayuda a seleccionar y aplicar clases de manera eficiente.

05:01

📈 Herramientas para la gestión de proyectos y el control de versiones

El segundo párrafo aborda la extensión 'git Graph', una herramienta gráfica que ayuda a navegar entre ramas de un proyecto y a realizar operaciones de Git de manera visual. Se destaca su utilidad para proyectos grandes y complejos. Además, se presenta una extensión para facilitar la creación de mensajes de commit siguiendo el estándar 'git conventional'. Finalmente, se introduce 'code whisperer', una extensión de Amazon que ofrece autocompletado de código basado en el aprendizaje del usuario a través de Amazon Web Services.

10:02

📝 Conclusión y llamado a la acción

El último párrafo resume las extensiones presentadas y hace un llamado a la acción para que los espectadores se suscriban al canal y compartan el contenido con colegas y compañeros de trabajo. Se enfatiza la importancia de contar con herramientas que mejoren la productividad tanto en el trabajo como al crear contenido. El video concluye con un adiós y un mensaje de despedida.

Keywords

💡Autoclose tag

Autoclose tag es una extensión de Visual Studio Code que permite al usuario escribir automáticamente la etiqueta de cierre de un elemento HTML cuando comienza a escribir la etiqueta de apertura. Esto mejora la productividad al ahorrar tiempo en la escritura de código. En el video, el presentador menciona que este es especialmente útil al modificar un tag existente.

💡Angular Language Service

Angular Language Service es una extensión diseñada para mejorar la experiencia de desarrollo con Angular, proporcionando características enriquecidas al trabajar con plantillas de HTML, ya sea de forma integrada o externa. El presentador la recomienda especialmente para quienes trabajan con Angular y es una extensión fundamental para el desarrollo de aplicaciones en esta plataforma.

💡Angular Extension Pack

El Angular Extension Pack es un conjunto de extensiones de Angular que incluye herramientas esenciales para el desarrollo de aplicaciones con esta tecnología. Contiene snippets para crear componentes, servicios y pipes, la Angular Language Service, herramientas para renombrar tags y autoimportación de módulos, entre otros. El video destaca que este pack es esencial para cualquier desarrollador de Angular.

💡Tailwind CSS

Tailwind CSS es un framework de utilidades para diseñar interfaces de usuario de manera rápida y personalizada. La extensión mencionada en el video ayuda a los desarrolladores a escribir clases de utilidad de Tailwind de manera más eficiente, mostrando información contextual como el nombre de los colores al comenzar a escribir. Esto mejora significativamente la productividad al diseñar landing pages o prototipos rápidamente.

💡Git Graph

Git Graph es una herramienta gráfica que permite a los desarrolladores visualizar y navegar por las ramas de su proyecto de manera más intuitiva. Es especialmente útil en proyectos grandes con múltiples ramas. El video destaca cómo esta extensión puede facilitar tareas complejas de Git, como el checkout a una rama específica o la visualización del historial de un archivo.

💡Git Convention

Git Convention se refiere a un conjunto de reglas establecidas para la nomenclatura y estructura de los mensajes de commit en Git. Esto ayuda a mantener un historial de commit más ordenado y comprensible. La extensión presentada en el video facilita el uso de estas convenciones al proporcionar una interfaz gráfica para seleccionar el tipo de commit y su alcance, mejorando la consistencia y calidad de los commits.

💡Code Whisperer

Code Whisperer es una extensión de Amazon que ofrece autocompletado de código basado en el aprendizaje de máquina. Funciona analizando el código existente y proporcionando sugerencias de autocompletado que se adaptan al estilo y las convenciones de codificación del desarrollador. El video menciona que es una herramienta muy útil que ha mejorado la productividad del presentador al escribir código.

💡Productividad

La productividad es el núcleo del mensaje del video, ya que todas las extensiones mencionadas están destinadas a aumentar la eficiencia y el rendimiento en el trabajo de desarrollo de software. El video ofrece recomendaciones específicas para mejorar la productividad, tanto en la programación como en la creación de contenido.

💡Visual Studio Code

Visual Studio Code (VS Code) es un editor de código fuente desarrollado por Microsoft que es utilizado por los desarrolladores para escribir y editar código en varios lenguajes de programación. El video se centra en recomendar extensiones para VS Code que mejoran la experiencia de desarrollo y la productividad del usuario.

💡Extensión

Las extensiones son componentes adicionales que se pueden instalar en un editor de código, como Visual Studio Code, para ampliar sus funciones y capacidades. En el video, se discuten varias extensiones que son clave para el desarrollo de aplicaciones web modernas y la mejora de la productividad del desarrollador.

💡Desarrollador de Angular

Un desarrollador de Angular es una persona que programa aplicaciones utilizando Angular, un framework de JavaScript para construir aplicaciones web de una sola página. El video se dirige a estos desarrolladores y ofrece consejos y extensiones específicas para mejorar su experiencia de desarrollo en Angular.

Highlights

Autoclose tag es una extensión que permite el autocierre de etiquetas HTML, mejorando la productividad al modificar código.

Angular Language Service es esencial para trabajar con plantillas de Angular, ya sea de forma integrada o externa.

Angular Extension Pack es un conjunto de extensiones para Angular que incluye snippets, Language service, auto import y más.

La extensión de Tailwind CSS es imprescindible para los amantes de Tailwind, ayudando a seleccionar y aplicar clases de manera eficiente.

Tailwind CSS es útil para proyectos rápidos como landing pages o MVP, mejorando significativamente la productividad.

Git Graph es una herramienta gráfica que ayuda a navegar entre ramas de Git y ver el historial de cambios.

La extensión Git Graph también facilita el checkout a ramas específicas y la visualización de cambios históricos.

Git Conventional es una extensión que ayuda a seguir las reglas establecidas para mensajes de commit.

Code Whisperer de Amazon es una herramienta de autocompletado de código que aprende del historial de commits del usuario.

Code Whisperer requiere una cuenta de Amazon Web Services y ofrece una instalación fácil y configuración rápida.

La suscripción al canal de YouTube de Dominic cod es recomendada para no perderse ningún contenido útil.

El canal de Dominic cod tiene más de 990,000 suscriptores, lo que demuestra su popularidad y confiabilidad.

La extensión de auto completado es una de las últimas incorporaciones que ayuda a mejorar la eficiencia en la programación.

La extensión de Tailwind CSS tiene casi 6 millones de instalaciones, lo que indica su gran aceptación y utilidad.

Git Graph ha sido descargada más de 8 millones de veces, evidenciando su eficacia en la gestión de ramas de Git.

La extensión Git Conventional es útil para aquellos que buscan un flujo de trabajo más estructurado en sus commits.

Code Whisperer es una extensión que ha mejorado significativamente la productividad del creador del canal en los últimos meses.

Se recomienda compartir el contenido del canal con colegas y compañeros de trabajo para mejorar la productividad en equipo.

Transcripts

bienvenida Bienvenido a tu canal de

YouTube Dominic cod hay una petición en

el Canal de cuáles son las extensiones

de visual Studio code que estoy

utilizando y te voy a recomendar algunas

de las que tengo instaladas por lo menos

las que yo creo que te pueden ayudar más

con tu productividad Así que

empecemos Hola antes de empezar con mis

recomendaciones te quiero recordar por

favor de hecho es otra recomendación de

que te suscribas a nuestro canal de que

actives la campanita para que no te

pierdas absolutamente nada de lo que

estamos publicando ya somos más de

990,000 personas en el canal lo cual es

una locura de verdad jamás me hubiese

imaginado esto así que te invito a que

te suscribas nada para empezar Eh quiero

empezar con esta extensión que se llama

autoclose tag que tal y como podemos ver

aquí en pantalla lo que te permite es

hacer un aut cerrado de de un elemento

tag de un elemento de html que empieces

a a a utilizar y de hecho cuando yo creo

que es más útil cuando nosotros tenemos

que modificar algún tag que de forma muy

fácil Cuando tú escojas por ejemplo una

p pues lo puedes modificar Esa es la

primera autotag Recuerda que voy a dejar

los enlaces de todas las extensiones que

estoy mencionando aquí debajo en la

descripción de este video la siguiente

extensión de la cual te quiero hablar es

angular Language service nos va a ayudar

principalmente en la parte del del html

nos da una experiencia enriquecida

cuando trabajamos con template de de

angular tanto de manera inline como de

manera eh external Es decir si tenemos

un fichero específico de html esta

extensión yo te la comento por si no

tienes la siguiente extensión que vamos

a ver a continuación Yo te recomiendo

que la instales también eh enlace en la

descripción de este video pero para mí

la extensión que si tú eres

desarrollador de angular no te puedes

perder debes tenerla Sí o sí o sí o sí

instalada

es angular extension pack por qué porque

esta extensión realmente es un

conglomerado es un conjunto es un pack

de extensiones de angular que tú

necesitas tener por ejemplo tenemos las

de angular snippet donde vienen sniped

de de angular para que nosotros podamos

crear un componente un service un Pipe

etcétera etcétera de manera fácil la

Language service que la hemos visto

también el rename de los tag que es muy

parecida a la que yo te recomendé hace

un segundo que es esta que está aquí

también tenemos el auto import para que

importes de manera automática eh los

módulos o ficheros que estés utilizando

etcétera etcétera hay un sin número de

de herramientas

como el autocompletado cuando estamos

intentando importar un un fichero o un

módulo tenemos el autocompletado y

también está el angular schematic que

nos permite de manera rápida con un clic

derecho generar un componente un service

lo que necesitemos entonces realmente

ese pack pues tendrás el snippet y

tendrás el Language service de todas

maneras yo te voy a dejar los enlaces de

manera independiente tanto de esta como

de snip snippet perdón y también de

extension pero yo te recomiendo que

instales esta y ya tendrás todo el pack

de hecho fíjate aquí que tenemos 21

extensiones para todo desarrollador o

desarrolladora angular debes I eh esta

extensión vamos a cerrar esto por aquí

que hemos visto estas tres extensiones y

la siguiente extensión para todos Los

amantes de tawin css es imprescindible

es totalmente imprescindible como puedes

ver aquí en en la demo eh Cuando Tú

empiezas a escribir una una de las

utilities Class que tiene tawin pues por

ejemplo en el caso de los colores ya te

dice el color te dice el nombre lo cual

es al principio te cuesta pero una vez

más o menos sabes cómo se llama el color

que quieres trabajar pues es muy fácil

que ya tu productividad se vea afectada

o mejor dicho incrementada eh Cuando

trabajes con tailwind porque es una

maravilla esta extensión yo la

recomiendo un montón de verdad que me

gusta mucho mucho mucho mucho trabajar

con esta Yo también era un hater de

tailwind y al final he caído en su en

sus manos porque se nota mucho cuando

estás haciendo Por ejemplo una landing o

o quieres hacer alguna demo rápida un

mvp pues con tawin lo puedes tener

rápido y esta extensión te ayuda mucho a

mejorar tu productividad cuando trabajas

con tailin Fíjate que es una extensión

que eh tiene Casi 6 millones de de

instalaciones lo cual es un número

bestial Así que y muy buena puntuación

Así que te la recomiendo hay una cosa

que te quiero comentar es que muchas

personas me han preguntado Cuál es la

extensión que utilizo para el auto

completado que me está ayudando a

autocom Mi código últimamente es la

última extensión no te lo pierdas que

vamos a llegar en breve a esa extensión

Así que atentos y atentas a esa

extensión que para mí es la extensión

estrella de la tarde vamos a cerrar esto

y vamos a ir rápidamente a la siguiente

extensión que es git Graph cuando

nosotros trabajamos en algunos proyectos

principalmente proyectos que tienen

muchas ramas y que son grandes Pues esta

herramienta nos ayuda a de de manera

gráfica a navegar entre comillas entre

ramas del Comic y ver lo que se ha hecho

podemos hacer un checkout a un

determinado Comic de manera fácil de

manera gráfica yo soy un amante de la

consola Pero reconozco que a veces

cuando tengo que hacer cosas mucho más

complicadas suelo utilizar eh Esa

extensión y también cuando Necesito ver

el historial de algún fichero pues

directamente voy ahí y y es mucho más

rápido y Fíjate todo todo lo que puedes

hacer con esta extensión gratuita y yo

creo que aunque también soy de las

personas personas que empuja porque

principalmente las personas que están

empezando en ese sector tiren de de la

terminal con git no soy tonto y

Reconozco que a veces una ayuda visual

es mucho más rápido que intentar hacer

un squatch que intentar hacer cosas

raras desde la consola lo puedes hacer

aquí con uno o dos clic Hay que

aprovechar y maximizar el tiempo e lo

máximo que podamos casi O de hecho casi

8 millones de descargas más de siete y

como puedes ver es muy fácil trabajar es

seleccionar un determinado cómic y crear

una rama desde ese Comic etcétera

etcétera cosas que quizás a veces no lo

hagamos tan a menudo con con git Pues

esta herramienta nos facilita mucho

mucho mucho mucho la vida fíjate como

puedes ir a unos cambios determinados

ver Cuáles fueron los cambios realmente

quién hizo esos cambios etcétera

etcétera si nosotros queremos hacer unos

comics más Pro digamos Pues necesitamos

utilizar realmente el git Convention eh

conventional que es eh unas reglas ya

establecidas de cómo nosotros debemos

formar y crear nuestros mensajes de

Comic pero yo entiendo que a veces

cuesta mucho quizás memorizarlo y es

realmente mucho más ágil hacerlo a

través de esta extensión que te la voy a

mostrar ahora en acción Yo por aquí

tengo unos ficheros que están pendientes

de hacer comit y por ejemplo vamos a

escoger este hago o lo añado al stch

Entonces ahora con esta extensión que

vemos aquí si yo hago con Comic yo aquí

puedo escoger entre un fit un fit un fix

o si es documentación si es estilo o si

es un refactor etcétera etcétera o si es

son test vamos a decir que es una

feature podemos escoger un scope digamos

que el scope será app y a continuación

aquí podemos escoger Incluso si yo busco

por fature Nueva

fature puedo poner una descripción aquí

de lo que he hecho

agregar new

para eh No sé tu handle de color por

ejemplo no recuerdo que hace esta esta

dependencia ahora mismo esta Perdón esta

directiva y eh A continuación si hay

Breaking change no Entonces ese comit ya

se ha ido con el formato correcto del

git conventional que te voy a dejar no

solamente el enlace de esta extensión

sino también de la web de git

conventional donde te va Yo creo que

primero debes echarle un vistazo a esa

web para que entiendas Cómo funciona el

git conventional antes de trabajar con

esa extensión y por fin Hemos llegado a

la extensión que más comentarios estoy

recibiendo de qué estás utilizando para

autocompletar tu código Qué es eso que

utilizas en la línea tal que te

autocompleta etcétera etcétera etcétera

etcétera Pues realmente lo que estoy

utilizando desde hace ya cinco o 6 meses

es el code whisperer de Amazon Es una

herramienta similar a copai p o similar

a No recuerdo el nombre de la de la otra

pero también que es de pago tn si no

recuerdo mal entonces con code whisperer

nosotros podemos de manera muy muy fácil

autocompletar nuestro código si yo por

ejemplo vengo por

aquí este conso lock antes que lo se

eliminó vamos a decir update Hero por

ejemplo aquí fíjate como ya me

autocompleta en este caso el código no

tiene sentido porque me ha repetido la

última línea pero más o menos la lógica

sería la misma aquí en este método de

Modificar un un héroe pero eh esta

herramienta Se puede instalar de manera

muy fácil necesitas una cuenta de Amazon

eso sí una cuenta de Amazon

de pero de Amazon realmente de de Amazon

web service o web Services necesitas una

cuenta y la configuración es muy fácil

es buscar la la dependencia

e instalar esta dependencia y te va a

decir que Inicia sesión Inicia sesión

con con Amazon web Services y ya lo

tienes automáticamente él aprende de tu

cbase en principio no envía nada a

ningún servidor esto es en principio y

ya está luego que la aprende pues te

autogena y te autoayuda a a crear este

código es muy fácil de instalar fíjate

aquí los pasos como está creando el el

builder con Ah Amazon web Services o con

una cuenta de Amazon web service y a a

partir de ahí de cuando tienes tu cuenta

ya realmente él te empieza a hacer

sugerencias modificaciones de tu código

etcétera etcétera etcétera etcétera

etcétera y ya está Entonces hasta aquí

las recomendaciones de mis extensiones

que me ayudan a ser mucho más productivo

no solamente cuando estoy trabajando

sino también cuando estoy creando

contenido para todos ustedes Así que

recuerden suscríbanse a nuestro canal

comparte ese video con tus compañeros de

del colegio de la universidad compañeros

de trabajo para que también tengan las

mismas extensiones que tú y también

puedan ser productivos y productivas sin

más me retiro nos vemos en la próxima

Bye bye

[Música]