No Problem Visible Code Theming: Publishing an Extension

Creating your theme is the enjoyable half. After you’re performed, the subsequent step is to publish your theme so that you — and others — can take pleasure in your creation!

You’d suppose that publishing a VS Code extension is a simple course of, but it surely’s not. (Possibly I’m used to the convenience of publishing npm packages and take registries with no consideration.)

Anyway, you need to publish your theme in two locations:

1. Visible Studio Market for VS Code customers
2. Open VSX for different textual content editors

You may additionally wish to publish to npm for others to make use of your theme simply for different contexts — like syntax highlighting through Shiki.

Making ready your theme

Whenever you title your theme, you can not put it beneath a scope like @scope/theme-name. Doing so will forestall you from publishing to Open VSX.

So, be certain your theme title is unscoped. (The theme phrase is elective):

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

To incorporate an icon to your theme, you want a 128px sq. picture file that may be accessible inside your challenge. Put this beneath the icon property to level to the file:

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

Subsequent, you wish to guarantee that you’ve a contributes key in your bundle.json file. VS Code and different textual content editors seek for this to search out themes.

{
  "contributes": {
    "themes": [
      {
        "label": "",
        "uiTheme": "vs-dark",
        "path": "./.json"
      }
    ]
  },
}

Lastly, you wish to embody a number of key phrases to make your theme searchable on each VS Market and Open VSX.

Should you’re having issues with this, give AI your theme file and ask it to generate key phrases for you 😉

{
  "key phrases": [
    "theme",
    "dark theme",
    "twilight",
    "cosmos",
    "color-theme",
    "dark",
    "purple",
    "blue",
    "vscode-theme"
  ],
}

Publishing to Visible Studio Market

Microsoft allows you to publish to Visible Studio Market through vsce you probably have a private entry token from an Azure DevOps account.

Sadly, whereas creating this text, I encountered a number of issues organising my Azure Devops account so I needed to publish my extension through the handbook route.

I’ll discuss each routes right here.

Earlier than publishing, that you must have a Visible Studio Market account. So, enroll for one in case you don’t have it but.

Then do the next:

• Click on on Publish Extension.
• Create a writer account.

This step is required for publishing each through vsce and the handbook route.

Publishing through VSCE

For this to work, you want a Azure DevOps account. When you will have that, you’ll be able to create a Private Entry Token with these steps.

Observe: It’s kinda irritating you could’t have an lifetime entry token with Azure DevOps. The utmost expiry is about one 12 months later.

Additionally notice: I had immense bother creating my Azure DevOps account once I tried this — the again finish stored hanging and I couldn’t discover the appropriate web page, even once I copy-pasted the URL! Anyway, don’t be alarmed if this occurs to you. You may simply want to attend 1-2 days earlier than you attempt once more. It’s going to work, ultimately.

Upon getting the private entry token, the remainder of the steps is fairly easy.

First, you login to VSCE along with your writer ID that you simply created in Visible Studio Market. (Insert the writer ID, not the consumer ID!).

npx vsce login 

You’ll need to insert the entry token when it asks you to. Then, run the subsequent command to publish to {the marketplace}:

npx vsce publish

And also you’re performed!

Publishing manually

You’ll need to observe this route in case you had issues with the private entry token like I did. Fortunately, it’s fairly easy as effectively. You’ll be able to go to Visible Studio Market and do the next:

• Click on on Publish Extensions.
• Click on New Extension.
• Use the vsce bundle command to bundle your extension as a visx file.
• Drag and drop the packaged visx file to add your extension.

That’s it!

Getting verified on Visible Studio Code

If that is your first extension, you’ll be able to solely get “verified” on the Visible Studio Market in case your extension is at the least six months previous. So, if you wish to get verified, set a reminder in six months and go to this web page for extra data.

Publishing to Open VSX

Due to Claude, I understood VS Code makes use of the Visible Studio Market, however different textual content editors, like Cursor, use Open VSX.

Publishing to Open VSX is a little more advanced. You must:

• Login to Open VSX through GitHub.
• Create an Eclipse Basis account
• Hyperlink your GitHub repository to the Eclipse Basis account.
• Signal their settlement.
• Create a writer namespace and add this because the writer in your bundle.json file.
• Create an entry token.
• Then, lastly, run npx ovsx publish to publish your bundle.

Likewise, ovsx will ask you for a private entry token if you attempt to publish for the primary time. Fortunately, ovsx appears to have a lifetime entry token appears so we don’t have to fret about it expiring.

Claiming the writer namespace

That is primarily getting “verified” with Open VSX, however Open VSX calls it “claiming” the writer namespace to get verified. With out harping on the language an excessive amount of — this course of takes a little bit of to-and-fro however will be performed now (as an alternative of six months later).

Upon getting created a writer namespace, you’ll see a obtrusive warning signal:

To say the writer namespace, that you must create a GitHub concern with Eclipse Basis and state that you simply wish to declare the namespace.

In that concern:

• Embrace your GitHub repository (in case you make it publicly obtainable).
• Provide to present entry quickly to your GitHub repository (if it’s personal).

And somebody will deal with the remaining.

The crew at Eclipse Basis appears to be fairly responsive, so I wouldn’t fear about communication breakdown right here.

Together with photographs to your theme

It is smart to incorporate photographs to showcase your theme within the Readme.md file. Doing so permits customers to get a way of your theme colours earlier than deciding whether or not they wish to obtain it.

Sadly, each VS Market and Open VSX don’t mean you can use relative URLs — photographs will probably be damaged in case you use relative hyperlinks out of your repository — so you need to hyperlink to an absolute URL as an alternative.

The most effective place to hyperlink to is the GitHub repository, so long as it’s set to public entry.

The URL will probably be one thing like this:

![Alt Text](https://uncooked.githubusercontent.com///grasp/)

Wrapping up

It may be tedious to publish your first VS Code editor theme. However don’t let that course of cease you from letting you — and others – take pleasure in your theme!

Should you’re questioning, my first theme is known as Twilight Cosmos. You could find out extra in regards to the creation course of in my earlier article.

Benefit from the (considerably irritating) course of! You’ll end it earlier than you realize it.