Mi recomendación de extenciones de visual studio code.
Published: 2020-05-17 02:08:23

Visual Studio Code es mi editor de texto favorito. Es el editor de código más extensible y popular que existe. Y sorprendentemente está hecho por Microsoft (lo sé). En mi opinión, ningún otro IDE o editor se acerca a la mitad de lo que hace VS Code. Lo que lo hace tan robusto es su sistema de extensión. Le permite escribir una extensión para cada caso de uso posible que se le ocurra. Aquí están mis 10 extensiones principales.

1. Beautify 

![](https://res.cloudinary.com/practicaldev/image/fetch/s--WiRwrP1y--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6jh0tui9nh993l4zzlwd.png)

```javascript
ext install HookyQR.beautify
```
Beautify permite formatear html, js, css, JSONy el sassarchivo con su propia configuración estilo personalizado. Se extiende sobre el interno js-beautifyy lo hace personalizable a su estilo personal.

2. Better Comments

![](https://res.cloudinary.com/practicaldev/image/fetch/s--WN0vlbgV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/qwhm3kqyvp22rox4unwy.png)


```javascript
ext install aaron-bond.better-comments
```
Esta extensión le permite agregar semántica a sus comentarios. Se clasifica en categorías como comentarios en alertas, consultas, todos y destacados.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--53DLT_-O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/3c804dilaxhlgqhfpmmy.png)

3. Bookmarks

![](https://res.cloudinary.com/practicaldev/image/fetch/s--p9ZeLIee--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ngtjai3lgko14sp51cfe.png)

Este es un salvavidas, especialmente si te encuentras perdido en cientos de líneas de código. Esta extensión le permite marcar cualquier línea de código. Luego, cuando necesite regresar, todo lo que debe hacer es examinar la lista de marcadores y seleccionar la línea que desea visitar.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--cC5AEn2F--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/g3mzmg6eqru89d3l0nzc.png)

4.Bracket Pair Colorizer 2

![](https://res.cloudinary.com/practicaldev/image/fetch/s--ws8VzzM9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/q8whhlyzqn5a9pni5q9o.png)

```javascript
ext install CoenraadS.bracket-pair-colorizer-2
```
Este hace exactamente lo que su nombre sugiere. Códigos de color correlacionados pares de paréntesis. Esto ayuda mucho cuando terminas varios ámbitos en el código.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--QmMIzsbY--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/tz0fet4e1is8kurpzdl4.png)

5. Formato en menús contextuales

![](https://res.cloudinary.com/practicaldev/image/fetch/s--JnJsTUfV--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/lklut6q62ky3ia64h6wo.png)

```javascript
ext install lacroixdavid1.vscode-format-context-menu
```

Esta extensión le permite formatear todos sus archivos simplemente seleccionándolos en la barra lateral. Esto es especialmente útil cuando tiene toneladas de archivos y su entorno no admite formateadores y linters.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--Dt4Gn9aD--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/hgqnbo219iis3i8ru9vf.gif)

6. Gráfico de Git

![](https://res.cloudinary.com/practicaldev/image/fetch/s--KdCcANGl--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/fj1eujct11n0k02805rg.png)


```javascript
ext install mhutchie.git-graph
```

Le permite ver un gráfico Git de su repositorio y realizar rápidamente acciones Git desde el gráfico. Es altamente configurable y tiene muchas características. Explicar la bondad de esta extensión probablemente tomará una publicación completamente nueva.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--qv5HUpGW--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/v800jt7z8zif3k4eo11n.gif)

7. Lente Git

![](https://res.cloudinary.com/practicaldev/image/fetch/s--KKsuFLxp--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/m7a2x37bh157ly1c7egp.png)

```javascript
ext install eamodio.gitlens
```
GitLens te ayuda a reflejar la autoría del código de un vistazo a través de las anotaciones de culpa de Git y la lente del código. Le permite navegar y explorar sin problemas los repositorios de Git, obtener información valiosa a través de sólidos comandos de comparación y mucho más.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--VzvFAL83--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/6v0fm7xih9z5so6h0fno.png)

8. sangría-arcoiris

![](https://res.cloudinary.com/practicaldev/image/fetch/s--zToRDu4O--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/79m9505m369sxfm44m2v.png)

```javascript
ext install oderwat.indent-rainbow
```
Esta extensión colorea la sangría del código, en diferentes colores en cada nivel de sangría. Esto es especialmente útil en ámbitos profundos con lenguajes como Python.

9. Senda Intellisense
![](https://res.cloudinary.com/practicaldev/image/fetch/s--6kk7d_Dr--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ckei8za87rr4pjdq4tzd.png)

```javascript
ext install christian-kohler.path-intellisense
```

Path Intellisense agrega autocompletado a las rutas de archivo. Si bien VS-Code admite de forma nativa la finalización automática, se limita solo a archivos HTML, CSS y JavaScript. Esto lo extiende a todos los idiomas y tipos de archivos.

![](https://res.cloudinary.com/practicaldev/image/fetch/s--dTmmMUkC--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/koon5g53xuxxi3zsko9y.gif)

10. Líneas totales

![](https://res.cloudinary.com/practicaldev/image/fetch/s--wZDl-wqT--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/ne5j4t2bg6rlfcktfe76.png)

```javascript
ext install praveencrony.total-lines
```

Esta pequeña extensión útil agrega el número de líneas del archivo abierto actualmente en la barra de estado. Una buena adición a su colección de extensiones.

Y eso es todo amigos. Estas son mis principales extensiones de VS Code. Me gustaría escuchar tus extensiones favoritas en los comentarios.

Si te gusto te invito a conocer mi [blog](https://codecarlosblog.netlify.app/) te esperan grandes cosas,que tengas un increíble día.