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

rajeshaz09 commented 8 years ago

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

coldacid commented 8 years ago

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 commented 8 years ago

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 commented 8 years ago

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

package-details-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

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.

failed-install

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:

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 typescript@2.0.0 vs npm i typescript@2.0.2).
Should VS Code come with widely used package managers preinstalled?
How to (or, should VS Code) deal with potentially complex error recovery?

coldacid commented 8 years ago

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

CharlBest commented 7 years ago

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

gyansoft786 commented 7 years ago

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 commented 7 years ago

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 commented 7 years ago

Closing as extension-canidate

microsoft / vscode