Improve your JavaScript code quality with the right tools
Or a list of few tools which I use in every project
Lint your code with Eslint
Eslint is the most popular javascript linter nowadays, it’s very configurable and customizable. Almost every project I have been working for the last couple of years has it included. Linting could help you to find errors while writing or to follow some style guide. There are plenty of predefined presets ( settings ) which just can plug in your project. My favoriete one is AirBnB, it’s very strict one by when you got used to it is really useful.
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 static type checker, which means it adds types to JavaScript, similar to languages like Java or C. What Flow does is trying to read and understand your code at a deep level and gives feedback based on that. For example, if you try to use not existing method/property of a class will show an error. Having types helps a lot during refactoring in large apps and when your code is 100% covered by types there are no run time exceptions. Also you have up-to-date documentation out of the box.
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.
Prettier formater
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!
