Microsoft Learn offers the definitive guide to learn code concepts and offer a variety of learning paths, this inspired me to build an extension integrated with VS code so the learner doesn't have to switch between the browser and the development environment.

What it does

This extension is a webview for the Microsoft Learn website, allowing seamless integration inside the VS Code instead of switching to a separate browser.

How I built it

This extension is built using Node.js, Yeoman, and VS Code Extension Generator. The Yeoman and VS Code Generator packages are installed using the node package manager npm using the VS Code terminal. Subsequently, Yeoman allows generating the extension workspace while building it from existing templates. The package is then modified to create a command that responds to running the extension. In this case, webview panel generates the desired webpage when an appropriate HTML source is provided.

Challenges I ran into

I ran into challenges associated with populating the webview panel to display the website content.

Accomplishments that I'm proud of

My first VS Code extension on the marketplace.

What I learned

I learned that great UX is very important and it should not only be visually appealing but it should also offer ease of accessibility.

What's next for MS Learn VS Code Extension

This extension can be greatly expanded to offer embedded tutorials, ready to import code blocks, and much more!

Share this project: