The Plan
Okay, here’s the deal. You’re a coder, and you LIVE in your IDE. With so much time spent there, you want your colors to be exactly what you want! I hope to walk you step by step through the process of creating and publishing your own theme to the VSCode marketplace. Who cares if you’re the only one who installs it!
Prerequisites
You’ll need a few things to get started. A few of these are obvious…bear with me.
The internet
Visual Studio Code
Node.js
NPM (if you have node installed, you probably have this)
A browser
A Microsoft account
An Azure DevOps account (I’ll walk you through how to set this up below)
Software
Install the needed software
Create The Theme
Navigate to where you want your theme directory to live run yo code and choose the “New Color Theme” option, followed by “No, start fresh” then follow the remaining prompts to name and create your new theme. You can now open the project and edit the themes/your-theme-name.json file.
Theme Tips
If you have an existing theme you use that is “almost” right, you can generate a json file to work with by going to the command pallete in VSCode CMD + SHIFT + P and choosing “Developer: Generate Color Theme From Current Settings”
You can find what certain color scopes are by going to the command pallete in VSCode CMD + SHIFT + P and choosing “Developer: Inspect Editor Tokens and Scopes” and selecting the text you want to change.
Accounts
We’ll need to set up a couple accounts to prep for publishing your theme.
Azure DevOps
Go to dev.azure.com
Click “Start free” and login with your microsoft account.
Name your DevOps organization
Click on the user settings icon in the top right, and choose “Personal access tokens” from the dropdown.
Create a new access token
Name – Name the token whatever you want
Organization – Choose “All accessible organizations” from the dropdown
Expiration – Choose “Custom defined” and choose a date, I chose a date as far in the future as I could (a year).
At the bottom of the popup click “Show all scopes” and check the “Manage” box in the “Marketplace” section
Create the access token
Copy the token and save it somewhere safe
Note: You may not see the token listed after you create it. This is because the filter at the top is likely set to your organization. Click the access scope dropdown and choose “All accessible organizations” and your token should show up.
Visual Studio Marketplace
Go to marketplace.visualstudio.com/manage
Create a publisher
Fill out the name field (id should automatically be generated based on the name)
Name and id are the only required fields, but fill out the others as desired.
Hit “Create” and prove you aren’t a robot with the popup image challenge.
Final Prep
We’re almost there, we just need to tweak a few things in the project to match the accounts you created above.
Open package.json in your theme project and add the following
“keywords”: [
“some”,
“descriptive”,
“keywords”,
],
Publishing
At this point all the hard stuff is done. You can now publish you theme. First login to vsce with the publisher id from Visual Studio Marketplace, and the personal access token from Azure DevOps. Then you can package and publish your extension!
vsce package
vsce publish
Helpful Links / Examples
