DEV Community

Cover image for Create Extensions for VS Code- Part 2
Thamaraiselvam
Thamaraiselvam

Posted on • Updated on • Originally published at thamaraiselvam.com

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"
    }
]
Enter fullscreen mode Exit fullscreen mode

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"
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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"
    },
]
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)