Setting up Linter, Prettier, Lint-staged, and Husky on a Create-React-App project
Tags: react, beginners, tutorial
Published: 2020-11-30 23:13:37

*Isn't the forest in the header image beautiful??*

I learnt about setting up linting and that stuff during my Lambda times, during a 2 months group project. Months later, when working on my own projects, I started to go through all the commits of that project, checking the code and learning by following the same steps. I was then not sure whether I was missing anything - I was just following the steps that my team lead took in that project.

Well, I googled how to, found some posts talking about setting up all those tools, and followed them for some months. Until, in my current project, I realised I didn't quite know what each of the myriad libraries I was installing was doing, how the config files really worked. So I decided to do what one of my instructors tols us all the time.. read the instructions (aka the docs)! Now I have a better understanding of what each the tools does, found out some of the steps I was doing it wrong, and I feel I am finally in control of these tools. The steps below worked for me but hey, there are a zillion posts saying similar yet slightly different things out there - hope my steps work for you.

1. Create-react-app - apparently it is already installed as a dependency. Do not install it, otherwise you will get some nasty red error when compiling the code saying something about versions in CRA and in package.json being different. So voilà - **step number 1: do not install eslint**.

2. `npx eslint --init`. It will create an esling config file that you wil need afterwards. When asked if you want to only find problems or find problems and enforce style, select the latter. I use `Airbnb` style. Because... because! Info about it [here](https://eslint.org/docs/user-guide/getting-started) but remember, do not install eslint.

3. The last question in the `--init` before is whether you want to install `eslint-plugin-react@latest`. I think you need to enforce specific rules related to React. You can check which rules it gives you access to [here](https://github.com/yannickcr/eslint-plugin-react#configuration). I have not touched anything anyway.

4. `npm install --save-dev --save-exact prettier` (following steps in [here](https://prettier.io/docs/en/install.html)). Eslint does two things: fix code and enforce style. Source [here](https://prettier.io/docs/en/comparison.html). Prettier replaces the latter and as Wes and Scott recently said in a Syntax.fm episode: you should probably use Prettier as it comes without further config. So I have not any other config other than the one that comes by default. Now, does it mean that the airbnb style doesn't get enforced then? Hmm, good question. I think the styles get enforced by order in the `extends` property of the eslint config file. More on that below.

5. Still follwing steps in [here](https://prettier.io/docs/en/install.html): create a `.prettierignore` file. You can avoid prettier touching folders like `build` or `coverage`.

6. `npm install --save-dev eslint-config-prettier`. The only config that you should be doing here is adding `prettier` as last item in the `extends` property of the eslint config file. 

7. `npx mrm lint-staged`. Couldn't figure out what `mrm` does. In any case, this is how the lint-staged folks tell you to install their package [here](https://github.com/okonet/lint-staged). Lint-stages does things to staged files, and you set the config in package.json:

```
"lint-staged": {
	"*.js": "eslint --fix",
	"*.{js,css,md}": "prettier --write"
}
```

^ means that eslint will be run, and then the command executing prettier. 

8. `npx mrm lint-staged` also installs `husky`, a tool that allows to execute commands before you do something on git. Could be before committing, before pushing... there are [so many of them](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)! My husky config at the moment is:

```
	"husky": {
		"hooks": {
			"pre-commit": "lint-staged && npm test",
			"pre-push": "npm test"
		}
	},
```

Why do I have two `npm test`? I wanted to show how you can chain two comamnds in one hook :)

9. `"jest": true` in env property of eslint config file. Otherwise, eslint will scream at you that `test` has not been declared in the jest tests. 

And that is it for today. If I said something wrong or just want to say hi, leave a comment!