Cristian Fernando

Posted on May 25, 2020 • Updated on Jun 30, 2020

Visual Studio Code y sus mejores plugins

#vscode #plugin #code #editor

Visual Studio Code 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 (en sus versiones 2 y 3), Atom (desarrollado por Github), Brackets (desarrollado por Adobe), entre otros.

¿Con que tecnologías está desarrollado VScode?

VScode está escrito en JavaScript con Electron.js como framework y Node.js como entorno de desarrollo y usa el motor V8 de Chromium (versión libre de Google Chrome).

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 y github.
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

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.

2.auto-rename-tag

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

3.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.

4.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.

5.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.

Extensión altamente parametrizable a los gustos del desarrollador.

6.Color Picker

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

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

7.CSS Peek

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

Compatible con archivos CSS planos, Less y Sass

8.Git History

Una de mis extensiones favoritas, permite gestionar todo un proyecto con Git 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.

9.IntelliSense for CSS class names in HTML

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

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.

2. Cantidad de descargas

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

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.

Referencias

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.