Launch a 'product' in the VS Code marketplace in 30 minutes or less

Launch a 'product' in the VS Code marketplace in 30 minutes or less

<strong>The process of building an extension for VS Code and launching it in their marketplace was surprisingly enjoyable and more importantly an invaluable learning experience. So I wanted to share a way for anyone of any skill level to build and launch their own extension—a mini “product” that can be immediately available for millions of VS Code users.</strong>

The process of building an extension for VS Code and launching it in their marketplace was surprisingly enjoyable and more importantly an invaluable learning experience. So I wanted to share a way for anyone of any skill level to build and launch their own extension—a mini “product” that can be immediately available for millions of VS Code users.

If you’ve never built an extension before, designing your own theme is a great to way to familiarize yourself with the tools and processes required to build VS Code extensions.

This quick tutorial is going to take you all the way from opening VS Code to publishing your first theme in the marketplace. Jump ahead if you’re already familiar with certain steps.

Getting started with color themes

VS Code has tons of out-of-the-box themes that you can access using the command Preferences: Color Themewhich opens a menu of available themes, like Light+, Dark+, Monokai, Red, and others. If you’re looking for even more customizations, the VS Code marketplace has thousands of themes available to download.

I recommend trying a few different themes. Themes are the setting for all of your development—the backdrop for the magic of software development. Themes can inspire you (or conversely depress or bore you). So while subtle, themes really matter.

The basic workflow that we’ll follow to build a VS Code theme can be summarized with three key steps:

  1. Create the framework for your extension using an extension generator
  2. Design your extension by adding color customizations
  3. Publish your extension to the marketplace by creating a Microsoft account and publisher profile

The timer starts now!

Setting up your environment

To make an extension for VS Code, you will need to install the following tools:

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.

Once you have installed Node, you can install Yeoman and the Visual Studio Code Extension Generator. Together these tools will automatically build the basic framework of your extension with the necessary files.

Yeoman is known as the “web’s scaffolding tool.” It provides easy access to a large ecosystem of generators to quickly jumpstart projects. The Visual Studio Code extension generator will guide you through the process of laying out your extension’s file structure.

To install both Yeoman and the VS Code extension generator, you can use npm, the package manager for Node. Open the terminal and enter:

npm install -g yo generator-code

Once the extension generator is installed, you’re ready to start building your color theme extension.

Building the scaffolding for your 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:

yo code

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

There are a few types of extensions that the generator can help create. We’re going to be building a color theme, so choose that option.

What type of extension do you want to create? New Color Theme

The next question asks about TextMate themes. TextMate 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.

Do you want to import or convert an existing TextMate color theme? No, start fresh.

Now it’s time to name your extension. Naming is going to be key to getting user interest and adoption. My color theme uses a shade of blue from our Code Time extension and is named after our mascot, Cody.

What’s the name of your extension? Cody Blue

The identifier for your extension defaults to the name of your extension, but all lowercase and with hyphens swapped in for spaces.

What’s the identifier of your extension? cody-blue

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? A dark blue theme
What’s the name of your theme shown to the user? Cody Blue

Lastly, select a base theme. You will build your theme on top of the defaults for the base theme.

Select a base theme: Dark

After you answer the last question, the generator will create the following files in a folder named using your extension’s identifier:

├── .vscode
│ └── launch.json
├── themes
│ └── Cody Blue-color-theme.json
├── .vscodeignore
├── package.json

What do 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 has some instructions on how to get started designing and building your theme extension. It’s worth giving it a quick read. 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, is where you will be able to manually make note of feature changes as you update your extension.

The most important files, however, are package.json and color-theme.jsonpackage.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.

Choosing your theme’s color customizations

To get started editing your extension, open your extension project in VS Code.

To preview and debug your extension, hit Function + 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 this:

To make color tweaks, 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.

Let’s delete them for now, so you can use your own colors.

There are two types of customizations that can be made: workbench and syntax. Workbench customizations change the color of the editor and its views, while syntax customizations affect the look of the source code in the editor.

For now, let’s focus on making workbench customizations, which cover the most prominent features of VS Code.

Add the following lines to your theme file in the colors section. These settings change the main parts of the editor, like the title bar, menu bar, activity bar, sidebar, and status bar.

// title bar (macOS)
"titleBar.activeBackground": "#384357",
"titleBar.activeForeground": "#afafaf",
"titleBar.inactiveBackground": "#29303f",
"titleBar.inactiveForeground": "#afafaf",

// menu bar (PC/Linux users)
"menu.background": "#384357",
"menu.foreground": "#afafaf",

// activity bar
"activityBar.background": "#384357",
"activityBar.foreground": "#00B4EE",
"activityBar.inactiveForeground": "#afafaf",

// side bar
"sideBar.background": "#384357",
"sideBar.foreground": "#afafaf",
"sideBarTitle.foreground": "#00B4EE",
"sideBarSectionHeader.background": "#384357",
"sideBarSectionHeader.foreground": "#afafaf",

// status bar
"statusBar.background": "#384357",
"statusBar.foreground": "#afafaf",
"statusBar.noFolderBackground": "#384357",
"statusBar.noFolderForeground": "#afafaf",
"statusBar.debuggingBackground": "#384357",
"statusBar.debuggingForeground": "#afafaf",
"statusBarItem.hoverBackground": "#29303f",

// editor
"editor.background": "#191e27",
"editorLineNumber.foreground": "#afafaf",
"editorLineNumber.activeForeground": "#00B4EE",

// editor groups and tabs
"editorGroupHeader.tabsBackground": "#14181f"

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:

You’ll notice that after you enter the hex code for a color, VS Code shows a color picker if you hover over the hex code again. The pop up will also tell you what the feature you are changing will do to your editor’s appearance.

Try picking your own values to update your color scheme.

To see the new colors in action, again hit Function + F5 to run the extension in an Extension Development Host window.

The changes above should look like this:

Want to see what other themes have customized? Check out Shades of Purple and poke through its GitHub repo for even more inspiration.

Want to change even more? The VS Code documentation lists every feature that you can customize. You can edit everything from the integrated terminal to notification toasts to dropdown menus. Feel free to add any other changes you’d like.

Publishing your theme extension to the VS Code marketplace

Once you are satisfied with your theme’s customizations, you can publish your extension to the VS Code marketplace. The marketplace is a great way to showcase your theme so other VS Code users can find and install your theme.

First, update your README to tell users about your theme. Your README will be visible in the VS Code extension marketplace.

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:

npm install -g vsce

The fastest way to gain 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, be sure 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 create your accounts, you will automatically be redirected to a page called Manage Publishers & Extensions.

You have the option to upload your extension, which will then be available in the VS Code marketplace. Simply run vsce package and upload the resulting VSIX file. The VSIX file contains all of the information needed to install and run your extension.

However, if you want to publish from the command line (which I’d recommend because it’s easier to push updates to your extension), you will need to create an Azure DevOps Organization.

To do so, click on your name or email in the top right of the navigation bar. This will take you to a page to create a new organization. Click ‘Create new organization’.

The next window will let you create a name for your Azure DevOps organization.

Once you’ve created your organization, click on your avatar in the top right of the navigation bar. Scroll down and click on Security.

Click ‘Personal access tokens’ and create a new token. Select the following settings:

You’ll now see an access token. Copy it, as you will not be able to see it again.

You can now associate your publisher name, which you created earlier, with vsce. In your terminal, enter:

vsce login (publisher name)

Next, vsce will ask you for your Personal Access Token, which you created through your Azure DevOps organization. Enter the token when prompted.

Again in the terminal, navigate to the folder containing your extension files. To finally publish your extension, enter:

vsce publish

You will receive a warning that you don’t have a repository. Follow the prompts to ignore this for now.

You’re done! Shortly after publishing, vsce will give you a link to see your extension in the extension marketplace.

You can also go back to the publisher manager page to see the status of your extension.

Making a few final touches

It’s good practice to add an icon to your extension and a GitHub repo where others can see the source code. You will need a GitHub repo to add an icon.

First, create a repository from your extension folder and push it to GitHub (or another repository hosting service).

Find the URL of your repository and add the following snippet to package.json:

   "repository": {
"type": "git",
"url": ""

To add an icon, create a folder called images in your extension folder. Add an image to this folder you would like to use as your icon. The icon should be a PNG and at least 128x128. I chose a solid color from my theme.

Next, add the following key/value pair to package.json:

"icon": "images/icon.png"

Before you publish again, be sure to increment the version number in package.json. Once you’ve done that, you can publish again by simply running vsce publish.

Want to see my theme? Find my theme in the marketplace and the source code on GitHub.

Let the world know

Finally, if you want the world to know about your first mini “product” or them extension launch, you can get help tweeting it out or launch on Product Hunt.

Here’s how you build a simple link with a message your friends and network can easily share.

Start with:

After = add your text, but make sure to replace all spaces with %20—as you can see in the example below.,%20VS%20Code%20users,%20get%20project%20and%20time%20reports%20and%20other%20metrics%20for%20free,%20right%20in%20your%20editor%20with%20the%20Code%20Time%20extension—launching%20today

Now the fun begins—keep checking back on your extension web page to see how many downloads you get!

If you enjoyed this tutorial, check out the extension my team just launched: Code Time.

Originally published by Geoff Stevens at

Learn more

☞ C# Developers: Double Your Coding Speed with Visual Studio

☞ Learn Visual Studio Code

☞ Coding for Visual Learners: Learning JavaScript from Scratch

☞ Pre-Programming: Everything you need to know before you code

☞ RPG Core Combat Creator: Learn Intermediate Unity C# Coding

☞ The Complete 2019 Web Development Bootcamp

Best 22 Visual Studio Code Extensions for Web Development

Best 22 Visual Studio Code Extensions for Web Development

Best Visual Studio Code Extensions for Web Development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!

Best Visual Studio Code Extensions for Web Development. One of the most impressive parts of Visual Studio Code is customizability, especially via extensions. If you’re a web developer, you won’t be able to live without installing these extensions!

Want to improve your Web Development workflow? You won't be able to live without installing these extensions for Visual Studio Code!

Table of Contents

Want to install all of the extensions listed below at once?! Check out The Web Development Essentials Extension

Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just Check out Learn Visual Studio Code to learn everything you need to know about about the hottest editor in Web Development for just $10!0!## 1. Debugger for chrome

Believe it or not, debugging JavaScript means more than just writing console.log() statements (although that’s a lot of it). Chrome has features built in that make debugging a much better experience. This extension gives you all (or close to all) of those debugging features right inside of VS Code!

2. Javascript (ES6) Code Snippets

I loooove snippet extensions. I’m a firm believer that there’s no need to retype the same piece of code over and over again. This extensions provides you with snippets for popular pieces of modern (ES6) JavaScript code.

Side note…if you’re not using ES6 JavaScript features, you should be!

3. ESLint

Want to write better code? Want consistent formatting across your team? Install ESLint. This extension can be configured to auto format your code as well as “yell” with linting errors/warnings. VS Code specifically is also perfectly configured to show you these errors/warnings.

Check out the ESLint docs for more info.

4. Live server

Make changes in code editor, switch to browser, and refresh to see changes. That’s the endless cycle of a developer, but what if your browser would automatically refresh anytime you make changes? That’s where Live Server comes in!

It also runs your app on a localhost server. There are some things you can only test when running your app from a server, so this is a nice benefit.

5. Bracket Pair Colorizor

Brackets are the bane of a developer’s existence. With tons of nested code, it gets almost impossible to determine which brackets match up with each other. Bracket Pair Colorizer (as you might expect) colors matching brackets to make your code much more readable. Trust me, you want this!

6. Auto Rename Tag

Need to rename an element in HTML? Well, with Auto Rename Tag, you just need to rename either the opening or closing tag, and the other will be renamed automatically. Simple, but effective!

7. Quokka

Need a quick place to test out some JavaScript? I used to open up the console in Chrome and type some code right there, but there were many downsides. Quokka gives you a JavaScript (and TypeScript) scratchpad in VS Code. This means you can test out a piece of code right there in your favorite editor!

8. Path Intellisense

In large projects, remembering specific file names and the directories your files are in can get tricky. This extension will provide you intellisense for just that. As you start typing a path in quotations, you will get intellisense for directories and file names. This will save you from spending a lot of time in the file explorer :)

9. Project Manager

One thing I hate is switching between projects in VS Code. Every time I have to open the file explorer and find the project on my computer. But that changes with Project Manager. With this extension, you get an extra menu in your side menu for your projects. You can quickly switch between projects, save favorites, or auto-detect projects Git projects from your file system.

If you work on multiple different projects, this is a great way to stay organized and be more efficient.

10. Editor Config

Editor Config is a standard of a handlful of coding styles that are respected across major text editors/IDEs. Here’s how it works. You save a config file in your repository which your editor respects. In this case, you have to add an extension to VS Code for it to respect these config files. Super easy to setup and works great on team projects.

Read more on the Editor Config Docs.

11. Sublime Text Keymap

Are you an avid Sublime user, nervous to switch over to VS Code? This extension will make you feel right at home, by changing all of the shortcuts to match those of Sublime. Now, what excuse do you have for not switching over?

12. Browser Preview

I love the Live Server extension (mentioned above), but his extension goes another step further in terms of convenience. It gives you a live-reloading preview right inside of VS Code. No more having to tab over to your browser to see a small change!

13. Git Lens

There a bunch of git extensions out there, but one is the most powerful with tons of features. You get blame information, line and file history, commit searching, and so much more. If you need help with your Git workflow, start with this extension!

14. Polacode

You know those fancy code screenshots you see in articles and tweets? Well, most likely they came from Polacode. It’s super simple to use. Copy a piece of code to your clipboard, open up the extension, paste the code, and click to save your image!

15. Prettier

DONT spend time formatting your code…just DONT. There’s no need to. Ealier, I mentioned ESLint which provides formatting and linting. If you don’t need the linting part, then go with Prettier. It’s super easy to setup and can be configured to formatted your code automatically on save.

Never worry about formatting again!

16. Better Comments

This extension color codes various types of comments to give them different significance and stand out from the rest of your code. I use this ALL THE TIME for todo comments. It’s hard to ignore a big orange comment telling me I’ve got some unfinished work to do.

There are also color codes for questions, alerts, and highlights. You can also add your own!

17. Git Link

If you’ve ever wanted to view a file that you’re working on in Github, this extension is for you. After installing, just right-click in your file and you’ll see the option to open it in Github. This is great for checking history, branch versions, etc. if you’re not using the Git Lens extension.

18. VS Code Icons

Did you know you can customize the icons in VS Code? If you look in settings, you’ll seen an option for “File Icon Theme”. From there you can choose from the pre-installed icons or install an icon pack. This extension gives you a pretty sweet icon pack that is used by over 11 million people!

19. Material Icon Theme

Fan of Google’s Material design? Then, check out this Material themed icon pack. There’s hundreds of different icons and they are pretty awesome looking!

20. Settings Sync

Developers, myself included, spend a lot of time customizing their dev environment, especially their text editors. With the Settings Sync extension, you can save your setting off in Github. Then, you can load them to any new version of VS Code with one command. Don’t get caught without your amazing setup ever again!

21. Better Align

If you’re the kind of person who loves perfect alignment in your code, you need to get Better Align. You can align multiple variable declarations, trailing comments, sections of code, etc. There’s no better way to get a feel for how amazing this extension is than installing it and giving it a try!

22. VIM

Are you a VIM power user? Bless you if you are, but you can take all of that VIM power user knowledge and use it right inside VS Code. Not the path I personally want to go, but I know how insane productivity can be when using VIM to its potential, so more power to you.

Mobile App Development Company India | Ecommerce Web Development Company India

Mobile App Development Company India | Ecommerce Web Development Company India

Best Mobile App Development Company India, WebClues Global is one of the leading web and mobile app development company. Our team offers complete IT solutions including Cross-Platform App Development, CMS & E-Commerce, and UI/UX Design.

We are custom eCommerce Development Company working with all types of industry verticals and providing them end-to-end solutions for their eCommerce store development.

Know more about Top E-Commerce Web Development Company

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

Visual Studio Code Settings and Extensions for Faster JavaScript Development

I have been using Visual Studio Code for more than two years, when I jumped on it from Sublime Text.

I spend about 5–6 hours every day inside VS Code so it’s imperative that it is tailored to my needs to make me as productive as possible. Over the years, I have tried many extensions and settings but now I feel settled with what I have so it’s worth talking about them.


Prettier Code Formatter

I use Prettier for code formatting across all of my projects and I’ve set up this extension so that it automatically formats my HTML/CSS/JS when I hit ⌘ + S. This has allowed me to get rid of language-specific code formatters.


I use this extension along with npm intellisense (below) to ensure that my package.json is up to date and not bloated with modules that I am not using.

npm Intellisense

This extension indexes my package.json and allows me to autocomplete my import statements when requiring modules.

Bracket Pair Colorizer

This extension color codes all of my brackets, allowing me to quickly see where each code block starts and ends.

React Refactor

This is the newest extension that I have added to my arsenal and I really like it. It lets you select some JSX and refactor it out into a custom React Class, function, or hook.

Auto Close Tag

Another simple extension that does one thing well: auto-closes my JSX tags.


I recently moved from the native Source Control setting that VSCode has to Gitlens. I like this extension because it lets me:

  • Automatically see the git blame for the current line
  • View a more detailed history on hover
  • Reset changes via the gutter

Simple React Snippets

I write so much React code that I needed an extension to help me save some time. I now use this extension to fill in some of the boilerplate that comes along with writing React components.

Markdown All in One

This extension helps me a lot when writing READMEs, or other Markdown documents. I specifically enjoy how it deals with lists, tables, and table of contents.

User Settings

Apart from the extensions, the other aspect of customizing your VS Code experience are your User Settings. I have shared my complete Settings file below, but here are some of the important bits:

Font Settings

I really like fonts with ligatures. If you are unfamiliar with ligatures, they are special characters that parses and joins multiple characters. I primarily use Fira Code as my programming font. Here’s how it renders JavaScript:

My complete font stack is:

"editor.fontFamily": "'Fira Code', 'Operator Mono', 'iA Writer Duospace', 'Source Code Pro', Menlo, Monaco, monospace", "editor.fontLigatures": true,

To detect indentation, I also prefer these settings:

"editor.detectIndentation": true, 
"editor.renderIndentGuides": false,

To help manage my imports, I prefer these:

// Enable auto-updating of import paths when you rename a file. "javascript.updateImportsOnFileMove.enabled": "always",


Emmet now comes included with VS Code now, but to make it work well with React, I had to update some of the settings.

"emmet.includeLanguages": { 
  "javascript": "javascriptreact", 
  "jsx-sublime-babel-tags": "javascriptreact"
"emmet.triggerExpansionOnTab": true, "emmet.showExpandedAbbreviation": "never",

Here’s my complete user-settings.json

  "editor.formatOnSave": true,
  // Enable per-language
  "[javascript]": {
    "editor.formatOnSave": true
  "[json]": {
    "editor.formatOnSave": true
  "emmet.syntaxProfiles": {
    "javascript": "jsx",
    "xml": {
      "attr_quotes": "single"
  "editor.lineHeight": 22,
  "javascript.validate.enable": false,
  "workbench.editor.enablePreview": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "prettier.trailingComma": "all",
  "bracketPairColorizer.forceIterationColorCycle": true,
  "editor.fontWeight": "500",
  "editor.fontLigatures": true,
  "editor.letterSpacing": 0.5,
  "editor.cursorWidth": 5,
  "editor.renderWhitespace": "all",
  "editor.snippetSuggestions": "top",
  "editor.glyphMargin": true,
  "editor.minimap.enabled": false,
  "terminal.integrated.fontWeight": "400",
  "editor.fontFamily": "Fira Code, iA Writer Duospace, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontSize": 14,
  "window.zoomLevel": -1,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "workbench.fontAliasing": "auto",
  "terminal.integrated.macOptionIsMeta": true,

  "prettier.bracketSpacing": true,
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontWeightBold": "700",
  "terminal.integrated.lineHeight": 1.6,
  "workbench.colorTheme": "Shades of Purple",
  // SOP's Import Cost Extension Settings.
  "importCost.largePackageColor": "#EC3A37F5",
  "importCost.mediumPackageColor": "#B362FF",
  "importCost.smallPackageColor": "#B362FF"

For more tips and tricks about Visual Studio Code, I recommend checking out VSCode Can Do That.

*Originally published by Tilo at * 


Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Learn Visual Studio Code

☞ Visual Studio Code Crash Course 2019

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ The Complete 2019 Web Development Bootcamp

☞ Svelte.js - The Complete Guide

☞ The Complete JavaScript Course 2019: Build Real Projects!

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ JavaScript: Understanding the Weird Parts

☞ Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

☞ The Full JavaScript & ES6 Tutorial - (including ES7 & React)

☞ JavaScript - Step By Step Guide For Beginners

☞ The Web Developer Bootcamp