Visual Studio Code y sus mejores plugins
Tags: vscode, plugin, code, editor
Published: 2020-05-25 15:52:57

[Visual Studio Code](https://code.visualstudio.com/) es un editor de código open source multiplataforma desarrollado por Microsoft, bastante popular en la comunidad del desarrollo de software. La versión beta fue liberada a finales del año 2015 y la primera versión estable en abril de 2016. 
VScode llegó a competir con editores de código que por ese entonces se encontraban muy bien establecidos y sobre todo aceptados por los desarrolladores de diferentes lenguajes de programación como por ejemplo [Sublime Text](https://www.sublimetext.com/) (en sus versiones 2 y 3), [Atom](https://atom.io/) (desarrollado por Github), [Brackets](http://brackets.io/) (desarrollado por Adobe), entre otros. 

## **¿Con que tecnologías está desarrollado VScode?**
VScode está escrito en JavaScript con [Electron.js](https://www.electronjs.org/) como framework y [Node.js](https://nodejs.org/es/) como entorno de desarrollo y usa el motor V8 de [Chromium](https://www.chromium.org/) (versión libre de Google Chrome).

![Herramientas de desarrollo de VScode](https://raw.githubusercontent.com/crisdux/img-dev-to/master/vscode.png)

## **Características de VScode**
Entre las principales características de VScode se pueden mencionar: 
* **IntelliSense:** por defecto proporciona terminaciones inteligentes basadas en tipos de variables, definiciones de funciones y módulos importados. 
* **Run and Debug:** es posible realizar depuración con puntos de interrupción.
* **Git integrado:** nativamente viene con herramientas gráficas para la gestión y control de versiones con [git](https://git-scm.com/) y [github](https://github.com/).
* **Open Source:** Es una herramienta de código abierto.
* **Comunidad:** La comunidad de usuarios es muy grande por lo que el soporte está garantizado.
* **Themes:** Variedad de temas tanto claros como oscuros.
* **Soporte a diferentes lenguajes:** PHP, SQL, Java, JavaScript, TypeScript,
Go, C#, Visual Basic, F#, Lua, Perl, C++, Objective C, Ruby, Lees, Sass, Swift, Python, R, etc. 
* **Extenciones:** variedad de plugins desarrollados por la comunidad como por las empresas de software oficiales.

Ahora veamos las extensiones que uso en la mayoría de mis proyectos:

## **Extensiones que recomiendo**
### 1. [auto-close-tag](https://github.com/formulahendry/vscode-auto-close-tag)

Desde VScode 1.16, tiene soporte integrado de etiqueta cerrada para archivos HTML, Handlebars y Razor. Esta extensión está habilitada para otros lenguajes como XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX, etc. 

![auto-close-tag](https://raw.githubusercontent.com/formulahendry/vscode-auto-close-tag/master/images/usage.gif)

### 2.[auto-rename-tag](https://github.com/formulahendry/vscode-auto-rename-tag.git)

Un plugin bastante sencillo, pero al mismo tiempo muy útil, cambia automáticamente el nombre de una etiqueta HTML/XML emparejada. Eso es todo.  

![auto-rename-tag](https://raw.githubusercontent.com/formulahendry/vscode-auto-rename-tag/master/images/usage.gif)

### 3.[better-comments](https://github.com/aaron-bond/better-comments)

Nos permite escribir comentarios más amigables, por ejemplo, nos da la posibilidad de poder organizar nuestros comentarios en las siguientes categorías: 
* Alertas
* Consultas
* TODO's
* Destacados, etc.

La extensión es bastante configurable, es posible añadir más tipos de comentarios y también personalizar su apariencia en el editor de código. 

![better-comments](https://raw.githubusercontent.com/aaron-bond/better-comments/master/images/better-comments.PNG)

### 4.[Bookmarks](https://github.com/alefragnani/vscode-bookmarks)

No te ha pasado que cuando trabajas con archivos con cientos o hasta miles de líneas de código resulta bastante complejo buscar porciones de código específicas, claro un `ctrl+f` puede ayudar bastante pero muchas veces se queda corto.
Bookmarks ayuda a programador a navegar en su código, moviéndose entre porciones importantes del mismo de manera fácil y rápida. 

Entre algunas características se pueden mencionar: 
* Marcado y desmarcado de código.
* Posibilidad de dar un nombre identificativo a porciones de código.
* Saltos entre marcadores.
* Ver los marcadores organizados en un solo archivo.
* Barra lateral dedicada, etc.

![bookmarks](https://raw.githubusercontent.com/alefragnani/vscode-bookmarks/master/images/printscreen-toggle.png)

### 5.[Bracket-Pair-Colorizer-2](https://github.com/CoenraadS/Bracket-Pair-Colorizer-2)

Esta extensión permite que los paréntesis, corchetes o llaves coincidentes se identifiquen con colores. El usuario puede definir qué colores usar.

![bracket-pair-colorizer-2](https://raw.githubusercontent.com/CoenraadS/Bracket-Pair-Colorizer-2/develop/images/example.png)

Extensión altamente parametrizable a los gustos del desarrollador. 

### 6.[Color Picker](https://github.com/anseki/vscode-color)

Permite escoger colores en diferentes nomenclaturas (HEX,RGB, RGBA, HSL, etc.) con una interfaz gráfica bastante intuitiva.

![color-picker-1](https://raw.githubusercontent.com/anseki/vscode-color/master/s-01.gif)

También permite la conversión de de colores entre nomenclaturas, por ejemplo, convertir un color en formato hexadecimal a rgb o viceversa.

![color-picker-2](https://raw.githubusercontent.com/anseki/vscode-color/master/s-03.gif)

### 7.[CSS Peek](https://github.com/pranaygp/vscode-css-peek)

CSS Peek es una extensión para HTML o EJS (si usas [React.js](https://es.reactjs.org/)) que permite ir a la definición o espacio de trabajo de clases o id's CSS.

![css-peek](https://raw.githubusercontent.com/pranaygp/vscode-css-peek/master/working.gif)

>*Compatible con archivos CSS planos, Less y Sass*

### 8.[Git History](https://github.com/DonJayamanne/gitHistoryVSCode)

Una de mis extensiones favoritas, permite gestionar todo un proyecto con [Git](https://git-scm.com/) de manera visual y sin salir del editor. Es posible hacer cosas bastante concretas: ver el historial de cambios de un archivo especifico o de una línea de código específica, ver todos los `commits` que realizo un determinado programador, crear, comparar y fusionar ramas, revertir cambios, etc. Sin duda vale la pena probarlo. 

![git-hitory](https://raw.githubusercontent.com/DonJayamanne/gitHistoryVSCode/master/images/fileHistoryCommandv3.gif)

### 9.[IntelliSense for CSS class names in HTML](https://github.com/Zignd/HTML-CSS-Class-Completion)

Auto completado de nombres de clases que se encuentran en un espacio de trabajo previamente definido. 
Entre algunas peculiaridades del plugin se pueden resaltar: 
* Funciona con hojas de estilos externas anexadas con el atributo `link`
* Es posible almacenar las clases en cache para un mejor funcionamiento

### 10.[JavaScript (ES6) snippets](https://github.com/xabikos/vscode-javascript)
Contiene fragmentos de código para JavaScript, TypeScript, EJS y Vue.js.
Por ejemplo: 

Disparador | Contenido
------------ | -------------
`rqr→` | crea un `require` de la forma `package require('');`
`req→	` | crea un `require` de la forma `const const packageName = require('packageName');`
`met→` | crea un método `class add() {}`
`fre→` | crea un forEach loop con sintaxis ES6: `array.forEach(currentItem => {});`
`cin→` | crea un `console.info();`

## **Consejos para elegir extensiones de manera adecuada**
Te aconsejo que bases la elección de tus extensiones en 3 aspectos importantes:

### **1. El programador o empresa que administra la extensión**
Muchos desarrolladores de diferentes comunidades de programación y empresas grandes de software escriben plugins para compartirlos de manera gratuita, sugiero que revises quien escribió la extensión, eso te dará un panorama más claro de que herramienta estas usando. 

![empresa](https://raw.githubusercontent.com/crisdux/img-dev-to/master/Sin%20t%C3%ADtulo6.png)

### **2. Cantidad de descargas** 
Todas la extensiones tienen un contador de descargas que brindan una idea de cuan popular y aceptado es el plugin.

![catidad](https://raw.githubusercontent.com/crisdux/img-dev-to/master/cantidad.png)

### **3. Puntuación** 
Así mismo cuenta con un sistema de puntuación por los programadores que usaron la herramienta, opino que es un indicador estupendo para saber qué tan útil es la extensión. 

![puntuacion](https://raw.githubusercontent.com/crisdux/img-dev-to/master/Sin%20t%C3%ADtulo5.png)

## Referencias
* https://code.visualstudio.com/
* https://www.mclibre.org/consultar/informatica/lecciones/vsc.html

---

## **Conclusión** 
Existen multitud de extensiones para VScode para terrenos específicos del desarrollo, considero que es muy importante saber elegir los plugins que se usaran en un proyecto ya que son herramientas bastante productivas y útiles para un desarrollador en cualquier ámbito. 
Para finalizar, considero importante mencionar que la lista de extensiones de este post están basadas en mi criterio como desarrollador web por lo que no todos los plugins pueden ser útiles para algunos colegas.