Uno de los puntos fuertes de Visual Studio Code es definitivamente el gran soporte de la comunidad. Al ser un producto de código abierto y bien documentado, también es fácilmente extensible.
¿Qué debes saber sobre las instalaciones en Visual Studio Code?
Esta característica ha resultado en una enorme cantidad de extensiones disponibles para esta aplicación, desarrolladas por la comunidad pero también por empresas que han puesto a disposición extensiones para los principales lenguajes de su negocio (por ejemplo, Java Server Language de Red Hat, Eclipse o el soporte de Angular de Google).
Visual Studio Code te sugiere extensiones
Normalmente la aplicación recomienda las extensiones que mejor se adaptan a un proyecto o sistema.
Al iniciar un proyecto, deberías haber notado; por ejemplo, una ventana emergente ubicada en la parte inferior derecha que te aconseja instalar el paquete de idioma específico para tu lenguaje de programación del proyecto.
Si has abierto un archivo con una extensión específica, supongamos .java que ya has usado en otra ventana emergente, en la parte inferior derecha, se te invitará a instalar las extensiones recomendadas para tu lenguaje de programación.
Aunque el sistema demuestra ser bastante preciso, es mejor verificar las extensiones recomendadas a través del botón al lado de “Instalar” o “Mostrar recomendaciones”.
Instalar extensiones desde la barra lateral
La forma más sencilla de instalar extensiones es sin duda el procedimiento que se puede realizar desde la barra lateral de Visual Studio Code.
En este caso, vas a tener acceso a una cómoda barra de búsqueda, en cuanto empieces a escribir el panel mostrará automáticamente los resultados relativos a la consulta formulada.
A continuación podemos ver las extensiones recomendadas por Visual Studio Code que a diferencia de lo dicho anteriormente, no se muestran resultados en función de los archivos abiertos sino de una serie de otros factores: Como el software instalado, el sistema operativo actual o el espacio de trabajo.
Detalles de una extensión
Una vez que hayas encontrado la extensión deseada, puedes proceder con la instalación.
Puedes interactuar de varias formas con las extensiones del panel, el botón de abajo a la derecha las instala inmediatamente. Si se muestra una flecha hacia abajo, eso quiere decir que pueden existir varias versiones instalables y vas a poder elegir cuál instalar.
Pero si haces clic en la extensión en sí y no en el botón, vas a poder ver la página que contiene la descripción de la extensión.
Muchas extensiones descritas en la página de detalles tienen un Gif animado que muestrasu funcionamiento.
Autor verificado
Puedes notar que algunos autores tienen un pequeño símbolo con una marca al lado. Esto son los autores verificados de extensiones.
Sin embargo, este elemento no debería afectar a tu elección, las extensiones que se muestran en Visual Studio Code normalmente están controladas por la comunidad y normalmente son seguras.
En cualquier caso, los autores verificados ofrecen una mayor garantía desde el punto de vista del mantenimiento.
Instalar extensiones desde un sitio web
En algunos casos, puede ocurrir que alguien quiera proporcionarte una extensión concreta o que se recomiende una extensión concreta desde una web. En ese caso, bastará con enviarte el enlace al título del marketplace de extensiones.
La dirección oficial siempre comienza por `https://marketplace.visualstudio.com`. Cuando entres a la web de una extensión, vas acceder a la página de detalles completa con un botón de “Instalación”.
Instalar extensiones a través de la consola
Las extensiones también se pueden instalar desde la consola de Visual Studio Code pero para ello es necesario tener el id o nombre completo de la extensión. No existe un administrador de paquetes real que busque los recursos deseados incluso en Internet.
Una vez encontrado el nombre o id puedes proceder a la instalación escribiendo:
code --install-extension nomeoid
Por ejemplo, para instalar el powermode puedes utilizar la siguiente instrucción:
code --install-extension hoovercj.vscode-power-mode
La lista de extensiones instaladas
Si quieres conocer las extensiones que se encuentran instaladas, puedes hacerlo escribiendo desde la consola:
code --list-extensions
La lista de extensiones te puede ser de mucha utilidad, por ejemplo: Si quieres crear una copia de seguridad de toda la configuración de tu Visual Studio Code.
Copia de seguridad de extensiones
Guarda la lista de extensiones en un archivo, hecho esto simplemente crea un script de línea de comando para instalarlas todas de una sola vez.
Si tienes una consola bash o zsh (linux / macOS) puedes escribir el siguiente configuración:
for i in $(cat ficheroextensiones); do
code --install-extension "$i"
done
De lo contrario, si tienes Windows, puedes utilizar el siguiente comando desde la línea del CMD:
for /F "tokens=*" %A in (ficheroextensiones) do code --install-extension %A
¿Dónde están instaladas las extensiones?
Las extensiones se instalan en una carpeta dentro de tu home de tu sistema operativo; si no estás familiarizado con este término, home es el directorio raíz que lleva el nombre de usuario del ordenador.
Asumiendo el nombre de usuario “ciberninjas” tendrías las siguientes rutas:
- en Windows la carpeta
C:\Users\ciberninjas; - en MacOs la carpeta
/Users/ciberninjas; - en Linux la carpeta
/home/ciberninjas.
Entonces, encontrarás las extensiones en la carpeta .vscode/extensions partiendo desde la carpeta home.
Instalar una extensión manualmente
Otra forma de instalar una extensión es descomprimirla manualmente dentro de la carpeta de extensiones.
Este método normalmente no se recomienda, puesto que si encuentras un paquete en Internet que dice ser una extensión para Visual Studio Code, podría contener código malicioso.
Las extensiones de software oficiales son aquellas que puedes instalar de forma más segura a través del panel o los métodos anteriores.
Por supuesto, hay excepciones. Por ejemplo, si encuentras una extensión de alguien en quien confías o que tu mismo has desarrollado.
Los temas son extensiones
Los temas de la interfaz de Visual Studio Code que se encargan de personalizar los colores de Visual Studio Code y los colores e imágenes de los iconos también son extensiones.
Por ello, normalmente, también los puedes encontrar dentro de la tienda de extensiones.
¿Cómo instalar un tema externo en Visual Studio Code?
Así como puede instalar manualmente una extensión colocándola en la carpeta adecuada (que recordamos que se encuentra debajo de home, ubicada en la ruta .vscode\extensions) puedes hacer lo mismo con los temas o plantillas.
Aunque mi recomendación, al igual que anteriormente; es no confiar demasiado en los paquetes que se encuentran en la Web, a menudo uno puede hacer la vista gorda con el tema de las plantillas.
De hecho, existen generadores de temas en línea como themer.dev.
Themer.dev
Themer.dev permite crear un tema para varias plataformas de forma sencilla e intuitiva. Accede al sitio, pasa a pantalla completa (tecla F11 de Chrome) y comienza a jugar con la configuración para conseguir tu entorno más agradable.
Recuerda hacer clic en “Construye el tuyo / Build your Own” antes de comenzar a crear tu propia plantilla. Cuando hayas terminado de personalizar todo, recuerda marcar “Código de Visual Studio” en la lista de IDEs y cambiar el precio a 0 $.
Después de la descarga, tendrás con un archivo zip que solamente vas a tener que descomprimir y agregar a la carpeta VS Code dentro de la carpeta .vscode/extensions.
Siguiendo los pasos anteriores, debería ser suficiente para ver el tema en la lista de plantillas (Menú “Archivo >Preferencias > Colores del tema) después de reiniciar el editor.
Deshabilitar una extensión
Si durante un cierto período ya no necesita usar una determinada extensión, puede pensar en deshabilitarla.
Luego presione el símbolo de la rueda en el panel de extensiones, al lado del nombre de la extensión que desea deshabilitar. Desde aquí, presione el botón “Desactivar”.
De esta manera, puede ahorrar recursos de hardware si una determinada función no le resulta útil, manteniendo la extensión y su configuración instaladas.
Volver a habilitar una extensión
Para volver a habilitar una extensión, puede presionar la rueda nuevamente en el panel de extensiones. Esta vez será posible hacer clic en “Habilitar”.
Deshabilitar una extensión desde la línea de comando
Bien, hasta ahora hemos visto como buscar, instalar o crear una extensión, pero y si lo que deseas es desinstalar una extension de la app de VSC.
El método más sencillo para desinstalar una extensión es desactivarla desde la línea de comandos. Para hacer esto, debes escribir:
code --disable-extension NOMBREEXTENSIÓN
Sin embargo, este método solamente funcionará para la ventana de VSC de la sesión actual. Al abrir otra instancia de Visual Studio Code aún encontrarás la extensión activa.
También, puedes deshabilitar temporalmente todas las extensiones, mediante el comando de:
code --disable-extensions
Deshabilitar extensiones para un espacio de trabajo
Si una determinada extensión no es útil para un proyecto en particular, puedes considerar deshabilitarla en el contexto del espacio de trabajo asociado a ella.
Todos los demás espacios de trabajo, antiguos o nuevos, seguirán teniendo esa extensión en funcionamiento como antes. Luego, también puede volver a habilitar la extensión localmente, una vez que esté deshabilitada.
Desinstalar una extensión
Si una extensión simplemente no hace exactamente lo que deseas o ya no la necesitas, puede desactivarla. También desde el menú que se abre desde la rueda del ratón, puedes presionar el botón de “Desinstalar” (o “Desinstalar”) la instalación seleccionada.
Desinstalar a través de la línea de comandos
Puedes deshabilitar una extensión desde el terminal. Utilizando el siguiente comando:
code --uninstall-extension 'nombreextension'
Requieren reiniciar la aplicación
Algunas operaciones con las extensiones (como la instalación, desinstalación o desactivación) pueden requerir un reinicio del entorno de desarrollo.
Visual Studio Code te notificará esta necesidad a través de la notificación “Solicitud de recarga” o “Recarga necesaria”. Simplemente haz clic en la notificación para reiniciar el entorno automáticamente.