Giter Club home page Giter Club logo

mainawycliffe / npm-imported-packages-lens Goto Github PK

View Code? Open in Web Editor NEW
13.0 2.0 2.0 15.35 MB

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.

Home Page: https://marketplace.visualstudio.com/items?itemName=MainaWycliffe.view-package-on-npm

License: MIT License

TypeScript 93.48% JavaScript 6.52%
angular es6 javascript react reactjs typescript vscode vscode-extension npm npm-package

npm-imported-packages-lens's Introduction

NPM Imported Package Links - The Ultimate Onboarding Extension for Developers

Download from Visual Studio Marketplace

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"

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"

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

npm-imported-packages-lens's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Forkers

rsperl cgatian

npm-imported-packages-lens's Issues

Npm link missing in .vue files

I just want to say that this extension is amazing! It works really well in my .ts files, but the link doesn't show up in my .vue files. Do you know how we could make it happen?

Duplicate info panel on package.json

I have disabled all extentions for make sure the bottom panel from built-in VScode

image

I searched in the setting to disable it but didnt find any match. Anyone knows this? Thank you so much.

Also for improve information, I think add published 1 year ago is a useful info to track the package outdated/abaddoned or not.

Use local package.json information

Looking at the source the packages Urls are resolved by fetching data from NPM. Isn't this same data available in the package.json of the package?

Just curious if there was a reason that wasn't used? Perhaps you can't read files from an extension?

Do not show links for Typescript Path Alias imports

This will be tricky to pull off as it would require figuring out whether an import path is an NPM package or a path alias in tsconfig. For smaller repos with a single tsconfig, that shouldn't be an issue. For repos with multiple, performance could easily degrade.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.