Create Extensions for VS Code- Part 2

Introduction

This is the second part of the Create Extension for VS Code series. You can also read the first part in My Dev Blog , or in dev.to :

In the first part, we learned how to create a simple Hello World Extension and the basic understanding file structure of extension.

In Part 2, We will go a little deeper and learn the most common extension feature such as

• Creating Menus
• Creating Settings (Configurations)
• Defining Keyboard Shortcuts (KeyBinding)

Come on Let's dive into it.

Creating Menus

Creating menus for the extension is pretty simple. The menu consists of three properties such as

• command - The command (action) which gets executed on the click
• title - Display name for the menu
• category - Just groupings for the menus.

Define menus in package.json -> contributes -> commands

Snippet

"commands": [
    {
        "command": "extension.helloWorld",
        "title": "Say Hello World",
        "category": "Demo"
    }
]

Demo

Creating Settings (Configurations)

The setting has the following properties.

• properties -> Key - An unique key which will be used to set/get values.
• type - Data Type for the setting.
• default - It will be set as the default value on the plugin activation.
• description - This note will be shown under the setting.

Define settings in package.json -> contributes -> configuration

Snippet

"configuration": {
    "title": "Hello World configuration",
    "properties": {
        "hello-world.customMessage": {
            "type": "string",
            "default": "Hello World",
            "description": "This message will be show on menu click"
        }
    }
}

Get current Value

We can get the current value of settings in Extension.ts with the help of vscode.workspace object and unique key (hello-world.customMessage) which is mentioned on package.json.

const msg = vscode.workspace.getConfiguration().get('hello-world.customMessage');

Demo

Defining Keyboard Shortcuts (KeyBinding)

We can trigger an action of our extension on specific keyboard shortcuts which is known as keybinding.

It has two properties they are,

• Command - Action needs to be triggered
• Key - Combination of keys

Define keybinding in package.json -> contributes -> keybindings

Snippet

helloWorld action will be executed on the keybinding of Ctrl+Shift+A + Ctrl+Shift+Z

"keybindings": [
    {
        "command": "extension.helloWorld",
        "key": "Ctrl+Shift+A Ctrl+Shift+Z"
    },
]

Demo

We have learned the most common extension features !!! 🎉🎉🎉🎉🎉

In the next part, We will see how to build and publish our extension on Visual Studio Marketplace

Thanks for reading!

Please provide your Feedbacks and comments.