Four tools every JavaScript team should use
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:
- add more eslint rules, using plugins like eslint-plugin-import
- write type annotations, which will require you to use babel
If you need an example, you will find a showcase of all the tools I have presented in this article in this repository.