Tema para Visual Studio Code "DarkEd"
Autor: Eder Nexón Llancari Guerra
Descripción:
Este proyecto es una extensión para Visual Studio Code que simplifica el proceso de desarrollo y despliegue en Azure DevOps. Con esta extensión, puedes realizar tareas como la instalación de Yeoman y el generador de código de Visual Studio, iniciar la depuración y configurar Azure DevOps de manera más eficiente.
Instalación de Yeoman y el generador de código de Visual Studio
nodejs:20.11.0
npm install -g yo generator-code
yo code
Iniciar la depuración (F5)
npm install vsce -g
Configurar Azure DevOps
Accede a Azure DevOps en https://dev.azure.com/.
Ve a tu perfil personal: https://aex.dev.azure.com/me?mkt=es-ES.
Accede al proyecto en el que deseas implementar la extensión: https://dev.azure.com/edermaster12/prueba001.
Crea tu organización si aún no la tienes.
Genera un token de acceso con permisos completos y duración indefinida.
Publicar la extensión en Visual Studio Marketplace
Accede a https://marketplace.visualstudio.com.
Selecciona "Publicar extensión".
Luego, elige "Crear Publisher": https://marketplace.visualstudio.com/manage/createpublisher.
Iniciar sesión y empaquetar la extensión
vsce login DarkEd
Pega el token que generaste en Azure DevOps cuando se te solicite.
Con el siguiente comando puedes crear el archivo que debes cargar en la plataforma
vsce package
DarkEd
Demo: Configuración del Tema "DarkEd"
Esta es una descripción detallada de la configuración del tema "DarkEd" para un editor de código o entorno de desarrollo. La configuración incluye definiciones de colores y resaltado de sintaxis. Vamos a explorar cada aspecto de esta configuración.
Colores del Tema
A continuación se presentan los colores definidos en el tema "DarkEd" con sus respectivas descripciones:
Colores de Fondo
editor.background: Color de fondo principal del editor (#000011).panel.background: Color de fondo del panel lateral (#010007).menu.background: Color de fondo del menú (#010033c7).sideBar.background: Color de fondo de la barra lateral (#010311).activityBar.background: Color de fondo de la barra de actividad (#01021b).statusBar.background: Color de fondo de la barra de estado (#060213).notifications.background: Color de fondo de las notificaciones (#010630e8).
Colores de Texto
editor.foreground: Color de texto principal (#ffffff).titleBar.activeForeground: Color de texto de la barra de título activa (#a3a3a3).breadcrumb.foreground: Color de texto de las migas de pan (#fffefe).textLink.foreground: Color de enlaces de texto (#00d9ff).list.hoverForeground: Color de texto al pasar el mouse sobre la lista (#6b10e2).statusBar.foreground: Color de texto de la barra de estado (#b9b8b883).notificationLink.foreground: Color de enlaces en las notificaciones (#00d9ff).
Colores de Resaltado
editorCursor.foreground: Color del cursor del editor (#00f7ff).editor.selectionBackground: Color de fondo de selección de texto (#10b4a779).editor.findMatchHighlightBackground: Color de fondo del resaltado de búsqueda (#5252529d).list.activeSelectionBackground: Color de fondo de selección de elementos de lista (#52032862).minimapSlider.hoverBackground: Color de fondo del control deslizante del minimapa al pasar el mouse (#08f7ff3a).gitDecoration.stageModifiedResourceForeground: Color del resaltado para recursos modificados en Git (#0464a3fa).
Otros Colores
badge.background: Color de fondo de las insignias (#27f1f1ec).extensionButton.prominentBackground: Color de fondo de los botones de extensión (#FA1F6C).checkbox.foreground: Color de los elementos de casilla de verificación (#00ebb8).tab.activeBorderTop: Color del borde superior de la pestaña activa (#0b00a8).
Estos son solo algunos ejemplos de los colores definidos en el tema "DarkEd". Cada uno de estos colores contribuye a la apariencia general del editor y permite una personalización detallada.
Resaltado de Sintaxis
La sección "tokenColors" define cómo se resaltan diferentes elementos de sintaxis en el código. Aquí hay ejemplos de algunas configuraciones:
- Comentarios (
"Comment"): Se muestran en cursiva con un color de texto gris (#838383).
- Variables (
"Variables"): Se muestran en un color de texto azul claro (#EEFFFF).
- Cadenas Constantes (
"String constant"): Utilizan un color de texto rosa (#fa71ff).
- Palabras Clave y Almacenamiento (
"Keyword, Storage"): Se muestran en un color de texto rosa (#ff0062).
- Etiquetas HTML (
"Tag"): Utilizan un color de texto rosa oscuro (#ff0077).
- Funciones y Métodos Especiales (
"Function, Special Method"): Se muestran en un color de texto cian (#00ffff).
Estas configuraciones de resaltado de sintaxis hacen que el código sea más legible y ayuda a identificar rápidamente diferentes partes del mismo.
Conclusión
La configuración del tema "DarkEd" es una forma poderosa de personalizar la apariencia visual de tu entorno de desarrollo. Al definir colores y estilos de resaltado de sintaxis, puedes adaptar el editor según tus preferencias y hacer que trabajar con código sea más agradable y eficiente.
¡Disfruta de tu experiencia de desarrollo con el tema "DarkEd"!
Descripción en Visual Studio Code:
Esta extensión te brinda una experiencia de desarrollo más fluida en Visual Studio Code al simplificar tareas repetitivas y optimizar tu flujo de trabajo con Azure DevOps. Con las funciones integradas, puedes ahorrar tiempo y centrarte en la creación de tu código.
¡Esperamos que esta extensión sea útil para tus proyectos de desarrollo y despliegue en Azure DevOps!
