10 Plugins o extensiones esenciales de VSCode para Frontends

Curso Definitivo de HTML y CSS

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

Desde hace tiempo trabajo con Visual Studio Code, un editor de código creado por Microsoft que poco ha poco a aumentado su popularidad entre los desarrolladores por su facilidad para personalizar, así como su gran rendimiento.

Es por eso que quiero recomendarte los 10 complementos que utilizo en mi día a día como desarrollador Frontend en Platzi, los cuales me ayudan a realizar mejor mi trabajo, así como tener algunas ventajas para ser más productivo.

Banner prework windows.png

[Lista] 10 plugins o extensiones que utilizo en VSCode

Aquí te va la lista de las que considero son las 10 mejores extensiones para Visual Studio Code.

  1. Babel JavaScript
  2. Color Highlight
  3. ESLint
  4. GitLens
  5. Import Cost
  6. Indent-rainbow
  7. Trailing Spaces
  8. Auto Close Tag
  9. WakaTime
  10. Settings Sync

Entremos más en detalle sobre cada una de estas extensiones.

1. Babel JavaScript

Resaltar la sintaxis de JavaScript, React, Angular, Vue, JSX, Flow y GraphQL, la cual me permite ser más productivo cómo desarrollador JavaScript más dinámico y detectar errores.

https://static.platzi.com/media/user_upload/plugin-babel-vscode-7635aeed-0dc5-4e19-ba04-6354dda9500b.jpg

2. Color highlight

Esta extensión es de mis favoritas, me permite identificar con mayor facilidad los colores que estoy utilizando dentro de mis proyectos en HTML/CSS (También funciona con archivos de Stylus) y apreciar con mayor facilidad el color que estoy utilizando.

3. ESLint

Me permite integrar ESLint dentro de VSCode y con la configuración previa dentro del proyecto, puedo detectar errores en tiempo de desarrollo, es muy útil cuando integras un estándar de trabajo como el propuesto por AirBnb.

4. GitLens

Añada superpoderes a VSCode para trabajar con GIT. Permite crear una auditoria del código a través de anotaciones y nos permite navegar a los cambios por medio de una anotación sobre cualquier línea de código.

https://static.platzi.com/media/user_upload/plugin-gitlens-vscode-b6d194b9-582a-4aa2-9670-a0c1a7b9b598.jpg

5. Import Cost

Esta extensión me permite saber el tamaño del paquete que estoy importando, así como detectar si es demasiado pesado para nuestros proyectos. Saber el tamaño de los recursos que estamos importando nos permitirá entender y trabajar con mayor calidad nuestros proyectos.

https://static.platzi.com/media/user_upload/plugin-import-cost-vscode-eaff6adf-e54a-4717-beb4-b1b3cc9f0f42.jpg

6. Indent-Rainbow

Una de las cosas que más me fijo como desarrollador es tener un código limpio, fácil de entender y bien indentado; es por esto que utilizo este complemento para detectar con mayor facilidad la indentación de mis proyectos.

https://static.platzi.com/media/user_upload/plugin-indent-rainbow-vscode-9f9a81e6-c019-4288-8d04-90d7a5e91f74.jpg

ES7 React/Redux/GraphQL/React-Native snippetsAngular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex LayoutVue 2 Snippets

Como su nombre lo dice nos permite tener una colección de accesos rápidos para construir nuestro código en React, Angular o Vue. Esto te ayudará a automatizar las tareas repetitivas al momento de crear nuevos componentes, funciones y código de en los proyectos.

7. Trailing Spaces

Una extensión muy simple, pero me permite dejar mi código limpio y libre de espacios innecesarios, esta extensión nos marcara en rojo todos aquellos espacios que dejamos dentro de nuestro código.

https://static.platzi.com/media/user_upload/plugin-trailing-spaces-vscode-3a9661a6-a744-47f6-bed2-fd9ab5bb3642.jpg

8. Auto Close Tag

No puede faltar la extensión que nos ayude a cerrar los tags, es muy útil cuando estamos maquetando ya que nos brinda un rendimiento a la hora de crear código.

9. WakaTime

Quieres mejorar tu rendimiento como desarrollador, WakaTime es la herramienta para ti. Nos permite conocer las métricas, perspectivas y seguimiento del tiempo que invertimos en nuestros proyectos. La recomiendo demasiado para entender cómo trabajamos, cuánto tiempo gastamos en un desarrollo y poder llevar un mejor control como desarrollares.

https://static.platzi.com/media/user_upload/plugin-wakatime-vscode-406140b6-7540-40a7-ad45-d44d1eacd8e6.jpg

Bonus: la extensión extra que necesitas

10. Settingns Sync

Esta extensión es mi favorita, permite tener un respaldo de todas las extensiones, configuraciones locales, temas y preferencias de VSCode, utiliza Github Gist donde almacena la información de forma privada, de esta forma siempre tendrás actualizado y en buen resguardo tu configuración favorita.

Y por último…

Espero que estas recomendaciones te sirvan, si tienes una extensión que quieras compartir con la comunidad, ponla en los comentarios.

Recuerda que en Platzi encuentras la Escuela de Desarrollo Web donde tienes diferentes cursos para que sigas desarrollando tu carrera. Por ejemplo, puedes entrar al Curso Definitivo de HTML y CSS y ver lo que hemos preparado para ti.

Curso Definitivo de HTML y CSS

Toma las primeras clases gratis

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

0 Comentarios

para escribir tu comentario

Artículos relacionados