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.

dive

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

menu.gif

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

setting.gif

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

keybinding.PNG

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

dance1

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.

feedback

Thamaraiselvam

I am a passionate person, who has been working as a Full Stack Developer for 4 years. I love GNU/Linux, Open Source Software and I am Sapiosexual

Write your comment…

Be the first one to comment