Imagine a world where when you commit your files with Git, it will automatically find issues in your code, fix those issues and afterwards add those fixes to your commit. If this sounds nice to you, keep on reading.

Linting

Linting is the process of running a program that will analyze code for potential errors.

Or in human terms: linters are coding tools to show you what you are doing wrong.

Especially when you are developing in a team, it’s always smart to have a predefined code style. It will:

Make your code more readable and maintainable

Help find bugs

Save you and your team headaches

Installing ESLint

First install ESLint globally. I’m using Yarn as package manager but npm $ npm install -g eslint is fine as well. If you want to know why you should choose Yarn over npm read this article and this cheat sheet. TL;DR, it’s way faster and the CLI makes more sense.

$ yarn global add eslint

Afterwards create a configuration file using the CLI tool. I like to use a common and popular style, so I chose for Standard.

$ eslint --init

Now add some codestyle errors to your code and run ESLint on your Javascript files! The /**/*.js is a recursive glob pattern. If you don’t know what it can do, check this out.

$ eslint src/**/*.js --color --format stylish

ESLint will output something like this:

Formatting

All right, now we’ve found all the things that are wrong with your code, but fixing these simple things feels tedious. Well, have I got a treat for you…

Prettier is a command line code formatter. It will fix all those issues ESLint throws at us. Running it manually is all right but running it automatically when you run your linter is way more awesome.

It’s also possible to run Prettier and/or ESLint with your editor/IDE if that’s more your thing.

Installing Prettier

Cool, first let’s get Prettier up and running.

$ yarn global add prettier

A great use of Prettier!

Running it via the CLI like this $ prettier src/**/*.js is counter productive and it doesn’t have the same style rules as we set in .eslintrc. Let’s fix that by running it via ESLint. First, install the prettier-standard and it’s dependencies to ensure the same codestyle.

$ yarn add prettier-standard eslint-config-prettier eslint-config-standard eslint-config-prettier-standard --dev

Secondly, update your .eslintrc file.

{

"extends": ["prettier-standard"],

"plugins": ["prettier"],

"rules": {

"prettier/prettier": "error"

}

}

To run it, let’s make a Yarn script for the linter so we won’t have to memorize it every time. Open up your package.json and add the following block.

{

"scripts": {

"format": "eslint src/**/*.js --fix"

}

}

If you now run $ yarn format it will automatically run what we just added to the scripts object. Neat, right?

So now you still have to run your linter manually, like a pleb. Well, I got your back.

Git hooks

Git hooks will make it so that when you trigger Git with actions such as commit, merge, push, publish, it will execute whatever you tell it to. In our case lint our files and fix the issues it found. Normally it’s a real hassle to set up but Husky makes it real easy.

This won’t happen in our case :D

Let’s install Husky (Git hooks made easy) and lint-staged (to lint the files you want to commit).

yarn add husky lint-staged --dev

And update your package.json.

{

"scripts": {

"format": "eslint src/**/*.js --fix",

"precommit": "lint-staged"

},

"lint-staged": {

"src/**/*.js": [

"eslint --fix",

"git add"

]

}

}

All done! Whenever you add files to staging and try to commit those files they will first be linted by ESLint, afterwards the pesky errors will automatically be fixed by Prettier and added to the staging area.

You can find the result on my GitHub repository.

Happy coding :)