Útiles extensiones para Visual Studio Code

Visual Studio Code es un editor gratuito y de código abierto desarrollado por Microsoft. Se puede considerar un versión mejorada del editor en línea Visual Studio Online. Entre algunas de sus características más destacadas se encuentra la función IntelliSense que permite el uso de completado de código de forma inteligente, para ofrecer sugerencias más precisas. También puedes depurar tu código, personalizar el aspecto del editor mediante temas y extensiones, así como hacer uso de su terminal integrado para administrar diversas instancias.

Si haces uso de este editor o te has decidido a instalarlo, te mencionamos algunas de las más útiles extensiones para Visual Studio Code. Algunas de ellas sólo te serán de ayuda en proyectos o situaciones específicas, pero realmente agilizan el proceso cuando es necesario.

HTML Snippets

HTML Snippets, como su nombre indica, es una extensión que ofrece soporte adicional para el lenguaje HTML en Visual Studio Code. Entre algunas de sus características tenemos fragmentos de código, etiquetas HTML5, información sobre etiquetas y si la seleccionada se encuentre en desuso en la versión actual de HTML, así como coloración de sintaxis. De gran utilidad si quieres mejorar la funcionalidad actual que ofrece Visual Studio Code para HTML.

HTML CSS Class Completion

HTML CSS Class Completion es una extensión que activa el completado de clases CSS según tu espacio de trabajo, es decir, crear una lista con todas las clases CSS que has empleado. De esta forma, al intentar escribir una clase en el editor, mostrará una lista que se irá actualizando conforme ingreses más palabras.

Puedes configurar los directorios que utilizará la extensión para buscar las definiciones de clase, asimismo ofrece caché de definiciones de clase para etiquetas de estilo y enlaces.

JavaScript (ES6) Code Snippets

JavaScript Code Snippets es una extensión que recopila una serie de snippets para JavaScript en la sintaxis de la versión ES6. De esta manera, sólo debes ingresar un par de palabras para activar diversas acciones. Es compatible con archivos JavaScript (.js), TypeScript (.ts), JavaScript React (.jsx) y TypeScript React (.tsx).

jQuery Code Snippets

jQuery Code Snippets posee alrededor de 130 snippets que te permiten activar ciertas acciones al tipear ciertas abreviaciones clave. De esta manera, puedes agilizar el proceso de desarrollo. Casi todas las palabras clave empiezan con el prefijo jq, en la página de descarga se encuentra el listado completo de abreviaciones y las acciones que se activan.

ES Lint

ES Lint es una aplicación de código abierto para detectar errores en tu código JavaScript y JavaScript React. La extensión para Visual Studio Code integra esta útil aplicación en el editor y permite la revisión de código mientras lo vas ingresando en la interfaz, así como la activación de comentarios que indican el tipo de errores encontrados.

Esta extensión hace uso de una librería para ESLint en el directorio del espacio de trabajo, si no lo encuentra busca por la instalación global. Es recomendable configurar ESLint antes de utilizarlo en este editor.

AutoFileName

AutoFileName, como su nombre indica, es una extensión para activar una función de autocompletado cuando se solicita algún archivo dentro de tu código. Es ideal si estás empleando diversos recursos pues esta extensión ofrece una lista conforme las letras que vas ingresando en el editor.

Es una extensión sencilla, pero puede ahorrarte mucho tiempo en ciertos proyectos, ya sea porque evita que ingreses todo el nombre completo o porque no recuerdas de forma exacta cómo se llamaba el archivo hasta que lo ves en la lista de sugerencias.

Project Manager

Project Manager, tal como su nombre indica, te permite cambiar entre proyectos dentro de Visual Studio code. Puedes configurar tus proyectos favoritos, activar la detección automática de proyectos, repositorios para Git y SVN.

Project Manager incluye una serie de comandos para editar la lista de proyectos, abrir un proyecto previamente guardado, abrir la lista de proyectos, entre otras útiles acciones que se pueden realizar desde el mismo editor.

Bower

Esta extensión integra el gestor de dependencias Bower en Visual Studio Code, de esta forma no es necesario que utilices el terminal y el editor al mismo tiempo, todas las acciones deseadas pueden ser realizadas desde el mismo editor al colocar las palabras clave. De esta manera, esta útil extensión optimiza nuestro proceso de trabajo al permitirnos trabajar de forma ininterrumpida desde el editor de código.

Git Easy

Git Easy es una extensión para Visual Studio Code que ha sido desarrollada para optimizar la integración de Git con esta editor de código. Para lograr este objetivo posee una serie de comandos especiales para realizar diversas acciones en Git.

Git Easy se ha visto inspirado en el plugin para Git que se utiliza en Sublime Text.

Git History

Git History es uan extensión que permite hacer seguimiento a los cambios de tu proyecto en Git sin necesidad de dejar la interfaz de Visual Studio Code. Con esta extensión puedes ver el historial, gráficos y detalles del proyecto, así como acceder a una copia previa del archivo y comparar versiones anteriores con la actual o la que hayas especificado.

Puedes configurar atajos de teclado para activar ciertos comandos de esta extensión. Git History es particularmente útil cuando debes verificar las modificaciones que otros desarrolladores del proyecto han realizado.

View in Browser

View in Browser es una extensión sencilla, pero realmente útil que te permite tener una vista previa del resultado de tu código en un navegador. No hace falta que abras ninguna aplicación adicional, desde el propio editor puedes activar la apertura del archivo HTML en el que estás trabajando y visualizarlo en tu navegador por defecto.

View in Browser sólo es compatible con HTML, de modo que si tienes otra extensión de archivo no podrás activar esta extensión.

npm Intellisense

npm Intellisense es una extensión que activa la opción Intellisense en módulos de importación de npm, popular gestor de paquetes para Node.js. También puede escanear dependencias, buscar el archivo package.json dentro del directorio más cercano. Aunque posee opciones adicionales, en realidad ha sido desarrollado para comando de importación.

amVim

amVim es una extensión para Visual Studio Code que se integra con Vim, un editor de código. Vim posee increíbles herramientas para buscar y reemplazar, es compatible con una gran variedad de lenguajes de programación, posee un sistema de plugins y se puede integrar con otras herramientas.

amVim posee las siguientes características clave: modos Normal, Visual y Visual Line activos, soporte para múltiples cursores, compatibilidad con el aspecto y sintaxis de Vim.

Sublime Text Keymap

Sublime Text Keymap es una extensión para activar los atajos de teclado de Sublimte Text, otro popular editor de código, en Visual Studio Code. Si ya has empleado Sublime Text y quieres trasladar cierta funcionalidad del mismo a Visual Studio Code, ahora puedes lograrlo con esta útil extensión.

Atom Keymap

Atom es otro popular editor de código y esta extensión para Visual Code Studio hace exactamente lo mismo que Sublime Text Keymap, sólo que en este caso se traslada la funcionalidad desde Atom a Visual Studio Code. Ahora puedes utilizar tus atajos de teclado favoritos de Atom en Visual Studio Code.

En conclusión…

Aunque por sí solo, Visual Studio Code es un editor poderoso con una serie de herramientas que permiten mejorar tu proceso de desarrollo en diversas fases, para ciertos proyectos específicos necesitarás un mayor número de herramientas. Para este tipo de situaciones se han creado las extensiones para Visual Studio Code, ofrecidas a través del mercado oficial de este popular editor en donde diferentes desarrolladores colaboran, publican y comparten sus extensiones con el resto de la comunidad.