Tema de código visual sin complicaciones: publicar extensiones

Crear temas es la parte divertida. Una vez completado, el siguiente paso es publicar tu tema para que tú y otros puedan disfrutar de tu creación.

Podría pensar que publicar una extensión de VS Code es un proceso sencillo, pero ese no es el caso. (Quizás esté acostumbrado a la facilidad de publicar paquetes npm y doy por sentado el registro).

De todos modos, debes publicar tu tema en dos lugares:

1. mercado de estudios visuales Para usuarios de VS Code
2. Abrir VSX Para otros editores de texto

Quizás también quieras publicar en Nueva gestión de proyectos. Facilite a otros el uso de su tema en otros contextos, como el resaltado de sintaxis. shiki.

Prepara tu tema

Cuando le pones un nombre a tu tema, no puedes ponerlo dentro de algo como @scope/theme-name. Hacerlo evitará que pueda publicar en Open VSX.

Así que asegúrese de que el nombre de su tema no tenga alcance. (este theme las palabras son opcionales):

{
  "name": "twilight-cosmos-theme",
}

Para incluir el icono del tema, necesitas 128px Un archivo de imagen cuadrado al que se puede acceder en su proyecto. pon esto abajo icon Puntos de atributo a archivar:

{
  "icon": "path/to/icon.png",
}

A continuación, querrás asegurarte de tener contributes escribe tu package.json documento. VS Code y otros editores de texto buscan esto para encontrar temas.

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

Finalmente, debe incluir algunas palabras clave para que su tema se pueda buscar en VS Marketplace y Open VSX.

Si tiene problemas, entregue los archivos de su tema a AI y pídale que genere palabras clave para usted 😉

{
  "keywords": (
    "theme",
    "dark theme",
    "twilight",
    "cosmos",
    "color-theme",
    "dark",
    "purple",
    "blue",
    "vscode-theme"
  ),
}

Publicar en Visual Studio Marketplace

Microsoft le permite publicar en Visual Studio Marketplace a través de vsce Si tiene un token de acceso personal de Cuenta de Azure DevOps.

Desafortunadamente, al momento de crear este artículo, tuve algunos problemas al configurar una cuenta de Azure Devops, por lo que tuve que publicar mi extensión mediante una ruta manual.

Hablaré de ambas rutas aquí.

Antes de publicar, necesita una cuenta de Visual Studio Marketplace. entonces, Inscribirse Compra una copia si aún no tienes una.

Luego haz lo siguiente:

• Hacer clic publicar extensión.
• Cree una cuenta de editor.

Este paso es necesario para publicar a través de vsce y rutas manuales.

Publicar a través de VSCE

Para hacer esto, necesita una cuenta de Azure DevOps. Una vez que lo tenga, puede crear un token de acceso personal usando estos pasos.

Nota: Algo molesto es que no puedes tener un token de acceso de por vida para Azure DevOps. El período máximo de validez es aproximadamente un año después.

También tenga en cuenta: tuve grandes problemas para crear una cuenta de Azure DevOps cuando probé esto: el backend seguía bloqueándose e incluso si copié y pegué la URL, ¡no pude encontrar la página correcta! De todos modos, si esto te sucede, no entres en pánico. Es posible que solo tengas que esperar entre 1 y 2 días antes de volver a intentarlo. Al final funcionará.

Una vez que tengas tu token de acceso personal, el resto de los pasos son bastante simples.

Primero, inicie sesión en VSCE utilizando el ID del editor creado en Visual Studio Marketplace. (¡Inserte el ID del editor, no el ID del usuario!).

npx vsce login <publisher_id>

Cuando te pida que insertes el token de acceso, debes insertarlo. Luego, ejecute el siguiente comando para publicar en el mercado:

npx vsce publish

¡Ya terminaste!

publicación manual

Si eres como yo y tienes problemas con los tokens de acceso personal, tendrás que seguir esta ruta. Afortunadamente, también es muy sencillo. Puede ir a Visual Studio Marketplace y hacer lo siguiente:

• Hacer clic publicar extensión.
• Hacer clic nueva extensión.
• usar vsce package comando para empaquetar su extensión como visx documento.
• Arrastrar y soltar empaquetado visx archivo para cargar su extensión.

¡Eso es todo!

Validar en Visual Studio Code

Sólo puede obtener la “verificación” en Visual Studio Marketplace si esta es su primera extensión y su extensión tiene al menos seis meses de antigüedad. Entonces, si desea ser verificado, configure un recordatorio después de seis meses y luego visita esta pagina Obtenga más información.

Publicar para abrir VSX

Gracias a Claude, aprendí que VS Code usa Visual Studio Marketplace, pero otros editores de texto como Cursor usan Abrir VSX.

Publicar en Open VSX es un poco complicado. Usted debe:

• Inicie sesión en Open VSX a través de GitHub.
• Crear un Fundación Eclipse Solar cuenta
• Vincula tu repositorio de GitHub a tu cuenta de Eclipse Foundation.
• Firme su acuerdo.
• Crear un espacio de nombres del editor y agregarlo como publisher en tu package.json documento.
• Crear un token de acceso.
• Entonces, finalmente, corre npx ovsx publish Publica tu paquete.

Asimismo, ovsx Cuando intente publicar por primera vez, se le solicitará un token de acceso personal. Afortunadamente, ovsx Parece haber un token de acceso de por vida, por lo que no tenemos que preocuparnos de que caduque.

Declarar espacio de nombres del editor

Esto es esencialmente “validar” usando Open VSX, pero Open VSX lo llama “reclamar” el espacio de nombres del editor para su validación. Sin entrar en demasiados detalles sobre el lenguaje, el proceso requiere algunas idas y venidas, pero se puede realizar ahora (no dentro de seis meses).

Después de crear el espacio de nombres del editor, verá una señal de advertencia obvia:

Para declarar el espacio de nombres del editor que necesita Cree un problema de GitHub usando Eclipse Foundation y declara que quieres declarar el espacio de nombres.

En ese número:

• Incluye tu repositorio de GitHub si lo haces público.
• Ofrezca otorgar acceso temporal a su repositorio de GitHub si es privado.

Alguien se encargará del resto.

El equipo de la Fundación Eclipse parece ser muy receptivo, por lo que no me preocupa un problema de comunicación aquí.

Incluye imágenes que se ajusten a tu tema.

Tiene sentido incluir imágenes para mostrar su tema. Readme.md documento. Hacer esto permite a los usuarios saber cuáles son los colores de su tema antes de decidir si descargarlo.

Desafortunadamente, ni VS Marketplace ni Open VSX le permiten usar URL relativas (las imágenes se romperán si usa enlaces relativos del repositorio), por lo que debe vincular a URL absolutas.

El mejor lugar para vincular es un repositorio de GitHub, siempre que esté configurado para acceso público.

La URL será así:

!(Alt Text)(https://raw.githubusercontent.com/<github_username>/<repo-name>/master/<path-to-image>)

Resumir

Publicar su primer tema del editor VS Code puede resultar tedioso. ¡Pero no permita que este proceso le impida a usted y a otros disfrutar de su tema!

En caso de que te lo preguntes, mi primer tema se llama Twilight Universe. Puedes conocer más sobre el proceso de creación. En mi artículo anterior.

¡Disfruta de este (algo frustrante) proceso! Lo harás antes de que te des cuenta.