DEV Community

loading...

Impress your colleagues with these NPM tricks

Piero Borrelli
Web developer, passionate learner and content producer.
・4 min read

Just like anyone else, developers enjoy knowing some little tricks to show to their colleagues or friends. Today, I have decided to write about some of these keyboard magic that you can use when working with the Node Package Manager (NPM). These won’t only impress you and the people around you, but will also make your workflow definitely faster and more concise. So now that we made this little premise, let’s start to analyze these tricks! 

#1 Package initialization

Do you want to quickly initialize a new package? Are you tired of those infinite system questions that appear when doing so? Then run npm init-y or npm init-f.These commands will allow you to skip those questions and jump straight into your next amazing project!

#2 Opening a package’s homepage

Are you working with a cool npm package you just discovered? Do you want to check its homepage to read the documentation? Then run npm home“your-package”.This command will bring you directly to the page you were looking for!

#3 Opening a package’s GitHub Repository

Similarly to the command described above, running npm repo“your-package” will take you directly to a webpage. But this time, you will get automatically redirected to the package official GitHub repository. 

#4 List all the installed packages

Why should we waste our time by opening the package.json file to check what packages we have installed? Simply run npm ls - - depth 0 and you will get the informations you were looking for. 

#5 List the available scripts

New project new scripts right? but again, having to go through the package.json file can be tedious and time-consuming. Let’s get this list by running the npm run command instead!

#6 Check packages that are not declared in package.json

Another useful command, use npm prune for performing this operation. This command will run through your package.json file and compare its content with the /node_modules content. You will receive as an output a list of all those packages that are not in the package.json file. After doing this, npm prune will remove those packages together with those which you haven’t added manually to package.json or that were npm installed without the --save flag. 

#7 Bump a package version

Need to bump a package? Simply run npm together with minor/major/patch command. 

#8 Running a test

You are probably already running the npm run test command many times a day right? but why not using the shorter version npm t which is exactly the same!

Bonus commands

Still hungry for some more npm useful command shortcuts? Then check out this bonus list I have prepared for you. 

Package installation

Global package installation

Package installation + saving as a dev dependency 

Package installation + saving as a dependency

Conclusion

Being able to impress your colleagues is great, but leaving this article being aware of all the tricks you can learn when working with a technology is even better. Hope this article helped you to discover some tricks you didn’t know about before reading it and that it inspired you to go deeper when learning something new!

To be up-to-date with content like this, don't forget to stay tuned with my blog: TheCoderSwag.com

Discussion (30)

Collapse
omrilotan profile image
omrilotan • Edited

Starting with npm 5 - npm i will save by default (-S is redundant).
If you want to install a package without affecting package.json file, however, you'll need to run npm i package --no-save

Collapse
euginio profile image
Eugenio Arosteguy

The -S param is still needed for confuse and impress your colleagues

Collapse
nickytonline profile image
Nick Taylor (he/him)

Also, npx. 😎

With the latest version of node, you can just do npx mocha instead of having to add ./node_modules/.bin/ to your PATH.

Collapse
renrizzolo profile image
Ren

Nice - repo will come in handy I'm sure.
npm outdated is another good one I use a lot! Gives you a table of installed and latest versions of your packages.

Collapse
jcserracampos profile image
Júlio Campos

And you can use nom outdated -g to see global packages.

PS.: It's broken in some versions of NPM, so update your NPM.

Collapse
darksmile92 profile image
Robin Kretzschmar

Thanks for the list!
npm repo and npm home was new to me and something I will use really often because if we are honest: no one bookmarks the docs of a package, we hit google and hope it is under the top results 😁

Collapse
borrellidev profile image
Piero Borrelli Author

glad to hear it will speed up your workflow!

Collapse
qrzy profile image
Qrzy

Many thanks for repo, TIL :)

I'd add ci and outdated. ;)

Collapse
amejiarosario profile image
Adrian Mejia

Oh, I didn't know about npm version patch and npm t. Very cool!
I wonder if you can run other scripts when bumping the version of a package (like publishing it to npm automatically and generating the changelog)

Collapse
owl profile image
Oscar

I use np for publishing.

github.com/sindresorhus/np

Collapse
amejiarosario profile image
Adrian Mejia

Oh, this is a live saver! Thanks for sharing it :)

Collapse
rad_hombre profile image
Matthew Orndoff • Edited

npx npkill is a great one to free up hard drive space. Searches your system for node_modules directories, displays their sizes, and allows you to quickly delete them.

Collapse
sherlockliu profile image
sherlockliu

Thanks for your blog to teach us so many tricky things, May I ask how you make those pictures?

Collapse
borrellidev profile image
Piero Borrelli Author

Thank you so much for your words, I use an online tool called carbon.now.sh/. You can use it to make cool code images and set the color, background etc.

Collapse
sherlockliu profile image
sherlockliu

Thanks man.

Collapse
rafi993 profile image
Rafi • Edited

Then there is

npm visnup

which does this
https://dev-to-uploads.s3.amazonaws.com/i/gf6cl1f6wubl4rrj6cdh.png

npm xmas

https://dev-to-uploads.s3.amazonaws.com/i/7pv6a48a8ir2e0uuhptr.png

and

npm substack

(try running it multiple times)

Collapse
vlads profile image
0x766c6164

I found npm set progress=false to help me when using npm.

Collapse
pairedprototype profile image
PairedPrototype

npm t will be greatly welcomed to my npm vocabulary. Thanks!

Collapse
dimpiax profile image
Dmytro Pylypenko

It’s literally ‘npm test’, in the same way as ‘npm start’.

Collapse
amberwilkie profile image
Amber Wilkie

npm repo <package> is clutch.

Collapse
ambroseus profile image
Eugene Samonenko

alias t='npm t'
😎

Collapse
peacefulseeker profile image
Alexey Vorobyov • Edited


npm i package -E

will save an exact version of the package

Collapse
emasuriano profile image
Ema Suriano

Great article! 👏 Didn't know about npm run, it's quite useful. I was doing cat package.json | grep "\"scripts\":" -A 8 😅

Collapse
motss profile image
Rong Sen Ng

I'm impressed.

Collapse
borrellidev profile image
Piero Borrelli Author

thank you so much for the appreciation! Hope this helped you to discover something new you will be able to apply!

Collapse
leonblade profile image
James Stine

Great resource, thanks!

Collapse
kdev291 profile image
@kdev29 • Edited

Great post, thanks

Collapse
pinguinosod profile image
David Cautin

I ran npm ls --depth 0 and I got a lot of errors because missing dependencies 😂 🤣

Collapse
tamouse profile image
Tamara Temple

useful!

Collapse
vikkihub profile image
Vikas Yadav

very helpfull.
Thanks Piero for sharing these wonderful commands