Setting up Linter, Prettier, Lint-staged, and Husky on a Create-React-App project

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 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. I have not touched anything anyway.

4. npm install --save-dev --save-exact prettier (following steps in here). Eslint does two things: fix code and enforce style. Source here. 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: 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. 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.

1. 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! 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 :)

1. "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!