Create and Publish VScode extension to the marketplace🚀😍

Create and Publish VScode extension to the marketplace🚀😍

Subscribe to our newsletter and never miss any upcoming articles

Listen to this article

image.png

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.

Why?🤔

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

🔸 Node.js

Node.js is a popular open-source JavaScript runtime that executes JavaScript outside of the browser. VS Code has support for JavaScript and TypeScript out-of-the-box as well as Node.js debugging. You'll need to have Node.js installed to be able to run your application in debug mode in VS Code. Check out the different installers if you don't already have Node. There are many different ways to install Node across different platforms, but the most straightforward way to install Node is to use the official installers from the Node website.

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 npm -v.

image.png

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 mkdir

Open VS Code terminal shortcut

Ctrl+Shift+Tilde(~)

Install Yeoman

npm install -g yo generator-code

image.png

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

yo code

The extension generator now asks you a series of questions needed to create a new extension.

image.png

What is New Color Theme, How to do in vs-code?

The 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 Extension (JavaScript)
  • 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

image.png After select 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

👇

image.png


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.

👇

image.png


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.

👇

image.png


What’s the name of your theme shown to the user? C4TBT Theme

image.png


Select a base theme? Dark

image.png


Initialize a git repository? (Y/n) N

I am not Initialize a git repository at that time, If u want you can choose Yes😊

image.png


After you answer the above all question, then it will be generated to us folder structure 👇

image.png

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 color-theme.json 🎨

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 👇

image.png

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.

image.png

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 👇

image.png

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 👇

image.png

😍Wow!

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.

Update your 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.

image.png

Theme 'readme' file

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.

image.png

package.json

Once you are done with creating your accounts, you will automatically be redirected to a page called Manage Publishers & Extensions.

image.png

VS Code marketplace - Manage Publishers & Extensions Page

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.

vsce package

Open VS code terminal and run the above command

image.png

VSIX file generate

😍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.

👉Step1:

Open your created VS Code marketplace account and click on +New extension drop-down as I have shown below

image.png

👉Step2: On click of drop-down select Visual Studio Code option

image.png

👉Step3: On click of Visual Studio Code** option we get a pop-up to upload our generated VSIX file to publish

image.png

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

image.png

After click Upload, you can see your extension to that market place 👇

image.png

😍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👇

😍😍 image.png

We can search Extention in direct VS code itself. Open VS Code - > Open Extesntion - > Search your theme name 👇

image.png

Resources:

image.pngGitHub

image.png 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 🧡

If you like my work and want to support the like more articals and open-source project's, now you can! Just: Buy Me A Coffee


Thanks for reading!🙏

If you liked this article and want more content like this, subscribe to LCO

 
Share this