DEV Community

Cover image for The top 8 npm packages I use for every project
Brett Anda πŸ”₯🧠 for Developer Bacon πŸ₯“πŸ₯“

Posted on • Originally published at developerbacon.ca on

The top 8 npm packages I use for every project

Animejs

Animejs is a great JavaScript animation library that I use for just about every animation that can't be done quickly with CSS animations. This library is great for so many different kinds of animations including CSS animations and transitions, JavaScript style animations, SVG morphing animations, and more.

This package is also available with npm and can be installed like this:

npm install animejs
#or
yarn add animejs
Enter fullscreen mode Exit fullscreen mode

After installing the package you can import it into your JS files with this import, and follow the Documentation for how to make amazing animations.

import anime from "animejs";
Enter fullscreen mode Exit fullscreen mode

Normalize.css

Normalize.css is just a CSS file that you include in your project to 'reset' the CSS of the browser so that your code works better across as many browsers and devices as possible.

npm install normalize.css
#or
yarn add normalize.css
Enter fullscreen mode Exit fullscreen mode

To include this package in your project you can add it to your main CSS or SCSS/SASS file.

// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";
Enter fullscreen mode Exit fullscreen mode

If anyone knows a better way to get to the root directory then node_modules please let me know in the comments.

Prettier

If you haven't already started using Prettier then you need to right now. Prettier takes care of formatting your code to your preferences so you can make typos and mistakes without needing to fix them later.

Prettier can be set up in many different ways like formatting on file save and formatting on git commit, which is exactly what pretty-quick and Husky can do.

Pretty-quick and Husky

Pretty-quick is just Prettier but can be run as a hook when committing your changes. Husky is a package that runs code hooks from the package.json file.

npm install pretty-quick husky
#or
yarn add pretty-quick husky
Enter fullscreen mode Exit fullscreen mode

Then add this to your package.json file.

"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}
Enter fullscreen mode Exit fullscreen mode

If you select a few lines of code the put into staging then just commit those few lines of code and you receive an error from prettier. I find that if you just ignore it and commit again it will work.

Browser sync

Browser sync is great for the development of a website because it lets you view a live version of the site and reloads the page when something in the code changes. It is also great for testing your site on different devices.

npm install -g browser-sync
#or
yarn global add browser-sync
Enter fullscreen mode Exit fullscreen mode

For static sites, you can run a variation of this command.

browser-sync start --server --files "css/*.css"
Enter fullscreen mode Exit fullscreen mode

And for dynamic sites running on a local server, you will have to run a variation of this command. For this command to work you will have to have already set up something like a Vagrant or Docker image.

browser-sync start --proxy "yourproject.dev" --files "css/*.css"
Enter fullscreen mode Exit fullscreen mode

Eslinter

Eslint checks your JavaScript files against a set of rules that you can modify and tells you if your code is broken or missing anything that will break later. This includes things like missing semicolons and proper spacing.

There are too many different ways to set Eslinter up depending on your dev server, but if you are looking to add this to your Gridsome project check out the Documentation here.

Stylelint

Stylelint is the same as Eslint but for your stylesheets. This check to make sure you are spacing elements correctly and not missing semicolons.

There is no current way to add this to Gridsome.

Top comments (8)

Collapse
 
hozefaj profile image
Hozefa

Can one use prettier for CSS also? So within a project there is only one code formatting system.

Looking at prettier.io I think it can use used for a bunch of use cases other than js.

Collapse
 
brettanda profile image
Brett Anda πŸ”₯🧠

Yes, it can. It also works with SCSS, Vue and more you just have to get them configured.

Collapse
 
sergix profile image
Peyton McGinnis • Edited

In some build environments like Webpack you can alias a path using a special character like @, so the path in your code would be @/normalize.css/normalize.css

webpack.js.org/configuration/resolve/

Collapse
 
brettanda profile image
Brett Anda πŸ”₯🧠

That's cool. Thank you!

Collapse
 
deadlysyn profile image
Mike Hoskins

Thinks to self, "Hmm these are awesome suggestions... the only thing that could make it better is bacon. HOLY MOLEY IT'S GOT THAT TOO!"

Collapse
 
brettanda profile image
Brett Anda πŸ”₯🧠

Bacon goes great with everything, and I mean everything!

Collapse
 
danielpdev profile image
danielpdev • Edited

As you use them for every project, maybe it's useful to also make a starter on github and link it here.
Maybe it will be useful for others to just clone and play :).

Thanks for sharing!

Collapse
 
brettanda profile image
Brett Anda πŸ”₯🧠

Great idea, ill have to make a template