https://github.com/mainawycliffe/npm-imported-packages-lens

A Visual Studio extension that displays links to NPM, Git Repo (GitHub/GitLab, etc.) and Homepage for an imported package in javascript and typescript files on hover.
https://github.com/mainawycliffe/npm-imported-packages-lens

analog angular astro astrojs es6 javascript npm npm-package npmjs react reactjs svelte sveltekit typescript vscode vscode-extension vue vuejs

Last synced: 3 days ago
JSON representation

A Visual Studio extension that displays links to NPM, Git Repo (GitHub/GitLab, etc.) and Homepage for an imported package in javascript and typescript files on hover.

• Host: GitHub
• URL: https://github.com/mainawycliffe/npm-imported-packages-lens
• Owner: mainawycliffe
• License: mit
• Created: 2022-07-14T14:57:11.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-01-13T23:38:45.000Z (9 months ago)
• Last Synced: 2024-05-01T19:31:42.735Z (5 months ago)
• Topics: analog, angular, astro, astrojs, es6, javascript, npm, npm-package, npmjs, react, reactjs, svelte, sveltekit, typescript, vscode, vscode-extension, vue, vuejs
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=MainaWycliffe.view-package-on-npm
• Size: 15 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        
 NPM Imported Package Links - The Ultimate Onboarding Extension for Developers




  



[Download from Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=MainaWycliffe.view-package-on-npm)

## The Ultimate tool for Developers

This is the ultimate onboarding VS Code extension. When reading code, we

sometimes come across JS/TS packages that are unfamiliar, with this extension,

just hover on the imported package, and you will get information from NPM, about

the current version of the extension being used, with links to the NPM

package,Homepage and Git Repository.

!["Screenshot"](./screenshots/screenshot.png)

> We are open to suggestions and PRs, feel free to open an issue or a PR.

## How it works

Hover on an imported npm package and wait as the package links are loaded,

as shown below 🤯🤯🤯🤯.

!["Screen shot for Open Imported Packages on NPM"](./screenshots/demo.gif)

## Features

- Link to NPM

- Link to Git Remote Repository (GitHub, GitLab, BitBucket, etc.)

- Link to Homepage (Docs Site) - (Data from NPM - Homepage Settings)

- Link to Git Repository to view existing issues or report a bug

- Supports Javascript and Typescript (JSX/TSX variants as well)

- ES Modules imports Support

- Supports package.json

- Version and License information

- Experimental Support for Vue, Astro, and Svelte (Suggestions and PRs are

  welcome)

## Roadmap

| Feature                                | Status       |

| -------------------------------------- | ------------ |

| Support version checks on package.json | ✅           |

| Support for ES Modules imports         | ✅           |

| Support for Typescript/Javascript      | ✅           |

| Support for JSX/TSX                    | ✅           |

| Support for Vue                        | Experimental |

| Support for Astro                      | Experimental |

| Support for Svelte                     | Experimental |

| Support CommonJS Modules               | 🚧           |

## Why

I created this extension to help developers get to important links for a package

all in one place. Want to learn more about a package being utilized in your

codebase, this extension will help you do that efficiently, no need to go

through Google.

## Contributing

PRs and suggestions are welcome