Anterior

Siguientes

Uso e instalación de extensiones

Completado

En esta unidad, verá lo fácil que es buscar e instalar extensiones de Visual Studio Code. Como se ha visto antes, Visual Studio Code se instala con muchas extensiones integradas, pero no incluye compatibilidad con todos los entornos y lenguajes de desarrollo. Mediante el marketplace de extensiones, puede localizar las herramientas, lenguajes y depuradores que necesita para su flujo de trabajo concreto y preferencias personales. Además, hay muchas extensiones que amplían las eficaces características de Visual Studio Code para disponer incluso de mayor personalización y control, eficacia y quizás algo de diversión.

Marketplace de extensiones

En la unidad anterior, ha visto la lista predeterminada que se presenta al acceder al Marketplace de extensiones. Se examinará más detenidamente esa lista y se instalarán algunas cosas.

Búsqueda de extensiones

La barra de actividades se encuentra en la parte izquierda de la interfaz de usuario de Visual Studio Code. Si no ve una barra de actividades, puede activarla; para ello, desplácese por la secuencia de menús desplegables: Ver > Apariencia > Mostrar barra de actividades. El icono Extensiones es el que aparece resaltado en el gráfico siguiente.

De forma predeterminada, se muestran todos los iconos de actividad. Si no ve este icono, haga clic con el botón derecho en la zona vacía de la barra de actividad para ver la lista de iconos disponibles y seleccione Extensiones. Seleccione el icono de extensión para abrir la lista "Extensiones".

Nota

Hay un método abreviado de teclado para las extensiones. Mantenga el mouse sobre el icono Extensiones para ver las que tiene (varía según la plataforma).

Al ser la primera vez que instala extensiones, solo verá una lista de las más conocidas en el marketplace.

Esta lista es una manera de buscar extensiones, pero al haber tantas disponibles, resulta más rápido usar el cuadro de búsqueda de la parte superior.

Para hacerse una idea de la variedad de opciones disponibles para una categoría de extensiones determinada, escriba iconos en el cuadro de búsqueda. Debería ver muchas páginas de extensiones, organizadas según el orden predeterminado (una combinación del recuento de instalaciones y la clasificación). Puede ordenar de forma más específica si elige un criterio de ordenación en el icono de puntos suspensivos (...) de la esquina superior derecha del área de extensiones.

Instalación y administración de extensiones

La instalación es tan fácil como hacer clic en el botón Instalar en la entrada de una extensión en Marketplace. Ahora instalará varias. Use el cuadro de búsqueda para encontrar las siguientes extensiones y, luego, use el botón Instalar de cada una:

• Material Theme
• Prettier Now
• Bracket Pair Colorizer
• Live Server

Mientras instala, quita, deshabilita y habilita extensiones, el botón puede cambiar a un botón Recargar. Selecciónelo si procede.

Material Theme

Solo por diversión, experimente un poco con esta extensión. Una vez instalada y lista, abra los temas de color (recuerde que hay muchas maneras de llegar hasta allí, desde secuencias de menús desplegables a métodos abreviados de teclado y la página de bienvenida). Se usa el método abreviado de teclado directo Ctrl-K, Ctrl-T (Cmd-K, Cmd-T en macOS). Ahora, use las teclas Flecha arriba y Flecha abajo para cambiar el tema. Verá el cambio inmediatamente al seleccionar temas nuevos. Pruebe algunos de los temas materiales que aparecen en la lista hasta encontrar uno que le guste. Aunque no elija uno que prefiera ahora, si es como muchos de nosotros, le gustará cambiar rápidamente de tema de color de vez en cuando. Agregar muchas opciones puede ayudarle con esto, por lo que no dude en agregar más temas.

Esta extensión se incluye para ilustrar las características de personalización. Si no le gusta, puede quitarla o deshabilitarla de forma segura.

Prettier Now

Esta extensión es un embellecedor. Este término se refiere a la capacidad de un editor para dar formato a su código de forma automática mediante el uso de ciertas reglas que el diseñador cree que funcionan bien para el tipo de código con el que trabaja. Puede ser una herramienta sutil pero poderosa. Hay muchos embellecedores disponibles en el marketplace de extensiones, pero este tiene muchas opciones y es fácil de usar.

De nuevo, si no le interesa esta extensión, puede deshabilitarla o elijar otra.

Bracket Pair Colorizer

Como sucede con el embellecedor y el tema que se han instalado, esta extensión puede ayudar a que el código sea más eficiente con comentarios visuales, pero no es necesaria para el desarrollo web. Sin embargo, esta extensión puede ahorrarle mucho tiempo de solución de problemas y proporcionar a sus ojos cierto alivio.

Live Server

Esta extensión proporciona un servidor de desarrollo local con una característica de recarga en vivo para páginas estáticas y dinámicas. Facilita enormemente el desarrollo web, ya que proporciona actualizaciones en tiempo real del contenido en un explorador web. Como sucede con la mayoría de las extensiones, en el marketplace existen otras opciones para esta funcionalidad, pero por ahora se usará esta.

Esta extensión es la única aquí que se va a usar en unidades posteriores, y es posible que en otros módulos también se le indique que la instale, o bien una parecida. A continuación, se creará una página web sencilla y verá cómo funciona esta extensión.

Continuar