Creating your theme is the enjoyable half. After you’re accomplished, the subsequent step is to publish your theme so that you — and others — can take pleasure in your creation!
You’d assume that publishing a VS Code extension is a straightforward course of, however it’s not. (Perhaps I’m used to the convenience of publishing npm packages and take registries as a right.)
Anyway, you must publish your theme in two locations:
- Visible Studio Market for VS Code customers
- 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
Once you identify your theme, you can not put it below a scope like @scope/theme-name. Doing so will stop you from publishing to Open VSX.
So, make certain your theme identify is unscoped. (The theme phrase is non-compulsory):
{
"identify": "twilight-cosmos-theme",
}To incorporate an icon in your theme, you want a 128px sq. picture file that may be accessible inside your venture. Put this below the icon property to level to the file:
{
"icon": "path/to/icon.png",
}Subsequent, you wish to guarantee that you’ve got 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": "",
"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.
If you happen to’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 in case you 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 through the guide route.
I’ll speak about each routes right here.
Earlier than publishing, you want to have a Visible Studio Market account. So, enroll for one in the event 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 guide route.
Publishing through VSCE
For this to work, you want a Azure DevOps account. When you will have that, you possibly can create a Private Entry Token with these steps.
Notice: It’s kinda irritating you could’t have an lifetime entry token with Azure DevOps. The utmost expiry is about one yr later.
Additionally word: I had immense bother creating my Azure DevOps account once I tried this — the again finish saved hanging and I couldn’t discover the suitable 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’ll work, ultimately.
After you have the private entry token, the remainder of the steps is fairly simple.
First, you login to VSCE together 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 publishAnd also you’re accomplished!
Publishing manually
You’ll need to observe this route in the event you had issues with the private entry token like I did. Fortunately, it’s fairly simple 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 bundlecommand to bundle your extension as avisxfile. - Drag and drop the packaged
visxfile to add your extension.
That’s it!
Getting verified on Visible Studio Code
If that is your first extension, you possibly can solely get “verified” on the Visible Studio Market in case your extension is no less than six months outdated. So, if you wish to get verified, set a reminder in six months and go to this web page for extra info.
Publishing to Open VSX
Because of 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. It’s important to:
- 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
writerin yourbundle.jsonfile. - Create an entry token.
- Then, lastly, run
npx ovsx publishto publish your bundle.
Likewise, ovsx will ask you for a private entry token once 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 may be accomplished now (as an alternative of six months later).
After you have created a writer namespace, you’ll see a obtrusive warning signal:
To say the writer namespace, you want to create a GitHub subject with Eclipse Basis and state that you simply wish to declare the namespace.
In that subject:
- Embrace your GitHub repository (in the event you make it publicly out there).
- Provide to offer entry quickly to your GitHub repository (if it’s personal).
And somebody will deal with the remainder.
The workforce at Eclipse Basis appears to be fairly responsive, so I wouldn’t fear about communication breakdown right here.
Together with photographs in your theme
It is sensible 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 might be damaged in the event you use relative hyperlinks out of your repository — so you must 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 might be one thing like this:
 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!
If you happen to’re questioning, my first theme known as Twilight Cosmos. You’ll 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 understand it.
