10 Plugins esenciales de VSCode para Frontends

/ julio 24, 2019/ Desarrollo/ 0 comments


Desde hace tiempo trabajo con Visual Studio Code, un editor de código creado por Microsoftque 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.

Esta es la lista de plugins que utilizo en VSCode

Babel JavaScript

plugin-babel-vscode.png

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.

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.

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.

GitLens

plugin-gitlens-vscode.png

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.

Import Cost

plugin-import-cost-vscode.png

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.

Indent-Rainbow

plugin-indent-rainbow-vscode.png

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 snippets
Angular 8 Snippets – TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
Vue 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 ayudara a automatizar las tareas repetitivas al momento de crear nuevos componentes, funciones y código de en los proyectos.

Trailing Spaces

plugin-trailing-spaces-vscode.png

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.

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.

WakaTime

plugin-wakatime-vscode.png

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:

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.

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


COMENTA!!!

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.