Las mejores extensiones para Visual Studio Code
Tags: vscode, extensiones, developers
Published: 2021-11-22 23:27:51

Hola amigos.
Teniendo en cuenta que en algunas ocasiones nuestro flujo de trabajo requiere de varias actividades para llevarlo a cabo. Hoy quiero compartir con ustedes las extensiones que a mi criterio son de mucha utilidad a la hora de realizar nuestro trabajo.

Y bueno sin más empecemos.

## 1. Bracket Pair Colorized 
Como su nombre lo indica, es una extensión que le da diferentes colores según lo configuremos nosotros a los Corchetes `[  ]`,  Llaves `{ 
 }` y Paréntesis `(  )`. Y es que a la hora de comenzar con nuestra tarea de escritura de código y a medida que el mismo crece, se vuelve complejo detectar donde inicia y donde finalizan los elementos antes mencionados, en cada una de las funciones.

![Bracket Pair Colorized 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yh8xiggdjz66h35pzhkf.png)

[Bracket Pair Colorized 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2) la encuentras en el marketplace de Microsoft para Visual Studio Code y está desarrollada por [CoenraadS](https://marketplace.visualstudio.com/publishers/CoenraadS). Es gratuita, y a mi criterio, aparte de darle color a nuestros desarrollos, te facilitara la identificación de funciones o anidaciones en tu código.

## 2. Color Higlight
La segunda extensión que recomiendo sirve en el momento que iniciamos a tabajar a nivel de Frontend. Todo aquel que este o en algún momento haya trabajado en el Frontend de un desarrollo sabe lo tedioso que es tener que cambiar al navegador para buscar que color es cada uno de las asignasiones ya sean `RGB`, `HEX`, `HSL` o cualquier otro modo que estemos utilizando.

Con **Color Highlight** se acaba ese dolor de cabeza ya que resalta cada uno de los códigos de color según el color que este sea, de modo que al momento de buscar un color lo podrás identificar facilmente.

![Color Highlight](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdr9zde2h9seg5lfmz3e.png)

[Color Highlight](https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight) la encuentras siempre en el Marketplace de Microsoft para Visual Studio Code y está desarrollada por [Sergii Naumov](https://marketplace.visualstudio.com/publishers/naumovs). Es totalmente gratuita y te facilitara mucho al momento de trabajar con archivos de tipo `SCSS`, `CSS` o incluso en el mismo `HTML`.

## 3. TODO Tree
Esta interesante extensión, te ayuda a tener un repositorio en tiempo real de los comentarios de tipo `TODO, FIX, BUG, HOTFIX` entre otros, es muy configurable y permite extender a otras palabras para que sean reconocidas, se abre en el panel lateral, y aparte de eso, al dar clic te lleva donde se encuentra el comentario.

![TODO tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zbn4316cik92djg8rgp.png)

[TODO Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) la encuentras siempre en el Marketplace de Microsoft para Visual Studio Code y está desarrollada por [Gruntfuggly](https://marketplace.visualstudio.com/publishers/Gruntfuggly). Es totalmente gratuita y vale la pena darle una oportunidad, al final terminas encariñandote y sacandole provecho.

## 4. Git Graph
Git Graph, es una extensión que nos ayuda a realizar un rastreo de los commits en nuestro repositorio de manera Local y Remota.

Con Git Graph tenemos una manera más fácil y gráfica de identificar los commits realizados, listándolos todos desde la fecha más antigua a la más reciente e incluso poder ver los cambios y la descripción para cada uno de ellos.

![Git Graph 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lrft0rjevqcqm84fm23.png)

Al dar clic sobre un commit podrás ver la descripción, los archivos modificados, el usuario que realiza el commit y la fecha y al dar clic derecho sobre el commit podrás ver la opción para revertir el desarrollo al commit seleccionado.

![Git Graph 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0zvaoax7acnfy32o7gl.png)

[Git Graph](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) la encuentras siempre en el Marketplace de Microsoft para Visual Studio Code y está desarrollada por [Mhutchie](https://marketplace.visualstudio.com/publishers/mhutchie). Es totalmente gratuita.

## 5. Vscode Faker
Finalizaremos la entrega con una extensión no menos importante pero si muy útil llamada Vscode Faker.

Esta extensión nos ayuda a crear datos aleatorios para nuestro desarrollo, si aun no has planeado conectarte a un API puedes hacer uso de ella permite la creación de correos, nombres, números de teléfono, empresas, entre otros datos ficticios y completamente validos para el momento de realizar una presentacion de plantillas HTML o incluso en desarrollos con frameworks.

[Vscode Faker](https://marketplace.visualstudio.com/items?itemName=deerawan.vscode-faker) la encuentras siempre en el Marketplace de Microsoft para Visual Studio Code y está desarrollada por [Burdi Irawan](https://marketplace.visualstudio.com/publishers/deerawan). Es totalmente gratuita.

Por ahora dejo estas extensiones, espero sean de utilidad. no olvides dejar tus comentarios o tus reacciones, hasta la préxima.

Imagen por [Fotis Fotopoulos](https://unsplash.com/@ffstop?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) en [Unsplash](https://unsplash.com/s/photos/developer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)