Create and Publish VScode extension to the marketplace🚀😍
What is Visual Studio Code?🧐
The most important tool for developers to write code is IDE (Integrated Development Environment). But here we need to discuss which IDE is best for developers? As we know in 2021 we have a lot of code-write IDE's are available, but the best IDE to do a lot of things is only Visual Studio Code-VSCode. It has powerful IDE-like features including a built-in debugger and terminal. I am using this IDE past 4yeas. Still, it's new to me for day-to-day activities.
Microsoft’s Visual Studio Code is a text editor with powerful IDE-like features. Side note: VS Code is a totally separate product from Visual Studio the IDE.
In terms of what is available right now, it seems like VS Code is a “best of both worlds” option between IDEs and Text Editors. Here are some more reasons why we’re using VS Code:
It is completely free.
It is non-opinionated and open source, with non-proprietary standards.
You can bring your favorite keybindings from Sublime, Vim, etc. with you.
It’s easy to customize and has many useful extensions.
It has powerful IDE-like features including a built-in debugger and terminal.
Hmm... I think your setup is completed Successfully! 😀
Now. It's time to know about to start to build own product extension 💪
Required Softwares setting up your environment 🧱😎
Majorly there are 2 software required to extension or plugin for VS Code
To make an extension for VS Code, you will need to install the following tools:
🔸 VS Code
You can check that you have Node installed by opening up the terminal and entering
node -v. Also make sure that
npm, the Node Package Manager that handles package installation for Node tools, is installed with
Once you have installed Node.js successfully, you can install Yeoman
Yeoman is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects.
After installed Yeoman, you can use npm, the package manager for Node. Open the terminal and enter the below command. Before that make a new directory using the command
Open VS Code terminal shortcut
npm install -g yo generator-code
Start Build your first
VS Code Extension 🤩
In your terminal, navigate to a directory in which you would like to create your extension. The extension generator will create a new folder in this directory with all of the files needed to build a working extension. To run Yeoman and the VS Code extension generator. enter below command to start
The extension generator now asks you a series of questions needed to create a new extension.
What is New Color Theme, How to do in vs-code?
Color Theme rules change syntax colorization . Configuring TextMate rules is a more advanced skill that requires knowledge of TextMate grammar. Until you’re familiar with TextMate, start fresh.
After entering that command we will get a list of options to build vs-code extensions👇.
- New Extension (TypeScript)
- New Color Theme
- New Language Support
- New Code Snippets
- New Keymap
- New Extension Pack
- New Language Pack (Localization)
In my case, I choose 👉
New Color Theme
New Color Themewe get a few more options to start to build an extension. I choose
No, start fresh
What’s the name of your extension? CodeHouse C4TBT Theme
What’s the identifier of your extension? codehouse-c4tbt-theme
The Default identifier for your extension to the name with all lowercase and hyphens swapped in for spaces.
Next, you can write a short description of your theme and pick a name that is shown to users.
What’s the description of your extension? The CodeHouse.C4TBT Color Theme is a gorgeous dark color theme designed for all developers.
What’s the name of your theme shown to the user? C4TBT Theme
Select a base theme? Dark
Initialize a git repository? (Y/n) N
I am not Initialize a git repository at that time, If u want you can choose Yes😊
After you answer the above all question, then it will be generated to us folder structure 👇
Actually, what are these files? what does each of these files do?
The .vscode folder contains launch.json, a file that configures how the debugger is launched for your project. The .vscodeignore file determines which files are ignored when an extension is installed. We can ignore these files and folders for now, as their default settings are fine.
The file vsc-extension-quickstart.md has some instructions on how to get started designing and building your theme extension. It’s worth giving it a quick read.
README.md is a place for you to add any descriptions or text you’d like users to read in the marketplace or on your GitHub repo. Similarly, CHANGELOG.md is where you will be able to manually take note of feature changes as you update your extension.
The most important files, however, are package.json and color-theme.json. package.json contains all of your extension’s settings. color-theme.json contains all of your color customizations and is where you will design your theme.
How to add logic and colors on
Get started editing your extension, open your extension project in VS Code.
To preview and debug your extension, hit F5 to run the extension in an Extension Development Host window. The Extension Development Host allows you to run your extension in a separate window, making it easy to debug and see your extension in action. To exit debugging mode, simply close the new window.
Try running your unedited extension in an Extension Development Host window.
With the extension generator, I selected the base theme as “Dark” which looks like 👇
Go to the theme file located in the themes folder in your extension. The theme file is a JSON file that has the structure: your-extension-name-color-theme.json.
At the top of the JSON file, you’ll see a section called colors. This is where you will make most of your edits. The colors section comes with a few default colors.
In this file, I already added my own colors with added a few more vs-code theme syntax
Get More about color theme syntax Link
These settings change the main parts of the editor, like the title bar, menu bar, activity bar, sidebar, and status bar. 👇
//Activity Bar "activityBarBadge.background": "#404954", "activityBarBadge.foreground": "#d3d2d2", //editor "editor.background": "#002b36", "editorCursor.foreground": "#F8F8F0", "editor.foreground": "#E6E6E6", "editorWhitespace.foreground": "#34383D", "editor.lineHighlightBackground": "#434c57", "editorLineNumber.activeForeground": "#d4d4d4dc", "editor.selectionBackground": "#46494d87", //list hover CSS "list.hoverBackground": "#09698180", "list.hoverForeground": "#d4d4d4", "list.focusBackground": "#09698180", "list.focusForeground": "#d4d4d4", "list.activeSelectionBackground": "#09698180", "list.activeSelectionForeground": "#d4d4d4", "list.inactiveSelectionBackground": "#09698180", "list.inactiveSelectionForeground": "#aeb1b0", "list.highlightForeground": "#aeb1b0", "list.inactiveFocusBackground": "#002b36", //Side Navbar "sideBar.background": "#002b36", "sideBar.foreground": "#aeb1b0", "sideBar.border": "#4049549d", "sideBarTitle.foreground": "#aeb1b1", "sideBarSectionHeader.foreground": "#aeb1b1", //Title Bar "titleBar.activeBackground": "#002b36", "titleBar.activeForeground": "#aeb1b0", "titleBar.inactiveBackground": "#002b36", "titleBar.inactiveForeground": "#aeb1b0", //Tabs "tab.activeBackground": "#014b5d", "tab.activeForeground": "#d4d4d4", "tab.activeBorder": "#9fc202", "tab.hoverBorder": "#bcbdbd", "tab.inactiveBackground": "#002b36", "tab.inactiveForeground": "#717272", //Extension Button "extensionButton.prominentForeground": "#404954", "extensionButton.prominentBackground": "#19f9d8", "extensionButton.prominentHoverBackground": "#19f9d7c7", "editorWidget.background": "#002b36", "statusBar.background": "#002b36", "statusBar.foreground": "#19f9d8", //Status Bar "statusBar.debuggingBackground": "#002b36", "statusBar.noFolderBackground": "#002b36", "statusBarItem.activeBackground": "#002b36", "statusBarItem.prominentBackground": "#002b36", "statusBarItem.prominentHoverBackground": "#09698180", //VS-Code Buttons "button.background": "#19f9d8", "button.foreground": "#002b36", "button.hoverBackground": "#19f9d7c7",
The color theme JSON file is simply a list of key/value pairs. The key is the feature you are customizing and the value is the hex color code you would like to assign to that feature. The resulting theme file should look like this 👇
To see our new changes on the
your-extension-name-color-theme.json file, in action, again hit F5 to run the extension in an Extension Development Host window.
The changes will be displayed in Host Window look like this 👇
Here I added very minimal and cool colors. Simply awesome right? I hope u liked those colors
Now it's time to publishing your theme extension to the VS Code marketplace
Once you are ready with your theme’s customizations, Now you can be ready to publish your extension to the VS Code marketplace.
The marketplace is a great way to showcase your themes to the public and grab their attention to install your theme on their machines.
README to tell users about your theme. Because that is the way you can show your theme to be visible in the VS Code extension marketplace.
Publish your extension, you’ll need to install Visual Studio Code Extensions, a command-line tool for packaging, publishing, and managing extensions. Open up your terminal again and run the
npm install -g vsce
Before publishing to market place we need to create account access to the VS Code marketplace is to create both a Microsoft account and a publisher profile on the management page for the VS Code marketplace. Here you can create a publisher profile to add your extensions to the marketplace.
Once you've created a publisher successfully! 😊. It's time to go back to your extension and edit the package.json file by adding publisher: publisher-name as a new key/value pair using your newly created publisher name.
Once you are done with creating your accounts, you will automatically be redirected to a page called Manage Publishers & Extensions.
Once we landing on this page we have the option to upload your extension, which will then be available in the VS Code marketplace.
Run the below command to create an extension build package for upload the resulting VSIX file. The VSIX file contains all of the information needed to install and run your extension.
Open VS code terminal and run the above command
😍Wow! You are created VSIX file Successfully!. It's time to upload your first VS code extension to the VS Code- Marketplace.
Just follow the few steps to complete to publish the extension to the public.
Open your created VS Code marketplace account and click on +New extension drop-down as I have shown below
👉Step2: On click of drop-down select Visual Studio Code option
👉Step3: On click of Visual Studio Code** option we get a pop-up to upload our generated VSIX file to publish
Once we get this popup click on the click to upload file or we can drag and drop the VSIX file which we generated through
vsce package command
👉Step4: After I did that file to the popup using the method of drag and drop, it's enabled the upload button. Simply proceed to click and that button to upload
After click Upload, you can see your extension to that market place 👇
😍Wow! You successfully published your extension to the VS Code marketplace.
It's time to search our published extension on public VS Code Marketplace I search my theme name on the search bar👇
We can search Extention in direct VS code itself. Open VS Code
- > Open Extesntion
- > Search your theme name 👇
Theme C4TBT Theme
That's all for this article now.
Hope you like the article. Stay Tuned for the next interesting article for VS Code. If really appreciate my work, kindly support me with Sponsoring 🧡
Thanks for reading!🙏
If you liked this article and want more content like this, subscribe to LCO