Personal VS Code+Hashnode extension (using RSS)

Just another VS Code Extension

Subscribe to my newsletter and never miss my upcoming articles

Intro πŸ’»

RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format.

Visual Studio Code is full of amazing extensions that make our life simple. I was curious about how these extensions are made and published in the marketplace.

I decided to look up the docs that VS Code offers to make extensions. This document is really thorough and very well documented. We install the yo library and generator code library to start with. code.visualstudio.com/api/get-started/your-..

What I Have Made? ⚑️

The extensions can be made using JavaScript or TypeScript. I have used JavaScript to make a Hashnode Blogs Search extension which only searches my blogs within VS Code and opens it on the browser on command. I have used the rss.xml file instead of Hashnode API in the project.

async function activate(context) {
  // you can replace the rss.xml file with yours to get your blogs
  const res = await axios.get("https://anirudhpanda.hashnode.dev/rss.xml");
  const articles = xmlParser.parse(res.data).rss.channel.item.map((article) => {
    return {
      label: article.title,
      link: article.link,
    };
  });

My project structure looked like this:

Capture.PNG

We have to work on extension.js as it will have all our code.

How to? πŸ’‘

  1. First open VSCode and press Ctrl+Shift+P on your keyboard(after installing the extension).
  2. Type in 'Search Hashnode Blog' in the space and press enter.
  3. Choose a Blog

Requirement/Dependencies πŸ€–

  1. Hashnode Blog Account
  2. npm and NodeJS
  3. VS Code API
  4. Axios Package
  5. XML-Parser Package
  6. Microsoft Workspace Account

Publishing extension πŸŽ†

code.visualstudio.com/api/working-with-exte..

  • We will install the library by npm install -g vsce
  • We can only publish extensions using Personal Access Tokens

Visual Studio Code uses Azure DevOps for its Marketplace services. This means that authentication, hosting, and management of extensions are provided through Azure DevOps.

vsce can only publish extensions using Personal Access Tokens. You need to create at least one in order to publish an extension.

  • After that we will create an Azure DevOps account here dev.azure.com

  • We will create an organization and then generate the Personal Access Tokens. token2.png

  • To manage extensions we will open marketplace.visualstudio.com/manage and fill out all the necessary information. Remember the id of your publisher that will be shown on the web. The highlighted one is the id.

vs.PNG

  • We will go to the official document under Create to the publisher and follow the commands vsce login <publisher name>
  • You can publish an extension using vsce with the publish command: vsce publish

    This command will ask for the personal access token, if you haven't already provided it with the vsce login command above.

  • Modify the package.json and Readme.md to remove all the errors that occurred while publishing because this Readme file is what shows up in your extension.

After it is verified in the marketplace our extension gets onto the VS Code.

Our Extension Is LIVE!!

It can be downloaded by anyone across the entire world.

vsc.PNG

Links: πŸ“Œ

Interested in reading more such articles from Anirudh Panda?

Support the author by donating an amount of your choice.

Recent sponsors
Catalin Pit's photo

Haha, nice use of the RSS feed. πŸ‘

Anirudh Panda's photo

Thank you so much Catalin Pit Means a lot!!

Nishikanta Ray's photo

Nice blog, Anirudh. Keep writing more articles like thisπŸš€