No Trouble Visible Code Theming: Publishing an Extension

Creating your theme is the enjoyable half. After you’re accomplished, the following 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 benefit of publishing npm packages and take registries with no consideration.)

Anyway, it’s important 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 by way of Shiki.

Making ready your theme

Once you identify 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 sure that your theme identify is unscoped. (The theme phrase is non-compulsory):

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

To incorporate an icon to your theme, you want a 128px sq. picture file that may be accessible inside your venture. 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 seek out themes.

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

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

For those who’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 helps you to publish to Visible Studio Market by way of vsce you probably have a private entry token from an Azure DevOps account.

Sadly, whereas creating this text, I encountered a number of issues establishing my Azure Devops account so I needed to publish my extension by way of the guide route.

I’ll speak about each routes right here.

Earlier than publishing, it’s essential to have a Visible Studio Market account. So, enroll for one should 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 by way of vsce and the guide route.

Publishing by way of VSCE

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

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

Additionally notice: I had immense hassle 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 would possibly simply want to attend 1-2 days earlier than you strive once more. It can work, finally.

After getting the non-public 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 person ID!).

npx vsce login <publisher_id>

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

npx vsce publish

And also you’re accomplished!

Publishing manually

You’ll should observe this route should you had issues with the non-public entry token like I did. Fortunately, it’s fairly easy as nicely. 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 very least six months outdated. 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 complicated. You must:

• Login to Open VSX by way of 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 whenever 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 basically 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 might be accomplished now (as a substitute of six months later).

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

To assert the writer namespace, it’s essential to create a GitHub subject with Eclipse Basis and state that you simply wish to declare the namespace.

In that subject:

• Embody your GitHub repository (should you make it publicly obtainable).
• Supply to offer entry quickly to your GitHub repository (if it’s non-public).

And somebody will deal with the remainder.

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

Together with pictures to your theme

It is smart to incorporate pictures 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 assist you to use relative URLs — pictures will probably be damaged should you use relative hyperlinks out of your repository — so it’s important to hyperlink to an absolute URL as a substitute.

The very best 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/<github_username>/<repo-name>/grasp/<path-to-image>)

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!

For those who’re questioning, my first theme known as Twilight Cosmos. You could find out extra concerning the creation course of in my earlier article.

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