Tema sencillo de Visual Studio Code: creación de extensiones

Hace unos años, cuando leí el artículo de Sarah Drasner Crear un tema de VS Codepensé en silencio, Es mucho trabajo…nunca podría hacer un tema…

Pero he aquí, seguí adelante e hice uno: logré que la mayor parte del tema funcionara en menos de seis horas y luego uno o dos días perfeccionando mis ajustes finales.

En esta publicación, quiero guiarte a través del proceso de creación de este tema y los pasos reales que seguí para crearlo.

Creo que es útil hablar de este proceso porque yo de No, es demasiado trabajo llegar Ah, ¿puedo hacerlo ya hecho…? Todo se hace en unas pocas horas.. (El resto es sólo tiempo dedicado a pulir).

Nunca pensé en hacer un tema de VS Code…

estoy rediseñando mi sitio web. He estado luciendo un diseño súper antiguo durante años y quería cambiarlo, y ahora finalmente lo estoy logrando.

he usado tema de drácula Para el fragmento de mi antiguo diseño, funcionó porque Drácula fue lo único que proporcionó un toque de color a mi diseño, que de otro modo sería sencillo.

Pero no encaja del todo con el diseño de mi nuevo sitio web.

Lo que quiero hacer es mejorar el resaltado de sintaxis de los bloques de código para que sean más coherentes con el resto del sitio.

Ahí empezó todo.

El tema variable Shiki CSS lo hace fácil

yo uso Astro para mi sitio web. shiki Es el resaltador de sintaxis integrado predeterminado de Astro.

Después de una investigación rápida, me di cuenta de que Shiki te permite crear temas. variables CSS – Sólo necesitamos elegir unos pocos colores.

Esto no suena demasiado complicado, así que dejé que la IA ayudara a desarrollar el tema de Shiki basándose en variables CSS. Si también usas Astro, aquí tienes el CSS y JavaScript que necesitarás:

:root {
  --shiki-foreground: #eeeeee;
  --shiki-background: #333333;
  --shiki-token-constant: #660000;
  --shiki-token-string: #770000;
  --shiki-token-comment: #880000;
  --shiki-token-keyword: #990000;
  --shiki-token-parameter: #aa0000;
  --shiki-token-function: #bb0000;
  --shiki-token-string-expression: #cc0000;
  --shiki-token-punctuation: #dd0000;
  --shiki-token-link: #ee0000;
}

pre.shiki,
pre.astro-code {
  padding: 1rem;
  border-radius: 0.5rem;
  color: var(--shiki-foreground);
  background-color: var(--shiki-background);
  overflow-x: auto;
}

pre.shiki code,
pre.astro-code code {
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: none;
}

import { createCssVariablesTheme } from 'shiki/core'

const shikiVariableTheme = createCssVariablesTheme({
  name: 'css-variables',
  variablePrefix: '--shiki-',
  fontStyle: true,
})

export default defineConfig ({
  // ...
  markdown: {
    shikiConfig: {
      theme: shikiVariableTheme
    }
  }
})

Hice un experimento rápido con los colores que ya se usan en el sitio y los comparé con varios temas populares como Drácula, el tema de Sarah. búhoy luz de la luna 2.

Esto me da la confianza para avanzar en mi propio tema, porque el resaltado de sintaxis avanza en la dirección correcta.

Sin embargo, para llevar esto más allá, tuve que abandonar el tema de las variables CSS y profundizar en Ficha de TextMate. Esto es crucial porque algunos bloques de código se ven absolutamente horribles y los tokens TextMate brindan un control más preciso sobre cómo y qué colores se obtienen.

Aquí es donde comienza la parte “difícil”.

Deje que la IA le ayude con las gamas TextMate

Afortunadamente, la inteligencia artificial puede ayudar. Si la IA no estuviera aquí, probablemente me habría rendido ahora mismo.

Esto es lo que le pedí a la IA que hiciera:

1. Dije que quería hacer un tema personalizado.
2. Le digo que cree un andamio para mí.
3. Le pedí que buscara el archivo de tema de Moonlight 2 como referencia y creara una etiqueta con alcance de TextMate basada en ese archivo.

Lo conseguí para incorporar los colores usados ​​en palabras clave semánticas como foreground, background, keyword – Al igual que el tema variable Shiki CSS.

Le pedí que juntara todos los colores en uno. color objeto para que pueda tener un palette Un objeto que contiene sólo nombres semánticos.

Se crea aproximadamente de la siguiente manera:

const colors = {
  purple: '...',
  blue: '...',
  // ...
}

const palette = {
  foreground: '...',
  background: '...',
  // ...
}

export default {
  colors: {
    // Used for theming the text editor
  },
  displayName: 'Display Name of your Theme',
  name: 'your-theme-name',
  tokenColors: (
    {
      name: 'Scope name (optional)',
      scope: (/*scopes used*/),
      settings: {
        foreground: /* change color */,
        background: /* background of the text */,
        fontStyle: /* normal, bold or italic */,
      }
    }
  )
}

Debe proporcionar VS Code con JSON para configurar, por lo que también le pedí a AI que creara un script de compilación que convierta el formato anterior a .json documento.

Puedes encontrar el script de compilación y todo lo que usé en repositorio de GitHub.

depuración local

Es imposible depurar el resaltado de sintaxis en mi sitio porque tengo que reiniciar manualmente el servidor cada vez que cambio una variable.

Entonces le pedí consejo a AI.

dice que puedo usar Host de extensión para VS Code Desarrollar para local, luego crear .vscode/launch.json El archivo contiene el siguiente contenido:

{
  "version": "0.2.0",
  "configurations": (
    {
      "name": "Extension",
      "type": "extensionHost",
      "request": "launch",
      "args": (
        "--extensionDevelopmentPath=${workspaceFolder}"
      )
    }
  )
}

Para ejecutarlo puedes usar F5 (Windows) o fn + F5 (Mac) y aparecerá una nueva ventana del editor; en esta nueva ventana puede cambiar el tema a su tema personalizado.

Descubrí que usar las ventanas del host extendido es muy simple porque:

• Si cambia el tema, la ventana tendrá un tema diferente en comparación con otros editores de texto abiertos.
• La palabra clave de host extendido se destaca en el título.

Ahora, todo está borroso en este punto, así que no recuerdo si necesitas incluir lo siguiente en tu package.json Archivo utilizado para cambiar de tema en el host de extensión. Si es así, por favor inclúyelo:

{
  "contributes": {
    "themes": (
      {
        "label": "Your Theme Name",
        "uiTheme": "vs-dark",
        "path": "<path-to-your-theme>.json"
      }
    )
  }
}

Comprender el alcance de TextMate

Primero, copié y pegué la imagen e intenté dejar que la IA ajustara los distintos marcadores según los colores que elegí. Pero rápidamente se volvió frustrante.

cualquiera de:

• La IA tiene el rango de texto incorrecto, o
• Está cubierto por algo más.

No tengo ni idea. Pero, afortunadamente, puedes depurar fácilmente los ámbitos de TextMate utilizando el comando “Desarrollador: Tokens y ámbitos del Editor Inspector”.

Cuando esté en este modo, puede hacer clic en cualquier texto y aparecerá una ventana. Contiene toda la información que necesita para ajustar el alcance de TextMate.

A continuación le indicamos cómo leer lo que está sucediendo:

• prospecto: Le indica el alcance actual de la actividad. En este caso, el ámbito de actividad es variable.
• Alcance de TextMate: Le indica los rangos de TextMate disponibles que se pueden usar para este token específico.

Los osciloscopios TextMate funcionan de una manera interesante. Llegué a las siguientes conclusiones mediante experimentación, por lo que es posible que no sean 100% precisas:

1. Puede utilizar cualquier parte del rango disponible. variable, variable.propy variable.prop.css Todo funciona.
2. Puede aumentar la especificidad indicando más atributos. variable.prop.css > variable.prop > variable En términos de concreción.
3. Los rangos más altos son más específicos que los rangos más bajos. variable > meta.function.misc.css.
4. Puede usarlos para establecer otros ámbitos, como selectores de CSS. Si necesita cubrir un rango más alto. meta.function variable > variable

¿Cómo elijo los colores para mi tema?

Este es el tema más importante al crear un tema. No tiene sentido un tema si el resaltado de sintaxis no permite a los desarrolladores leer el código.

Aquí me vienen a la mente dos artículos:

Esencialmente, los principios que aprendí de estos dos artículos son:

• Queremos que los aspectos más destacados se destaquen.
• Si utilizas el mismo brillo y croma, los colores se verán muy similares y será difícil distinguirlos.
• Si todo está resaltado, no se resalta nada.
• Si todo importa, entonces nada importa.

Básicamente, estamos hablando de principio de contraste Al diseñar. Como ya estoy diseñando para que alguien lo lea, estos son mis siguientes pensamientos:

1. ¿Cómo dirijo mis ojos?
2. ¿Cuáles son los elementos importantes que debo ver/comprender?
3. ¿Qué elementos son menos importantes?

Así de simple me pongo a trabajar:

• Functions y methods importante, así que tenían que ser fuertes, así que usé cyan Este es el color más fuerte de mi paleta.
• este export ¡La palabra clave también es importante porque significa exportar!
• Keywords como import y function Puede ser bastante silencioso, por lo que purple Esto es.
• Strings puede ser green – porque se ven bastante bien en una lista de texto dentro de un archivo JSON.

Experimenté un poco con el resto de colores, pero al final me decidí por el siguiente:

• Constants Sí orange porque es fácil detectarlos
• Variables Sí white-Más o menos, ya que esta es la mayor parte del texto: agregarle color crea el efecto de “diarrea ligera navideña” que mencionó Tonsky.
• Properties Sí blue Porque son como caballos de batalla que necesitan diferenciación de colores, pero no lo suficiente como para llamar mucho la atención.

Luego recurrí a HTML/Astro/Svelte:

• Tags Es rojo porque son algo importantes, y el rojo es más fácil de leer que el cian.
• Attributes Sí purple por la misma razón keywords.
• Components Sí orange porque necesitan ser diferentes de Tags.
• Puntos de bonificación: Tags y Components es relevante – entonces red y orange El sentimiento está aquí.

Finalmente, resaltado de sintaxis CSS. Casi todo parece correcto a estas alturas, excepto:

• CSS Functions debería ser cyan Como en JS.
• Punctuation debe estar silenciado para que podamos diferenciar fácilmente -- del resto del texto.
• Property puede ser green Porque el azul es demasiado opaco en este caso y green Agradable a la vista cuando se contrasta con otros colores fuertes.

Desafortunadamente, el resaltado de sintaxis para clases anidadas es un poco confuso (son greenpero deberían ser orange), pero no hay nada que pueda hacer al respecto.

colores de depuración

VS Code se basa en electrónicopor lo que es fácil depurar y probar colores. ¡Todo lo que tengo que hacer es activar las herramientas de desarrollo, verificar los colores que quiero cambiar y cambiarlos directamente para obtener actualizaciones en vivo!

Resumir

Lo más importante que aprendí durante este proceso fue dejar que la naturaleza siga su curso. Una apertura puede llevar a otra, y luego a otra, y lo que parecía “imposible” puede convertirse en “oh, ¿hecho?”. dentro de unas pocas horas.

llamo a mi tema universo crepuscular (La inteligencia artificial ayuda con el nombramiento). Puedes encontrarlo en:

¿Cómo publico mi extensión? Este es el tema de un breve artículo de seguimiento que estoy escribiendo.

Mientras tanto, esto es repositorio de GitHub Si quieres aprovechar todo lo que he hecho. ¡No dudes en hacer sugerencias de edición para mejorar este tema!

por fin, Suscríbete a mi newsletter por correo electrónico Si estás interesado en conocer mis aventuras creativas. 🙂

Eso es todo. ¡Gracias por leer y espero que te hayas divertido!