Las 8 mejores extensiones para potenciar tu experiencia en Visual Studio Code
Summary
TLDREn 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
😀 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.
📈 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.
📝 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.
Mindmap
Keywords
💡Autoclose tag
💡Angular Language Service
💡Angular Extension Pack
💡Tailwind CSS
💡Git Graph
💡Git Convention
💡Code Whisperer
💡Productividad
💡Visual Studio Code
💡Extensión
💡Desarrollador de 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]
浏览更多相关视频
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
Flet Curso: 3 Microsoft Visual Studio Code Como Editor de Código Oficial para Serie de Aprendizaje
CONFIGURAR Visual Studio Code para HTML y CSS 🚀
CONFIGURAR Visual Studio Code para HTML y JAVASCRIPT 🚀
CURSO de CSS 2021 Rapido y Facil # 4 | 💻 EL COLOR
TOP 5 mejores herramientas de DESARROLLO y DISEÑO WEB (2020) 🔥 | Keyquotes
5.0 / 5 (0 votes)