Como todo buen desarrollador tengo mi lista de extensiones en VSCode que si o sí necesito para poder trabajar a gusto. He decidido compartirlas básicamente por dos razones.
- Quizá ustedes puedan descubrir alguna que no conocían.
- Quizá me puedan recomendar una nueva extensión que hará mi vida más feliz.
Los dejaré de aburrir con la chachara y vayamos a código... ah que esta vez no hay código. Bueno vayamos a extensiones... No, no me gusta como suena. Como sea, continuemos.
Personalización
Empecemos por las que nos ayudan a personalizar y poner visualmente a nuestro gusto el editor.
Monokai Pro
Monokai Pro es un tema de paga pero te permite utilizarlo con una alerta ocasional que te invita a comprarlo, si te gusta yo recomiendo adquirirlo para dar soporte al creador, si no siempre podemos convivir con la alerta. En lo personal es de mis temas favoritos.
Material Icon Theme
Hay quienes dicen que los iconos no son importantes, yo opino lo contrario ya que son una ayuda visual para identificar con rapidez el tipo de contenido de una carpeta o el tipo de archivo.
Indent Rainbow
Esta es una extensión muy simple que nos ofrece una ayuda visual para la indentación ya que la colorea. Eso es especialmente útil si trabajamos con lenguajes donde la indentación es clave como lo puede ser Python o Stylus.
Bracket Pair Colorizer 2
Supongo que esta ya todos la conocen, pero por si no, aquí esta. La útilidad de esta extensión viene dada por que nos colorea los corchetes, llaves y parentesis de inicio y fin de un bloque de código. Lo cual fácilita muchisimo la lectura del mismo.
Color Highlight
Color Highlight es de mis extensiones favoritas porque te permite tener una vista previa del color de una forma más eficiente que la predeterminada por VSCode.
Utilidades
Dejando de lado aquellas extensiones que cambian algún aspecto de nuestro editor, pasemos a aquellas que nos ayudan a hacer más cosas con él.
Code Spell Checker
Esta extensión la descubrí hace poco pero es una chulada. ¿Cuántas veces nuestro código no funciona y terminamos descubriendo que es por un typo? Con esta extensión la idea es que eso deje de pasar. Ya que nos ayuda a revisar nuestro código. Tiene diccionarios integrados de varios lenguajes de programación y también un diccionario en inglés.
Gracias al diccionario en inglés yo la uso también con le proposito de que si tengo que comentar algo hacerlo en inglés y practicar un poquito al hacerlo.
Auto Rename Tag
Auto Rename Tag esta enfocada completamente a archivos HTML y XML, ya que nos permite renombrar el nombre de las etiquetas de apertura y cierre con mucha facilidad.
Code Runner
Espero que la mayoría la conozca y la utilice porque se me hace de las extensiones básicas de cualquier desarrollador. Nos permite ejecutar fragmentos o archivos completos de código desde la terminar de nuestro editor.
Soporta una gran variedad de lenguajes.
Import Cost
Simple y sencilla su utilidad. Nos permite saber el peso de los paquetes que importamos a nuestros proyectos.
Live Server
Live Server nos permite montar un servidor web local que nos permite ver en tiempo real los cambios realizados a nuestro código. Simplemente salvando los cambios de los archivos del proyecto estos se verán reflejados en el navegador.
Polacode
Tal cual lo dice en su descripción es una foto de nuestro código. Lo cual la hace tremendamente útil cuando queremos compartir un fragmento de nuestro código.
WakaTime
Para los que son fans de las metricas esta es su extensión. WakaTime permite llevar un registro de cuantas horas, minutos y segundos le has dedicado a un proyecto. Así como también a cada lenguaje utilizado dentro de dicho proyecto.
WakaTime te vigila mientras codeas. Seguramente lo van a amar.
Prettier
Un código más bonito sin mucho esfuerzo. Ayuda con la indentación y los espaciados en nuestro código.
Lenguajes
Ahora veamos mis extensiones especificas por lenguajes. Mi día a día es con estos tres mejores amigos: HTML, CSS y JavaScript. Así que aquí pondre las extensiones de estos lenguajes y de alguno de sus frameworks.
HTMLHint
HTMLHint nos ayuda a idendificar donde podemos tener errores en nuestro código HTML; como lo puede ser una etiqueta sin cerrar o un atributo indebido o incompleto.
Language Stylus
En lo personal, me encanta hacer código CSS con Stylus así que esta extensión le provee de soporte en VSCode.
TailwindCSS
Tailwind es mi framework favorito de CSS y esta extensión nos da la intellisense para nuestro editor.
Babel JavaScript
Esta se describe sola. Si programamos JavaScript la tenemos que tener si o si.
JavaScript (ES6) code snippets
Snippets de código para JavaScript con la sintaxis de ES6+, funciona también con Typescript.
Git
Como buen desarrollador debemos de utilizar algún control de versiones como Git. En lo personal uso dos extensiones enfocadas en Git para hacer mi vida más fácil.
Git Blame
Git Blame nos permite ver quien comento cada línea del código y cuándo lo hizo. Ahora que lo pienso, esta extensión es medio chismosa.
Git Graph
Una de las principales acciones de esta extensión es ofrecernos el historico de commits de forma visual. Así como también nos permite a través de su UI realizar algunas acciones como lo serían poner etiquetas.
Todas las anteriores son las extensiones de VSCode que no pueden faltar en mi día a día.
¿Cuáles son las tuyas? Dejame saberlo en los comentarios.
Discussion (3)
Una extensión muy buen para el desarrollo de JavaScript/TypeScript que me resulto ser muy bueno:
Tech Debt Tracker
Te lo super recomiendo 🤘
Voy a probar algunas que no sabía que existían, muchas gracias!
Gracias por el post, descrubí varias extensiones que hacen que mi codigo luzca DI-VI-NO.
Saludos!!