馃ぉ Tuneando un VSCode elegante y eficiente
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.