Whether you’re starting a new JavaScript project, or hopping on an existing one, here are four tools your team should use.

Yarn

Yarn will both be your build tool (to pass question 2 of the Joel Test) and your package manager.

Install yarn then enter this command to initialize your project:

yarn init

ESLint

Writing JavaScript without bugs is not easy. The first tool that will help you do that is ESLint.

Install ESLint:

yarn add -D eslint

Next, you need to configure ESLint, either by using the following command and answering a few questions:

yarn eslint --init

or by manually creating an ESLint configuration file at the root of your project named .eslintrc.yml.

It should at least contain the following line:

extends: 'eslint:recommended'

Then, add the following lines to your package.json file:

"scripts": {
    "lint": "eslint src --fix"
}

You now have at your disposal a command that prevents you from classic mistakes like unused variables:

yarn lint

Prettier

Team conventions about code formatting are great, but having to enforce them through code review comments is a pain. Fortunately, Prettier is here to help.

Install Prettier:

yarn add -D prettier

Since we are already using ESLint, we will run Prettier through ESLint using eslint-plugin-prettier:

yarn add -D eslint-plugin-prettier

We will also follow the plugin’s author advice and use eslint-config-prettier to disable all ESLint formatting rules, and leave this job to Prettier:

yarn add -D eslint-config-prettier

Edit your .eslintrc.yml:

extends: 
  - eslint:recommended
  - plugin:prettier/recommended

And that’s it, you no longer have to fight over spaces versus tabs, or single versus double quotes. The following command will now both warn you about errors and format your code:

yarn lint

Flow

As I said earlier, writing JavaScript without bugs is not easy. When you add types to your JavaScript code, all of a sudden a lot of mistakes become obvious. That’s why you should use Flow.

First, install and initialize Flow:

yarn add -D flow-bin
yarn flow init

Then, annotate all your files with the following comment:

// @flow

Finally, run the following command and enjoy type safety:

yarn flow

Conclusion

Your safety harness is all set, you’re ready to code!

If you want to go further you can:

If you need an example, you will find a showcase of all the tools I have presented in this article in this repository.