112

Los mejores 15 plugins de VSCode para frontend

41341Puntos

hace 25 días

Curso de Prework: Configuración de Entorno de Desarrollo en macOS
Curso de Prework: Configuración de Entorno de Desarrollo en macOS

Curso de Prework: Configuración de Entorno de Desarrollo en macOS

Aprende a configurar tu computadora Apple para un entorno de desarrollo profesional en el sistema operativo macOS. Instala las principales herramientas de desarrollo y prepara tu equipo para iniciar la escuela de desarrollo web.

Visual Studio Code fue creado por Microsoft en el 2015 y desde entonces su popularidad ha ido en aumento. Gracias a que es open source, la comunidad ha desarrollado muchísimos temas y extensiones para poder personalizarlo a niveles impensables.

Es por eso que quiero hablarte de 15 extensiones para VSCode que yo utilizo en mi día a día como Full Stack Developer, para realizar mi trabajo de una forma más eficiente, ágil y productiva.

1. Error Lens

Error Lens es una extensión que te mostrará alertas en tiempo real mientras trabajas en tu proyecto de turno en el desarrollo web. Esta te permitirá reducir al máximo los errores de tipeo.

Untitled.png

2. IntelliSense for CSS

Te genera recomendaciones en tu código HTML de las clases que ya definiste previamente en tu archivo CSS. De esta forma asignarás las clases que desees de una forma más rápida y eficiente.

https://i.imgur.com/5crMfTj.gif

Con esta extensión podrás recordar todas las clases de CSS que escribiste.

3. JavaScript (ES6) code snippets

JavaScript (ES6) code snippets proporciona fragmentos de los códigos más usados en JavaScript bajo el estándar ES6. Con esta extensión instalada solo debes escribir el atajo y pulsar la tecla tab para que haga su magia y genere todo el código que desees.

https://media.giphy.com/media/KIpW2DgUBm9nFIUf0J/giphy.gif

Tiene soporte tanto para JavaScript como para TypeScript, así que la puedes utilizar cuando la necesites.

4. Markdown Preview Enhanced

Markdown Preview Enhanced es una extensión que mejora la vista previa de los archivos markdown y que te permite tener una mejor experiencia al escribir este tipo de archivos.

Untitled 1.png

5. Import Cost

Import Cost es una extensión que te muestra el tamaño del grupo de datos que estás importando y es muy útil si quieres mejorar el rendimiento de tus aplicaciones.

https://citw.dev/_next/image?url=%2fposts%2fimport-cost%2f1quov3TFpgG2ur7myCLGtsA.gif&w=1080&q=75

6. Auto Rename Tag

Auto Rename Tag te permite cambiar el nombre de las etiquetas HTML de apertura y de cierre con una sola edición. Este plug-in de VSCode también reduce los errores al cambiar el nombre de las etiquetas.

https://media.giphy.com/media/OmGzkVyVVYPDTSV7EB/giphy.gif

7. Auto Close Tag

Auto Close Tag añade automáticamente la etiqueta de cierre para HTML/XML, exactamente como hacen otros IDEs, optimizando la velocidad de escritura de estos lenguajes de programación.

https://media.giphy.com/media/B7iEWvcoOXHGD2LfZg/giphy.gif

8. Live Server

Live Server ejecuta un servidor local de desarrollo con la función de auto recarga para páginas estáticas y dinámicas. De esta forma no tendrás que estar actualizando tu navegador para ver los cambios, estos se aplicarán en automático.

https://raw.githubusercontent.com/ritwickdey/vscode-live-server/4f51bb70e4a8c25fb349776c3ef64f4470f3ed42/images/Screenshot/vscode-live-server-animated-demo.gif

9. Live Share

Live Share es una extensión que te permite enseñar en tiempo real tus proyectos a otras personas. También puedes compartir código con esta herramienta para editar y trabajar colaborativamente en sesiones de depuración, instancias de la terminal y más.

Untitled 2.png

10. Code Runner

Code Runner te permite ejecutar un fragmento de código desde VSCode y tiene soporte para muchos lenguajes de programación.

https://github.com/formulahendry/vscode-code-runner/raw/HEAD/images/usage.gif

11. GitLens

GitLens te permite navegar rápidamente entre los cambios recientes realizados en el código que estás trabajando, también puedes ver quién, por qué y cuándo se editó.

Untitled 3.png

12. WakaTime

WakaTime es una extensión que te permite conocer las métricas, perspectivas y seguimiento del tiempo que inviertes en tus proyectos. Es decir, te enseña la forma en que trabajas.

Untitled 4.png

13. Settings Sync

Settings Sync es una de mis extensiones favoritas porque me permite tener un respaldo de toda la configuración de VSCode en un Gist de Github. En este se guarda la información de modo privado y se actualiza constantemente.

Untitled 5.png

14. Python

Python es una extensión de VSCode con un soporte amplio para Python, incluye características como IntelliSense (Pylance), linting, depuración, navegación de código, formateo de código, refactorización, exploración de variables, pruebas y más.

https://raw.githubusercontent.com/microsoft/vscode-python/main/images/ConfigureDebugger.gif

Si usas Python en tu día a día esta extensión es esencial para tu editor.

15. Activitus Bar

Activitus Bar es una herramienta bastante simple que traslada la barra de navegación lateral, que viene por defecto a la parte inferior de la ventana, para aprovechar mejor el espacio en el área de edición de código.

Untitled 6.png

Bonus: GitHub Copilot

GitHub Copilot es tu nuevo asistente para generar código de forma autónoma, tú solo tienes que escribir las primeras líneas de código y esta herramienta hará el resto.

Copilot adquiere el contexto del código en el que estás trabajando a través de comentarios, nombres de funciones, etcétera y te sugiere líneas de código completas en tu editor, en este caso: VSCode.

https://media.giphy.com/media/bRVvDmTKg0KCR8r0dr/giphy.gif

El propósito de esta extensión es ayudarte a descubrir rápidamente alternativas para resolver problemas o explorar una API sin tener que buscar respuestas en otro sitio que no sea tu editor.

Cuéntame, ¿cuál es tu extensión para VSCode favorita?

Ahora tienes una lista de extensiones para VSCode que en conjunto con tus habilidades te permitirán crear cosas increíbles de la mano de tu editor. Es momento de que decidas cuál plug-in quieres instalar, ensuciarte un poco las manos y practicar.

Recuerda compartirme en los comentarios tu extensión favorita y si utilizas otra, ¿por qué debería de ser un must para otros desarrolladores? Déjala también en los comentarios para probarla.

Y no solo eso, si quieres aprender como tener un entorno de programación listo para cualquier situación te recomiendo que le eches un ojo al curso de Prework: Configuración de Entorno de Desarrollo en macOS, o en el de tu sistema operativo de preferencia.

Recuerda, no pares de aprender y compartir 💚

Curso de Prework: Configuración de Entorno de Desarrollo en macOS
Curso de Prework: Configuración de Entorno de Desarrollo en macOS

Curso de Prework: Configuración de Entorno de Desarrollo en macOS

Aprende a configurar tu computadora Apple para un entorno de desarrollo profesional en el sistema operativo macOS. Instala las principales herramientas de desarrollo y prepara tu equipo para iniciar la escuela de desarrollo web.
Alex
Alex
alexcamachogz

41341Puntos

hace 25 días

Todas sus entradas
Escribe tu comentario
+ 2
Ordenar por:
11
21944Puntos

Te presento:

2 de mis extensiones favoritas en VsCode (que no se han mencionado):

  1. Ident Rainbow: Esta extensión colorea la identación, alternando cuatro colores diferentes en cada paso. La puedes encontrar aquí
ident.png

  1. Trailing Spaces: Lo que hace esta extesión es poner de color rojo cualquier espacio en blanco que normalmente sea invisible, para que los puedas borrar 😃. La puedes encontrar aquí
TRAILING SPACES.png

Made with 💚 by Aldo Ortiz

3
41341Puntos
24 días

Buenísimo, gracias por compartir 😄

La de trailing spaces antes la usaba, pero con una buena configuración del linter ya no te tienes que preocupar por eso, ya que al guardar el archivo automáticamente se formatea y se borran los espacios en blanco 😄

2
21944Puntos
24 días

Oh no sabía, en realidad no he usado linter antes, pero imagino que cuando lo use entenderé 😃.

1
10853Puntos
24 días

Genial, tomare la primera!

7

Descargue el Copilot hace como 2 mes y medio y es la mejor cosa que existe para desarrollo, Es de verdad increible en todos los lenguajes que he utilizado (Java, Javascript, Css, Html y Python) Ademas que ayuda a crear data de prueba cuando la quieres quemada, me genero 100 registros diferentes de ciudades de colombia y divisas en menos de 5 minutos.

1
2191Puntos
23 días

Sólo mencionar que para utiliizar Github Copilot se tiene que tener acceso a la preview.

1
2246Puntos
22 días

una muy buena herramienta

6
3021Puntos

Settings Sync es una configuracion que ya incluye VS Code 🤘

2
1111Puntos

Estuvo bueno, Gracias por la información

2
38504Puntos

Excelente, algunas las había visto, pero no sabía como se llamaban, gracias Alex ❤️

2
4202Puntos

Muchas gracias por el aporte, me descargue algunas que me parecieron perfectas para mi aprendizaje.

2
4344Puntos

Súper aporte, creía que lo tenía todo, pero me doy cuenta que no, muchas gracias por compartir ♥

2
1364Puntos

Considero que Braket Pair Colorizer debería estar en este top.

2
41341Puntos
23 días

Esta extensión se encuentra actualmente deprecada por su autor, ya que ahora esa funcionalidad fue incluida por VSCode de forma nativa 😄

Screen Shot 2022-04-25 at 10.18.48.png
2
3499Puntos

Gracias por el aporte Alex, valoro mucho la extensión Error Lens
Saludos desde Argentina
Franco

1
5391Puntos

Gracias, por la información, IntelliSense for CSS me ha ayudado mucho.

1
4420Puntos

Otras extensiones
Cloak -> Oculta/muestra los valores de los archivos .env
DotEnv -> Muestra la sintaxis de los .env

1
9844Puntos

excelente post!!! 😄

1
14682Puntos

Wow ahora que estoy explorando JamStack estos plugins me vienen de 10. Gracias!!

1

A Couple name generator is a specific tool that is designed to create the best names by combining the names of husband and wife. With this tool, you can get a huge list of perfect names that you can use to label your couple.

1
5804Puntos

Muchas gracias por el aporte 😃.

1
30737Puntos

Github Copilot es una joyita, súper recomendado :3

1
10853Puntos

Excelente Aporte, me llevo por lo menos 5 extensiones.