VSCode extension development: As a beginner
Tags: vscode, extensions, javascript
Published: 2024-06-16 09:18:55

Hello everyone, 

Today I will explain how I created my first vscode extension, [Docs Official](https://marketplace.visualstudio.com/items?itemName=GeorgiosDrivas.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](https://github.com/GeorgiosDrivas/vscode-docs-official). Feel free to drop a star, or even contribute to it for further improvement.

You can try out [Docs Official](https://marketplace.visualstudio.com/items?itemName=GeorgiosDrivas.docs-official) by downloading it from the VSCode extensions.