Create and Publish the VSCode extension to the marketplace🚀😍

·

8 min read

Create and Publish the VSCode extension to the marketplace🚀😍

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 IDEs available, but the best IDE to do a lot of things is Visual Studio Code-VSCode. It has powerful IDE-like features including a built-in debugger and terminal. I have been 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 your own product extension 💪

Required Software setting up your environment 🧱😎

There are 2 software required for 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 which 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 what is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects.

After installing 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 the VS Code terminal shortcut

Ctrl+Shift+Tilde(~)

Install Yeoman

npm install -g yo generator-code

image.png

Start to 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 the 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 a 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 selecting New Color ThemeWe get a few more options to start building 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 questions, it will be generated for 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, and 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 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 the Host Window and look like this 👇

image.png

😍Wow!

Here I added very minimal and cool colors. Simply awesome right? I hope u like those colors

Now it's time to publish 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 🫗

To 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 the market marketplace we need to create account access to the VS Code marketplace and 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.

To Support: Buy me a coffee ☕️

Did you find this article valuable?

Support Learn Code Online by becoming a sponsor. Any amount is appreciated!