Creating a VScodium extension

In

Generate a VScode extension template

  1. Install your template generator

    1
    npm install -g yo generator-code

  2. Run it

    1
    yo code

  3. A folder called hellovscode will appear in your home directory.

  4. Test run: press F5 and another window will popup. Press Ctrl + Shift + P and find the Hello World command. Run it, and a popup should come out in the bottom right corner.

Coding your extension

Logic in extension.js file

  • Registering your commands: block.

    1
    vscode.commands.registerCommand('hellovscode.helloWorld')

  • Usage of the VS Code API.

    1
    vscode.window.showInformationMessage('Hello World from hellovscode!');
  • Link the commands you created from extension.js with the commands that you defined. 
    1
    2
    3
    4
    {
        "command": "extension.sayHello",
        "title": "Hello World"
    }
  • This file will also enable the command to be put on the right click bar. It will also filter where the command should appear (file type). 
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    {
        "name": "myFirstExtension",
        "description": "",
        "version": "0.0.1",
        "publisher": "",
        "engines": {
            "vscode": "^1.5.0"
        },
        "categories": [
            "Other"
        ],
        "activationEvents": [
            "onCommand:extension.sayHello"
        ],
        "main": "./out/src/extension",
        "contributes": {
            "commands": [{
                "command": "extension.sayHello",
                "title": "Hello World"
            }]
        },
        "scripts": {
            "vscode:prepublish": "tsc -p ./",
            "compile": "tsc -watch -p ./",
            "postinstall": "node ./node_modules/vscode/bin/install",
            "test": "node ./node_modules/vscode/bin/test"
        },
        "devDependencies": {
        "typescript": "^2.0.3",
            "vscode": "^1.5.0",
            "mocha": "^2.3.3",
            "@types/node": "^6.0.40",
            "@types/mocha": "^2.2.32"
        }
    }

Packaging your extension

You may create a .vsix file, for easier distribution and tests.

  1. Install the vsce tool.

    1
    npm install -g vsce

  2. Create the package file.

    1
    vsce package --out my-extension.vsix

Publishing in open-vsx

open-vsx.org is managed by the Eclipse Foundation.

  1. Create an Eclipse account

  2. Log in and authorize the application to access your eclipse account.

  3. Create an access token.

  4. Create the namespace.

    • The publisher field in your extension’s package.json file defines the namespace in which the extension will be made available.
    • You need to create the namespace in the registry before any extension can be published to it. This is done with the ovsx CLI tool. 
      1
      2
      3
      # <name> -> your extension's publisher
      # <token> -> access token value
      npx ovsx create-namespace <name> -p <token>
    • Creating a namespace does not automatically assign you as verified owner. If you want the published extensions to be marked as verified, you can claim ownership of the namespace.

  5. Package and upload

  • If you have an already packaged .vsix file

    1
    2
    3
    # <file> -> path to your extension package
    # <token> -> access token value
    npx ovsx publish <file> -p <token>

  • Build an extension from source

    1
    npx ovsx publish -p <token>

    ❗ Notes:

    • The ovsx tool uses vsce internally to package extensions, which runs thevscode:prepublish script defined in the package.json as part of that process.
    • If the ovsx tool reported that publishing was successful, you should find your extension on open-vsx.org.