DEV Community

Alex Camacho
Alex Camacho

Posted on

馃ぉ 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.
  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.

Discussion (3)

Collapse
manuelojeda profile image
Manuel Ojeda

Una extensi贸n muy buen para el desarrollo de JavaScript/TypeScript que me resulto ser muy bueno:
Tech Debt Tracker

Te lo super recomiendo 馃

Collapse
dcruz1990 profile image
Dennis Quesada Cruz

Voy a probar algunas que no sab铆a que exist铆an, muchas gracias!

Collapse
devnielfc profile image
Daniel Flores

Gracias por el post, descrub铆 varias extensiones que hacen que mi codigo luzca DI-VI-NO.

Saludos!!