Saltar al contenido

Las 10 mejores extensiones para Visual Studio Code

best extension vs code

Desde el lanzamiento de Visual Studio Code en 2015, la popularidad del editor de c贸digo fuente no ha hecho m谩s que crecer y ganar el espacio que se dividi贸 entre editores como Sublime Text, Atom, Vim y muchos otros.

Hace un 1 o 2 a帽os, como otros desarrolladores que trabajan conmigo, decid铆 probar el cambio de Atom, Notepad++ o Sublime Text, como el editor habitual, a Visual Studio Code. Y desde entonces cada d铆a me gusta m谩s.

Hoy hablar茅 de los 10 mejores plugins o extensiones que siempre a帽ado en el editor cuando configuro un nuevo entorno de trabajo.

1 – Settings Sync

setting sync


En realidad esta es la primera extensi贸n que a帽ado cuando instalo el Visual Code en alguna m谩quina nueva y es ciertamente una de mis favoritos.

Basicamente tengo varios entornos de trabajo, y a veces trabajo desde casa y otras veces trabajo en el portatil, pero no me gusta nada tener cada entorno con unas herramientas diferentes. es por eso que uso este plugin para sincronizar todas las tools.

El uso de GitHub Gist Settings Sync sincroniza todos tus ajustes, temas y extensiones para que no tengas que volver a trabajar cuando configures un nuevo entorno de escritorio o si quieres mantener todas las instancias del editor, instaladas en diferentes m谩quinas, practicamente iguales.

2 – Importador de teclas de Atom o Sublime


Para los acostumbrados a los atajos de Texto de Atom o Sublime, esta extensi贸n ayuda mucho en el proceso de migraci贸n, ya que permite configurar los atajos de Visual Studio Code para realizar las mismas funciones que los atajos de Texto Sublime.

3 – Document This


Cuando trabajas en proyectos con m煤ltiples desarrolladores, es extremadamente importante que tu c贸digo est茅 bien escrito, sea legible y est茅 documentado. Otras personas pueden mantener el mismo c贸digo y, con 茅l bien documentado, har谩 este proceso mucho m谩s f谩cil.

Document This ayuda mucho a estandarizar la documentaci贸n del c贸digo Javascript, trayendo una simple plantilla de comentarios por encima de sus funciones, m茅todos y clases y colaborando a la intelliSence del Visual Studio Code.

4 – EditorConfig para el Visual Studio Code

editor config


Es com煤n que cada desarrollador tenga sus preferencias de configuraci贸n de editor para codificar de una manera que le convenga.

Sin embargo, en el caso de los proyectos compartidos, es importante mantener algunos ajustes del editor (como el charset, el estilo de indentaci贸n, el tama帽o de la indentaci贸n, entre otros) en com煤n para todos los devs que colaboran con el proyecto. Adem谩s de la importancia del patr贸n de desarrollo de proyectos, si t煤 o tu empresa utilizan git para versionarlo, f谩cilmente alertar谩 de conflictos simplemente porque una l铆nea est谩 con la sangr铆a de espacio y otro dev ha 芦cambiado禄 el archivo con la sangr铆a en tabulaci贸n, por ejemplo.

EditorConfig nos ayuda con esto. S贸lo tienes que instalar el plugin y crear un archivo llamado .editorconfig con la configuraci贸n que quieras que sea estandarizada para todos los devs, y esa configuraci贸n se aplicar谩 a todos los editores, que tengan el plugin instalado, s贸lo para ese proyecto en particular.

5 – Project Manager

project manager


El director del proyecto le ayuda a organizar sus proyectos locales.

Puede establecer Proyectos Favoritos o elegir Proyectos de Visual Studio Code, Repositorios Git, etc etc.

6 – ESLint

ESLint es un conocido de Javascript. Sirve para crear reglas y patrones para tu c贸digo Js (punto y coma, sangr铆a, etc.), advirti茅ndote de errores o advertencias si tu c贸digo est谩 fuera de las reglas definidas.

En caso de que no lo sepas, vale la pena leer la documentaci贸n porque ayuda mucho en la calidad de tu c贸digo.

7 – Intellisense npm


Cada vez es m谩s com煤n que los proyectos usen las dependencias instaladas del NPM. Y esta extensi贸n facilita la importaci贸n de estos m贸dulos en su c贸digo.

8 – Prettier – Code formatter

pretier eslint

Me gusta que est茅 todo el c贸digo bien formateado , mejora la legibilidad del c贸digo, pero por otro lado me cuesta y me aburre un poco tener que estar dando espacios o tabuladores cuando importo el c贸digo de otro sitio o quiero realizar algunas pruebas r谩pidas, es por eso que uso este plugin y cada vez que se guardan los cambios se autoformatea el c贸digo sin que tengas que realizar nada.
Si todo el equipo de trabajo utiliza las mismas opciones tendr茅is el c贸digo con las mismas caracter铆sticas.

9 – Live Server


El Live Server le ofrece de forma muy sencilla un servidor local con derechos de recarga en directo para que pueda desarrollar sus proyectos.

Es una gran ayuda especialmente para los proyectos peque帽os.

10 – Git Lens

El Visual Studio Code ya tiene integraci贸n nativa con Git, pero el plugin Git Lens es una extensi贸n muy poderosa que extiende las caracter铆sticas del versionador que no est谩n disponibles de forma nativa.

Te ayuda a ver r谩pidamente la autor铆a de c贸digos a trav茅s de las anotaciones, a navegar y explorar los repositorios de Git, a obtener informaci贸n valiosa a trav茅s de potentes comandos de comparaci贸n y mucho m谩s.