Check out a free preview of the full Visual Studio Code Can Do That? course

The "npm Explorer & Version Lense" Lesson is part of the full, Visual Studio Code Can Do That? course featured in this preview video. Here's what you'd learn in this lesson:

Burke outlines package.json and Version Lens. Version Lens informs the developer about the latest version of an install.

Preview
Close

Transcript from the "npm Explorer & Version Lense" Lesson

[00:00:00]
>> Burke Holland: There is in VS code, something called an MPM Explorer. And that is here. So if, if you have the latest version of VS code, this will show up. If you don't have the latest version, it's not on by default. If you go to your settings file you can turn it on with enables script explorer.

[00:00:21]
Let's see script enabled script explorer, but it's all ready in here somewhere. Right there. So you got my see mine's set to true. This should be on. If yours isn't on, just set the setting to true and then you'll see it. And what this shows us is all of the different NPM scripts that are available in our projects.

[00:00:40]
So these are the two scripts we have and we can actually run them directly from here as well. Just makes it easier to see your NPM scripts. Also, little bit of a tip here, if you wanna know what your NPM script options are, you can also just do NPM run, and then not provide an argument.

[00:00:59]
Hit enter, and it will show you all of the scripts that you have in your package.json file.
>> Burke Holland: Speaking of package.JSON files, let's head over to one.
>> Burke Holland: And actually let's go back to exercise two, so we're hanging out in the right spot. In your package JSON file, you'll have your dependencies.

[00:01:29]
So you can see here I've got light server, there is an extension called version lens. And I thought that I had added it to the version lens. Here it is I've got a disabled. So I'm gonna go ahead and enable this from my work space. And it's probably gonna ask me to reload PS code.

[00:01:50]
No, it doesn't want me to? All right. So what version lens will do is it will look at the dependency, as you can see it's doing it now, and it will tell me whether or not the latest is being used. So you can see I'm at 2.5.3. 2.5.4 is the latest.

[00:02:07]
If I hit this it's just gonna change it to 2.5.4. Then I can run any NPM install and do that. The other thing is, inside of a package JSON file you get IntelliSense. So VS code automatically can look for, let's come down here and let's say that you wanna use, anybody heard this one?

[00:02:31]
>> class: [LAUGH]
>> Burke Holland: [LAUGH] All right, so let's say we're gonna do that. Never forget Mark, and then I'm just gonna hit enter, and then it's gonna fill it in automatically with the latest version. Now i'm not saying that you should hand edit your in your package.Json files we don't often do this, but if you have to you can and you get IntelliSence.

[00:02:53]
And in fact, if we come back here you can trigger it with control, spacebar and it will go out and it should find and tell you what the latest versions are and then give you the options 3.4.1 greater than 3.4.1 or at least 3.4.1

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now