Durante los últimos 3 años, estuve probando extensiones de VS code para poder facilitar el día a día, y estas son mi top 5 para desarrollo frontend:

Turbo Console Log

Esta extensión te permite generar solo con un shortcut "ctrl + alt + L" un console.log con información importante para ser identificados rápidamente en el explorador.

Ejemplo:

console.log("🚀 ~ file: example.tsx ~ line 97 ~ handleExample ~ valueExample", valueExample)

La estructura es bastante simple, primero el archivo donde está el console.log, la linea del archivo, la función en donde está el archivo y la variable que se asigna al console.log.

Descargar

Auto Close Tag

Muchas veces cuando inicias en el desarrollo de frontend (y aun después de varios años) puedes cometer el error de omitir la etiqueta de cierre de un div o algún párrafo, o escribir mal el nombre de la etiqueta de cierre, estos errores al ser tan pequeños son difíciles de encontrar entre tantas lineas de código, Auto Close tag es la solución.

Ejemplo:

// Sin Auto Close Tag
<div>
  <p>Auto Close Tag</o>
</dib>

// Con Auto Close Tag
<div>
  <p>Auto Close Tag</p>
</div>

Descargar

Auto Rename Tag

Algunas veces necesitamos cambiar etiquetas, por alguna otra, como párrafos por span, o por un, Auto Rename Tag nos ayuda a hacer esto bastante rápido y con muy poco margen de error.

Ejemplo:

// Sin Auto Rename Tag
<div>
  <p>Auto Close Tag</p>
</dib>

// Con Auto Rename Tag
<div>
  <h2>Auto Close Tag</h2>
</div>

Descargar

Import Cost

Cuando trabajas con algún framework de Javascript, siempre es bueno saber cuando pesa alguna dependencia que estas usando para saber si es la mejor opción, Import Cost te muestra el peso de cada import que tienes en tus archivos.

Descargar

GitLens — Git supercharged

La ultima y muy útil al trabajar en un equipo de desarrollo es GitLens, te da información sobre la línea de código en que estes situado, como quien la modifico, cuando, el commit en el que se modifico, y link directo a ese commit.

Descargar