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.
[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.
- Babel JavaScript
- Color Highlight
- ESLint
- GitLens
- Import Cost
- Indent-rainbow
- Trailing Spaces
- Auto Close Tag
- WakaTime
- 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.
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.
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.
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.
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.
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.
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
