loading...

🤩 Tuneando un VSCode elegante y eficiente

alexcamachogz profile image Alex Camacho ・6 min read


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.
  1. Quizá ustedes puedan descubrir alguna que no conocían.
  2. 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

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

Material Icon

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

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

Bracket Pair Colorizer

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

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

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

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

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

Alt Text

Simple y sencilla su utilidad. Nos permite saber el peso de los paquetes que importamos a nuestros proyectos.

Live Server

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

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

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

Alt Text

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

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

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

TailwindCSS

Tailwind es mi framework favorito de CSS y esta extensión nos da la intellisense para nuestro editor.

Babel JavaScript

Babel JavaScript

Esta se describe sola. Si programamos JavaScript la tenemos que tener si o si.

JavaScript (ES6) code snippets

Alt Text

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

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

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.

Posted on by:

alexcamachogz profile

Alex Camacho

@alexcamachogz

I'm a software development engineer who is passionate about technology, professional development, building community and cats 😺

Discussion

pic
Editor guide
 

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!!