VSCode extension development: As a beginner

Hello everyone,

Today I will explain how I created my first vscode extension, Docs Official. An extension that provides easy access to the official documentation of the currently opened file's language, with a single click of a button.

The idea behind the extension

The idea was to create a simple extension in order to understand the proccess of extension development that whould also benefit me in my job.

That's when I thought that creating a way to easily access documentation when I need it, is an good idea to start from.

The basic concept is that the extension will check the file's extension ( .js, .py, .cpp ) and will provide the official documentation for that language. Exceptions to that, are the txt files which do not have a documentation.

Currently, only Javascript, Python and HTML are supported, but more languages are coming in a couple of days.

The implementation

The proccess of creating the extension was simple. I store my languages in an object with the key being the name of the language and the value the link to the documentation.

const lngs = {
    "javascript": "https://developer.mozilla.org/en-US/docs/Web/JavaScript",
    "python": "https://docs.python.org/3/",
    "html": "https://developer.mozilla.org/en-US/docs/Web/HTML"
};

Then , I make sure a file is opened and grab it's language extension

        const editor = vscode.window.activeTextEditor;
        if (!editor) {
            vscode.window.showInformationMessage('No active editor found');
            return;
        }

        const languageId = editor.document.languageId;

        const docUrl = lngs[languageId];

If the language is supported by my extension ( Which means that it must be in the object lngs ), a informationMessage is visible which will lead the user in the official documentation of the language with a click of a button.

if (docUrl) {
            vscode.window.showInformationMessage(`Documentation for ${languageId}`, "Open Documentation")
            .then(response => {
                if(response === "Open Documentation"){
                    vscode.env.openExternal(vscode.Uri.parse(docUrl));
                }
            });
        } else {
            vscode.window.showInformationMessage(`No documentation URL found for ${languageId}`);
        }

To make the extension available in every file and user-friendly, I created a status bar button that will allow the user to activate the extension without the need of writing the command every time.

    const statusBarItem = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100);
    statusBarItem.command = 'docsOfficial.activate';
    statusBarItem.text = '$(book) Open Docs';
    statusBarItem.tooltip = 'Open documentation for the current file';
    statusBarItem.show();

Conclusion

That was my first ever vscode extension. It sure is not perfect and it has potential for future improvements, but it was a nice experience from which I learned a lot. It's always very good to give back to the community in every way possible, even by providing something that simple.

You can find the source code of Docs Official in my GitHub repository. Feel free to drop a star, or even contribute to it for further improvement.

You can try out Docs Official by downloading it from the VSCode extensions.