Or a list of few tools which I use in every project
Lint your code with Eslint
To setup, you just need to install the package from NPM and create a .eslint file in your project directory in which define your rules and configs.
My suggestion: config eslint as git pre-commit hook so no one can push unchecked code to git. Also, install a plugin for your text editor/IDE which helps to see and fix errors directly in your editor while writing it.
Testing with Jest
Usually, testing is hard and boring task but Jest kind of solve that. First of all, Jest is incredibly easy to setup, in the past, I spend days trying to setup karma, jasmine, whatever-test-library. With Jest took me like ~15 min, just install NPM package and create a config file. Jest runs tests in parallel so it is quite fast even when you have a lot of them, in watch mode first runs failed tests and only tests that are affected by a code change.
Probably the best feature is Snapshot Testing. Jest captures a snapshot of a React component tree (or any serializable data) and saves it to a file and every time when the component is changed, Jest compare the saved snapshot with current snapshot and gives you a feedback if there is a difference between them and what is changed. It also asks you to update snapshot if you agree with the changes.
My suggestion: always keep jest in watch mode so you can see error immediately, the same as eslint, add it as pre-commit hooks, and don’t allow push to production if don’t much certain coverage percent.
Flow type checker
Flow is not compiler like TypeScript, it is just a checker, you can introduce it file by file, with adding “// @flow” comment at the top of every file which want to be checked.
My suggestion: Atom has a flow plugin which shows types on hover, gives suggestions and shows errors inline. Probably there is a plugin for your editor too.
Code formatting may not be the most important thing but I have seen how it creates problems in large teams when everyone has a different view about that. Prettier is very opinionated and does all for you. It works rather well with ES2017, JSX and Flow.
My suggestion: yet again add prettier as pre-commit hooks so every time you push a code it is formatted. I also use Atom plugin which formats my code on save.
Lets tools work for you
We have seen lots of tooling improvement for last few years in JS community, from initial setup, speed and simplicity. I am amazed how much work I can push to my tools and being more productive, more confident in shipping and not afraid of refactoring that 1 year old peace of code.
So lets tools work for us!