In this tutorial, you will learn about a handy VS-Code marketplace extension that will allow you to more easily manage the node dependencies within your JavaScript based projects. Node Dependencies will allow you to manage all your project dependencies from a special tab within your VS-Code solution explorer. I am all for the command line, however, the terminal is not ideal for all tasks. Trying to audit your node dependencies manually from package.json has its disadvantages. For one, it is hard to know which packages are out of date easily. The best option is to do an npm outdated, however, if you have lots of packages the output isn't the easiest to digest.
This is where Node Dependencies (formally called Idered) can help. Written by Kasper Mikiewicz and available from the marketplace here. Node Dependencies gives you an easier holistic view of the node dependencies that your project uses. Using this extension, you can not only see which packages are out of date. You can also do a few other cool things, read on to learn what 🔥🔥🔥
This extension also ships with a couple of other useful features. First, you can switch the dependency type from either a normal regular dependency to a developer dependency (or back) with a click of a button. If you are anything like me, I always forget to include the --save-dev when installing new packages. I always seem to make a promise to myself to tidy up my package.json later and then forget. Being able to review and switch the types with a button click reduces my mental resistance to regularly auditing my packages 😎
Secondly, you can check the bundle size of each package. If performance matters in your app, and your bundle size is too big. Having access to a view quickly see which packages are the worst offenders can help you keep your bundle, lean, mean and fighting fit 🥊🥊🥊.
The main benefit of installing this free extension is to help you keep your packages up-to-date. From the node dependencies tab, you can see the current versions of all your packages. For each dependency, you will get access to a drop-down that contains the complete list of all the versions for that package. You can also easily browse and install new packages from NPM. This is great if you want to use a package and forget its name. Instead of losing your focus and having to tab out of VS-Code to find it through a browser, you can now find it from within VS-Code instead!
This is a pretty simple extension, but also pretty handy. Happy Coding 🤘
