1. Visual Studio Package Manager Console Command
2. Visual Studio Package Manager Console Add-migration
3. Visual Studio Package Manager Console Initializing Powershell Host
4. Visual Studio Package Manager Console Update Database
5. Visual Studio Package Manager Console Shortcut
6. Visual Studio Package Manager Console Update

I want to change bigger font size to PowerShell Package Manager Console in Visual Studio. But I couldn't find anyways to change it. I already google a lot but couldn't find anything that worked. When you install nupack (which seems likely to be renamed nuget in the near future), you get a new dockable Visual Studio 2010 window called the Package Manager Console which allows you to run nupack commands right from within VS2010. The great thing about this window is that it can be used for more than just nupack commands.

What is the problem ?

.NET developers usually use NuGet as a Packet Manager.
Despite being able to deal with JavaScript packages, NuGet is not the best option for them.
So, a long time ago, Microsoft implemented native Bower support in Visual Studio, but Bower was deprecated in 2018:

So, some time ago, Microsoft created the LibPack to replace Bower in Visual Studio:

But there is a much better solution than Bower ou LibMan: npm.
npm is the Package Manager for Node.js and you, probably, will find there any JavaScript library you want.

Visual Studio has native support to npm, but I do not like the way it works.
So I changed it a little…

How does npm work ?

Visual Studio Package Manager Console Command

npm manages and downloads JavaScript packages, very close to the way NuGet does with .NET Packages.
Below you find a naive comparison of both:

The first npm goal is supporting Node.js: the well known JavaScript Server.
npm is a command-line tool and ( like Git ) you will feel better using it this way.

How does Visual Studio deal with NuGet ?

The NuGet packages are managed by Nuget Package manager both visually and by Package Manager Console.
NuGet keeps a CACHE with all downloaded packages ( since ever ! ) in the following directory:

You may change the location of this CACHE with the following command:

Below you find the project structure created for an ASP.NET Mvc Project with NuGet:

As you can see, the packages are download BY SOLUTION and NuGet automatically manages multiple versions.

Below you find the project structure created for an ASP.NET Core Mvc Project with NuGet:

As you can see, there are no packages directory and package.json file.
This is because all packages are kept in CACHE directory ( see above ) and Projects reference them in a different way.

HINT
I EXCLUDE packages directory ( and node_modules ) from Git versioning by including it in .gitgnore file:

Is does not make sense versioning something that is downloaded from Web any time you want.
You just download all packages after cloning the repository.

Visual Studio Package Manager Console Add-migration

NuGet is a well-established technology and really useful for developers.

How does Visual Studio deal with npm ?

DON’T DO THIS: I WILL CHANGE IT IN THE NEXT TOPIC BELOW !

To get npm you need to download and install Node.js:

HINT
Do not install NPM Tools for Native Modules.

npm keeps a CACHE with all downloaded packages ( since ever ! ) in the following directory:

You may change the location of this CACHE with the following command:

To begin with npm you create the package.json file in your ASNET MVC or ASP.NET Core MVC Project:

The file will be created empty but below you find the complete file:

The devDepencies are packages you require for Development ( see Gulp below ).
The dependencies are packages you require for run-time.

To get the same result with command line you may open the Command Line in the PROJECT directory and run the following commands:

The init command will create the package.json file.
The install command will download the package and update the package.json file ( –save ).
The update command will download the packages listed in package.json file.

Eventually you will find a package-lock.json file.
It contains detailed information about the dependencies between packages.
Should you delete it, you may recreate it with the following command:

There is a nice extension for Visual Studio to open the Command Line without going to Windows Explorer and typing “cmd”:

To force an update you clean the SOLUTION:

Below you find the project structure created for an ASP.NET Mvc Project with npm:

But, you end up with 291 packages, 3.593 files and 8.97 MB ( Visual Studio 16.4 + ASP.NET Core MVC 3.1 ), not just the 4 packages you asked for !

The final result will be the following:

• A node_modules PER PROJECT, instead of PER SOLUTION like you get with NuGet.
• If you have more than one MVC Project per Solution, you will have multiple node_modules directories.
• Package Manager Console will not work, complaining a missing package.json for the SOLUTION.
• 291 packages, 3.593 files and 8.97 MB in the node_modules.

Well, there are some things we may improve here…

How do I deal with npm ?

Below you find the project structure I create for an ASP.NET Core Mvc PROJECT with npm:

First, take care of your PROJECT !

Create an empty package.json ( DO NOT INCLUDE ANY PACKAGE ! ) file in your PROJECT:

Visual Studio Package Manager Console Initializing Powershell Host

This file will be visible inside Visual Studio in your PROJECT !

Go to command line at your PROJECT directory and execute the following commands.
The commands below install del and gulp in the global npm directory ( see npm CACHE directory above ):

The commands below may be used to update these packages, when necessary:

The commands below create a symbolic link from global npm directory into the node_modules of your PROJECT:

With the symbolic link, you have just 1 copy of these packages in the global npm directory !
If you don´t install these packages in your PROJECT, Visual Studio will complain about Gulp and the Task Runner Explorer ( see Gulp below ) will not work.

Second, take care of your SOLUTION.

Create a package.json file in your SOLUTION directory:

If you add this file to your solution it will be visible in a ( Solution ) folder named “Solution Items”.

Go to command line at your SOLUTION directory and execute the following command:

You may also use the Visual Studio Package Manager Console:

Visual Studio -> Tools – NuGet Package Manager -> Package Manager Console

The final result will be the following:

• A node_modules PER SOLUTION, like NuGet.
• If you have more than one MVC Project per Solution, you will have only 1 node_modules directory.
• Package Manager Console will work perfectly with npm, for install/update/uninstall.
• Task Runner Explorer ( see Gulp below ) will work perfectly.

How does Visual Studio deal with Gulp ?

Gulp is a wonderful Task Automation JavaScript Tool fully integrated in Visual Studio.
As the JavaScript packages are downloaded in node_modules directory, Gulp will help us to copy the files we really need to:

• /Context and /Scripts directories for ASP.NET MVC Application
• /wwwroot directory for ASP.NET MVC Core Application

The example below is for ASP.NET Core, but may be easily adapted to ASP.NET MVC.
To begin just add a gulpfile.js to your PROJECT with the following content:

Visual Studio Package Manager Console Update Database

I guess the code is quite easy to understand.
As you can see it needs del and gulp packages to run.
This file will create two tasks: npm-copy and npm-delete.
To execute it just right-click the file above and select Task Runner Explorer.

Visual Studio Package Manager Console Shortcut

After running the npm-copy Task I get the following structure under my wwwroot directory:

Epilogue

Visual Studio Package Manager Console Update

Please, let me know if it works for you or you have any comments.