Vscode: [Feature Request] NPM panel (similar to Visual Studio nuget package manager)

[rajeshaz09]

It would be nice, Node Package Manager panel , similar to the Visual Studio nuget package manager.

[coldacid]

Better would be a generic package/component manager panel that extensions can plug into. Not everyone uses npm -- even in the JS world there are alternate package systems that some projects might use instead.

[bgse]

Agree with @coldacid here, should keep in mind that in many cases, npm as a package manager is actually just working "under the hood" and you don't really interact with it at all.

[FabianLauer]

I've thought about this feature for a bit and a few ideas and questions come to mind. I dig @coldacid's idea about package manager _extensions_, so from here on out I'm just going to assume that package managers will be implemented by extensions. Package manager extensions could also be used for adding TypeScript definition management or even commercial sources (think codecanyon, telerik and what not) if VS Code is open to that. A similar idea is already in the roadmap (_"Improved npm support..."_) and it might be yet another reason for people to switch from Sublime to VS Code.

Again, I'm just writing down ideas based on the assumption VS Code will use extensions for package managers. Correct me if I'm wrong though, no hurt feelings :wink:

Contributions that Package Manager Extensions would have to make

• Dependency Types
  Different package management systems have different types of dependencies, for example npm's dependencies, devDependencies, peerDependencies, optionalDependencies and global dependencies, each of which fulfil their specific purpose. Package Management Extensions would have to contribute a list of their specific dependency types.
• Installers
  Usually, dependency types are installed in a specific way. With npm for instance, there's npm i typescript -g or npm i typescript —save-dev. Every Package Manager Extension would have to provide at least one installer, but one installer should be able to install multiple dependency types if their installation procedures are similar.
• Uninstallers
  Packages have to be uninstalled too, so similar as with Installers there should be a way to uninstall packages with the click of a button.
• Error Recovery Helpers
  If installations go wrong, the UI should assist in resolving the installation problems. In npm for example, there's the npm-debug.log file — maybe error recovery help could also be printed in the output console.

• Meta Data Providers
  Descriptions, thumbnails, download statistics etc would have to be available in the UI. Such meta data must be provided via extensions because the sources for this data differ vastly between package managers. Extensions could easily wrap around libraries like npm-registry-client and similar.

  ​

User Interface Ideas

Package Details Tab

Header

Something else that came to mind here is a UI element that indicates whether a package is compatible with your project's license.

Meta Data Tabs

The ideas I've had so far for "Meta Data" tabs:

• Details
  A description of the package, similar to the details tab for extensions.
• Statistics
  How often has the package been downloaded today, this month, this year, in total, etc. Maybe a downloads per time graph similar to the one on the Sublime Text Package Control website.
• Dependencies
  A list of dependencies, like Visual Studio's "Manage NuGet Packages" window. Maybe a dependency tree?

Failed Installations

There should be a way to recover if something goes wrong during installation. A UI such as the following would address the best case scenario in which errors might be resolved by simply trying the installation again.

Putting it together

Here's my two cents on the workflow. Not all too detailed, but maybe its a start. These are just mockups BTW, no code was written :wink:

Installing Package Managers

higher resolution

Package Search

higher resolution

Install & Uninstall Package

higher resolution

Failed Installation

higher resolution

Some more Questions

A few more things that aren't in the UI mockup:

• Should VS Code ask to install missing package dependencies automatically when opening a project?
• How to represent dependency versions in the UI (npm i [email protected] vs npm i [email protected]).
• Should VS Code come with widely used package managers preinstalled?
• How to (or, should VS Code) deal with potentially complex error recovery?

[coldacid]

@FabianLauer that is amazingly well thought out, thanks! 😃

[CharlBest]

This would be very very cool and useful! I think its a brilliant idea.

[gyansoft786]

specially in entity framework core, lots of commands requires nuget package manger console,
e.g. install entityframework, update-database, migrations etc.
Most of tutorials on ASP.NET Core uses NPM, specially for database (entity framework).
I dont want to go to project.json file and write "EntityFramework.MicrosoftSqlServer" and then wait for intellisense the select a version then OMG.
A windows user can easily download VS Community version and use inbuilt NPM Manager.
But what about mac and linux user.
Yes i know there are alternate ways (_using terminal command, or download manually a package and install_).
But VS Code should have NPM Manger for dot net developer, it'll be a thumbs UP if..

[mjbvz]

The tree view api would work well for this. One of our tree view extension samples even implements a basic version of this feature: https://github.com/Microsoft/vscode-extension-samples/blob/master/tree-view-sample/src/nodeDependencies.ts

If you are interested in creating this, let me know if you have any questions about the VSCode APIs

[mjbvz]

Closing as extension-canidate