DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,911 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for I created a VS Code Extension - NPM Imported Packages Lens
Maina Wycliffe for This is Learning

Posted on • Originally published at mainawycliffe.dev

I created a VS Code Extension - NPM Imported Packages Lens

When you read JavaScript/Typescript code, have you ever encountered an imported package and wanted to learn more about it? For instance, go to the NPM or GitHub Repo, where you can get more information. When I find myself in this situation, my process always involves copying the package name, Googling it, and finally getting to my destination, either NPM, GitHub Repo, or the website for the package. This can also be not as straightforward as you might think, as it could involve several packages that are closely named, and you have to figure out which one is the correct one.

NPM Imported Packages Lens Extension

NPM Imported Packages Lens Extension

Last week, I decided to do something about this. I created a VS Code Extension that will show you links to NPM, Github, and the Homepage (usually a docs site or GitHub ReadMe of the project) for an imported package right there in the Typescript/Javascript file. Click on whichever you want to open, and you will land on the correct page without the mental model involved in my previous process.

The extension currently shows three links: NPM, GitHub, and Homepage, and all of these are pulled from NPM for the latest version of the package - I will try and address the versioning issue as time goes on especially for the link to the Homepage. And the extension currently works for ES modules for Typescript, Javascript, and JSX/TSX files; I hope to add support for other frameworks such as Vue, Svelte, and Astro in the near future.

You can install the extension from here and find the Github repository here (please leave a star ⭐). Thank you.

Top comments (10)

Collapse
 
muneebbug profile image
muneebbug

Looks cool. can be helpful to save some time

Collapse
 
mainawycliffe profile image
Maina Wycliffe Author

Thanks

Collapse
 
bmitchinson profile image
Ben Mitchinson

Instant install, that's so neat! Thanks for posting.

Collapse
 
mainawycliffe profile image
Maina Wycliffe Author

Thanks

Collapse
 
dgreene1 profile image
Dan Greene

This is an excellent idea.

Collapse
 
mainawycliffe profile image
Maina Wycliffe Author

Thanks

Collapse
 
patilganesh1010 profile image
Ganesh Patil

Nice work!

Collapse
 
mainawycliffe profile image
Maina Wycliffe Author

Thanks

Collapse
 
p3ntest profile image
Julius (P3ntest) • Edited on

Very cool idea πŸ’ͺ, thank you so much πŸ™‚

Collapse
 
mainawycliffe profile image
Maina Wycliffe Author

You are welcome

Visualizing Promises and Async/Await 🀯

async await

☝️ Check out this all-time classic DEV post