10 extensiones útiles para VSCode
Tags: vscode, extensions, vscodeextensions
Published: 2023-02-09 02:36:28

Visual Studio Code se convirtió en uno de los IDEs (Entorno de desarrollo integrado) más populares y utilizados por la comunidad, por lo que si lo utilizas en tu día a día, es una buena alternativa instalar distintas extensiones que te ayudarán en tu proceso de desarrollar Software.

Acá te muestro algunas de las extensiones que utilizo y me son de mucha utilidad.


### 1. [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)

Cuando realizamos una petición HTTP a un servicio web externo, debemos recibir el resultado en JSON mediante la consola inicialmente, pero podemos utilizar **REST Client**, que nos permite enviar y ver la respuesta directamente en VSCode.

![Rest Client](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lbu0t0yoljiembtt2ne2.gif)


### 2. [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

Cuando utilizamos una librerías, dependencias o paquetes para nuestras aplicaciones, generalmente no sabemos cual es el peso del mismo, pero tenemos a **Import Cost** que nos mostrará en la misma línea de código de la importación, el tamaño del paquete el cuál utiliza Webpack para detectar el tamaño importado o a importar.

![Import Cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0ybrdp27xgkrp19cek1.gif)


### 3. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

**GitLens** parte de los productos de GitKraken, nos permite visualizar quién, porqué y cuando se cambió una línea o bloque de código de un vistazo a través de anotaciones, con lo que ayuda bastante a ver el historial y evolución de un proyecto.

![Git Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvbltd20mzf7gpwg2sox.png)



### 4. [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot)

Si demoras mucho programando o pierdes tiempo buscando la solución en Internet, **GitHub Copilot** es la alternativa par acelerar tu desarrollo, solamente debes instalar la extensión en VSCode y empezar a programar con un asistente de código con Inteligencia Artificial.

![GitHub Copilot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zugiv7tqm81c430snu2.gif)



### 5. [Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)

Si odias documentar tu código o no sabes que comentario colocar a aquella función que te costó tanto hacerla pero no sabes como explicarlo con palabras sencillas, **Better Comments** te ayuda a crear comentarios amigables, podrás categorizar tus anotaciones en alertas, querys, TODOs y más.

![Better Comments](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6pjuoeei816ns1st7lu.png)



### 6. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)

Si no te gusta los iconos que vienen por defecto en VSCode, existe **Material Icon Theme,** con el cuál podrás personalizar como tu quieras y darle un estilo diferente a los demás.

![Material Icon Theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zeiiftdoutufctwj5hu.png)



### 7. [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

Si necesitas solucionar tu código de Javascript, existe **ESLint**, pero también lo podemos instalar en nuestro editor favorito y utilizarlo de manera sencilla.

![ESLint](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ezrsj1qdd21wcsam7oe.png)



### 8. [Markdown Preview Enhanced](https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced)

Probablemente seas creador de contenido en blogs, o simplemente quieres escribir un bonito README.md en tu repositorio de GitHub, GitLab, etc. Por lo que hacer Markdown a ciegas no es una buena opción. Por ello existe **Markdown Preview Enhanced** que te permite dividir tu pantalla y tener una vista previa de tu archivo de texto hecho en Markdown.

![Markdown Preview Enhanced](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t2nda1hcg6uwwjngy9wj.png)



### 9. [JSON to Dart](https://marketplace.visualstudio.com/items?itemName=MuhammadNorzariman.jsontodart)

Si desarrollas aplicaciones móviles con Flutter, probablemente no quieras realizar la conversión de un JSON y convertirlo a un objeto en Dart, por lo que una buena opción es **JSON to Dart**, que solamente debes pegar en el un texto en JSON y se encargará de convertirlo en las clases necesarias para mapear ese resultado a objetos Dart.

![JSON to Dart](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfd65o2b36lqsy7ezm3t.png)


### 10. [Flutter Widget Snippets](https://marketplace.visualstudio.com/items?itemName=alexisvt.flutter-snippets)

Probablemente al desarrollar en Flutter, existan varias estructuras que son base para crear un Widget, por lo que hacerlos a mano es un trabajo largo, para ello tenemos **Flutter Widget Snippets**, que nos tiene preparado una seria larga de comandos para ya adicionar el código necesario para ese Widget que necesitas.

![Flutter Widget Snippets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m26iti7c9rr82asrchz7.gif)


## Conclusiones.

Sea en el lenguaje que desarrolles y utilices Visual Studio Code como tu acompañante, es una buena idea instalar distintas extensiones al mismo, ya que ello te ayudará a trabajar de manera más cómoda y acelerar tu trabajo.

¿Y tú, que extensiones utilizas?