Visual-Studio-CodeExtensiones-y-...

vokito

Entornos de desarrollo

1º Desarrollo de Aplicaciones Multiplataforma

Estudios España

Reservados todos los derechos.

No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
 Visual Studio Code

Victoria Ramírez Gómez Entornos de desarrollo Ces Juan Pablo II Cádiz

18.02.2024

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
 Indice.

Visual Studio Code.............................................. 1

Indice.................................................................... 2

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Qué es visual Studio Code................................. 3
Extensiones..........................................................4
Cómo instalar extensiones en Visual Code
Studio................................................................. 5
Extensiones populares de Visual Code Studio.. 5
Auto close tag:................................................ 5
Auto Rename Tag:.......................................... 6
Color HighLight:.............................................. 6
Prettier:........................................................... 7
Material Icon Theme:...................................... 7
Snippers............................................................... 8

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Las descargas sin publicidad se realizan con las coins

Entornos de desarrollo
Banco de apuntes de tu clase
 Qué es visual Studio Code
Visual Studio Code (VS Code) es un editor de código fuente desarrollado
por Microsoft que es ampliamente utilizado por programadores y
desarrolladores para escribir, editar y depurar código.

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
Una de las características clave de Visual Studio Code es su capacidad
para ser extendido mediante el uso de extensiones, también conocidas
como plugins. Las extensiones permiten a los usuarios personalizar y
ampliar las funcionalidades del editor según sus necesidades.

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Las descargas sin publicidad se realizan con las coins

 Extensiones
¿Qué son las extensiones?

En Visual Studio Code, las extensiones son módulos de software

adicionales que se pueden agregar para extender y personalizar las
funcionalidades del editor. Estas extensiones pueden ofrecer nuevas
características, herramientas y soporte para diferentes lenguajes de
programación, frameworks o tecnologías.

Podemos encontrar extensiones para una variedad de propósitos,

como soporte para nuevos lenguajes de programación, integración
con sistemas de control de versiones, herramientas de depuración,
temas visuales, snippets de código, entre muchas otras. Las
extensiones son desarrolladas por la comunidad de usuarios y
también por Microsoft.

Las extensiones permiten a los desarrolladores adaptar Visual Studio

Code según sus necesidades específicas.

(Mi Visual Code Studio con las extensiones que tengo y un tema)

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
 Cómo instalar extensiones en Visual Code Studio

Dentro del apartado de Extensiones, se proporciona un cuadro de

búsqueda en la parte superior. Aquí, podemos ingresar el nombre
de la extensión deseada o palabras clave relacionadas con la

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
funcionalidad que busca, por ejemplo si queremos programar con
java podemos buscar java como palabra clave.

Una vez localizada la extensión de interés, se procede a hacer clic en

el botón "Instalar".

Extensiones populares de Visual Code Studio.

Auto close tag:

Es una herramienta que facilita la escritura

de código HTML y XML al cerrar
automáticamente las etiquetas que abres.
Esta extensión es útil para mejorar la
productividad y reducir errores al programar en lenguajes que
requieren etiquetas de apertura y cierre, como HTML.

Cuando escribes la etiqueta de apertura <div>, por ejemplo, la

extensión "Auto Close Tag" automáticamente insertará la
etiqueta de cierre correspondiente </div> justo después del
cursor, ahorrándote el trabajo de escribir ambas etiquetas
manualmente.

Esto puede acelerar el proceso de escritura y minimizar los

errores tipográficos al evitar olvidar cerrar etiquetas. Además, es
compatible con varios lenguajes que utilizan etiquetas, como
HTML, XML, JSX (JavaScript XML), entre otros.

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Las descargas sin publicidad se realizan con las coins

 Auto Rename Tag:

Es otra herramienta útil que facilita la edición y

mantenimiento del código HTML y XML. Esta
extensión se encarga de mantener sincronizados
los nombres de las etiquetas de apertura y cierre

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
cuando decides cambiar el nombre de una de ellas.

Cuando cambias el nombre de una etiqueta de apertura (o de cierre),

la extensión "Auto Rename Tag" automáticamente actualizará el
nombre de la etiqueta para que coincida. Esto es especialmente útil al
refactorizar o modificar el código, ya que ayuda a evitar
inconsistencias y errores asociados con la desincronización de los
nombres de las etiquetas.

Color HighLight:

Es una herramienta que facilita la visualización y

comprensión de los colores en tu código. Su
funcionalidad principal es resaltar visualmente los
valores de colores que encuentras en tu código, ya
sea en archivos CSS, SASS, LESS, HTML o cualquier
otro lenguaje que utilice notación de colores.

Cuando tienes un valor de color en tu código, como "#ff0000" para el

color rojo, la extensión "Color Highlight" mostrará ese color de manera
destacada en el editor, permitiéndote identificar y reconocer
rápidamente los colores utilizados en tu código.

Esto puede ser útil para diseñadores y desarrolladores que trabajan

con estilos y temas, ya que proporciona una visualización rápida y
clara de los colores en el código, mejorando la comprensión y
facilitando la identificación de posibles problemas o ajustes
necesarios.

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Las descargas sin publicidad se realizan con las coins

 Prettier:

La extensión "Prettier" para Visual Studio Code es una

herramienta que integra el formateador de código
Prettier en el entorno de desarrollo. Prettier es una
herramienta que te ayuda a mantener un formato
consistente en tu código, independientemente del
estilo original. La extensión para Visual Studio Code facilita el uso y la
configuración de Prettier dentro del editor.

Material Icon Theme:

Es una extensión para Visual Studio Code que

cambia los iconos de los archivos y carpetas en el
explorador de archivos para que sigan el estilo de
diseño Material Design. Esta extensión es popular
entre los desarrolladores que prefieren un aspecto
más visualmente atractivo y coherente en su entorno de desarrollo.

Cuando instalas y activas la extensión "Material Icon Theme", los

iconos de archivos y carpetas en el explorador de archivos de Visual
Studio Code se reemplazarán con iconos coloridos y estilizados que
siguen el diseño característico de Material Design. Esto puede ayudar
a identificar rápidamente el tipo de archivo o carpeta que estás
viendo.

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
 Snippers
Los "snippets" son pequeños bloques de código reutilizables que se
pueden insertar fácilmente en el código mediante atajos de teclado o

Reservados todos los derechos. No se permite la explotación económica ni la transformación de esta obra. Queda permitida la impresión en su totalidad.
comandos específicos. Estos fragmentos son útiles para agilizar la
escritura de código, especialmente cuando trabajas con patrones
comunes o bloques repetitivos.

Cuando utilizas un snippet y al presionar la tecla Tab o Enter, el snippet se

expandirá automáticamente en el código completo asociado. Esto ahorra
tiempo y reduce errores tipográficos al proporcionar un medio rápido para
insertar porciones de código previamente definidas.

(En este código podemos ver que escribiendo solo el for, nos permite que
al tabular complete todo el código por nosotros)

a64b0469ff35958ef4ab887a898bd50bdfbbe91a-9898655

Las descargas sin publicidad se realizan con las coins