The top 8 npm packages I use for every project
Tags: javascript, css, npm, frontend
Published: 2020-03-06 23:42:22

---
title: The top 8 npm packages I use for every project
published: true
date: 2020-03-06 16:30:00 MST
tags: javascript, css, npm, frontend
description: The best 8 libraries and npm packages that I utilize for almost every single project I work on. This list ranges from animation libraries to code linting.
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1oi0ib4udavh545kg07u.jpeg
canonical_url: https://developerbacon.ca/articles/the-top-8-npm-packages-i-use-for-every-project/
---

## Animejs

[Animejs](https://animejs.com) 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:

```bash
npm install animejs
#or
yarn add animejs
```

After installing the package you can import it into your JS files with this import, and follow the [Documentation](https://animejs.com/documentation/) for how to make amazing animations.

```js
import anime from "animejs";
```

## Normalize.css

[Normalize.css](https://necolas.github.io/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.

```bash
npm install normalize.css
#or
yarn add normalize.css
```

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

```scss
// This @import will change depending on where your main CSS is located.
@import "../../../node_modules/normalize.css/normalize.css";
```

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](https://prettier.io/) 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](https://www.npmjs.com/package/pretty-quick) is just Prettier but can be run as a hook when committing your changes. [Husky](https://www.npmjs.com/package/husky) is a package that runs code hooks from the `package.json` file.

```bash
npm install pretty-quick husky
#or
yarn add pretty-quick husky
```

Then add this to your `package.json` file.

```json
"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged"
  }
}
```

> 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](https://browsersync.io/) 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.

```bash
npm install -g browser-sync
#or
yarn global add browser-sync
```

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

```bash
browser-sync start --server --files "css/*.css"
```

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.

```bash
browser-sync start --proxy "yourproject.dev" --files "css/*.css"
```

## Eslinter

[Eslint](https://eslint.org/) 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](https://gridsome.org/docs/dev-tools/#eslint-plugin) here.

## Stylelint

[Stylelint](https://stylelint.io/) 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.