Improving frontend code quality

Here I’m gonna show you how I set up a very basic collection of tools to improve your code without a lot of work. Let’s start.

Our tools

We’re using Prettier, stylelint and ESLint.

Prettier

Fixes very simple stylistic issues in the code like spacing. It’s called a code formatter. It’s doesn’t have a lot of options, which is a good thing. More complex issues are solved with the next tools. Prettier supports a lot of formats and languages and is easy to implement in most text editors or IDEs. The nice thing is that Prettier kicks in a soon as you save your file. So your code is always clean and nice.

stylelint & ESLint

Those are linter for stylings or javascript/node. It checks your code for certain issues and can fix some of them automatically. You can set the rules by yourself if you want or use some “templates”. There are a lot of available rules.

Husky

Checking our code just before we commit our changes to the repo on a git hook.

Setting up Prettier

First, we’re gonna install Prettier:

yarn add prettier --dev --exact

Then we’re gonna create a .prettierrc file in your root folder and copy that piece inside it:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

Now we can add a task to our package.json to run it very quickly.

"scripts": {
  "prettier": "prettier --check assets/scripts/**/*.js assets/styles/**/*.scss",
}

Alright. Prettier is ready to use. We could run it with yarn run prettier by now.

We also need to set up auto-correction on every “file save” in the IDE. That’s magic.

In the documentation they talk about it: https://prettier.io/docs/en/editors.html

I’m using PhpStorm and I can add a file watcher very easy. Prettier is already a preset in there. Check also here the documentation:
https://prettier.io/docs/en/webstorm.html

Adding stylelint to the mix

Next, we’re gonna add stylelint.

yarn add stylelint stylelint-config-standard --dev

We need two more packages. One is to integrate prettier and one is to extend our rules (the order of the CSS properties — concentric order). So let’s add them:

yarn add stylelint-config-prettier stylelint-config-concentric-order --dev

Let’s create a config file and put the following content inside it:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-concentric-order",
    "stylelint-prettier/recommended"
  ]
}

Make sure to keep the prettier rule always at the end if you’re gonna extend it.

Also for that we’re gonna add tasks inside the package.json. Make sure to adjust the path to your stylesheets.

"scripts": {
  "stylelint": "stylelint assets/styles/**/*.scss",
  "stylelint-fix": "stylelint assets/styles/**/*.scss --fix",
}

With yarn run stylelint we can check for issues and with yarn run stylelint-fix we can solve some rules automatically.

Add ESLint

Similar as before with stylelint we’re gonna add ESLint.

yarn add eslint eslint-config-prettier eslint-config-airbnb-base --dev

Here I already added the plugin to make Prettier work and added the Airbnb Style Guide. If you wanna you a different one you for sure can exchange that.
By using npx eslint --init you’re able to interactively create a configuration. But we’re sticking to the Airbnb rules for now.

Create a .eslintrc.json in your project root. I like to use the JSON format, but there are also other available.

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base",
        "plugin:prettier/recommended"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
}

Adding two more rules to our package.json and we’re almost set.

"scripts": {
  "eslint": "eslint assets/scripts/**/*.js",
  "eslint-fix": "eslint assets/scripts/**/*.js --fix"
}

We can lint and fix stylesheets and scripts on demand. By running the yarn tasks and on top of that, certain formatting issues will be fixed while we’re working on the code.

But we wanna make sure that we at latest before we commit something the code gets checked and notifies us when something is wrong and not according to our rules.

Add a pre-commit hook

For that, we’re gonna use Husky.

yarn add husky --dev

This packages will fire a defined command on a certain git hook. In our case the pre-commit hook.

Let’s add the following lines to your package.json just below everything.

"devDependencies": {
  ...
},  
"husky": {
  "hooks": {
    "pre-commit": "pretty-quick --staged && yarn run eslint && yarn run stylelint"
  }
}

We’re gonna reference our yarn tasks in there to run the linter before we’re committing changes into our repo.

Great. We’re set and good to go. With those steps, we can be sure that our code quality is high, consistently formatted and find some bugs. Our work isn’t that big. Just that simple setup and we’re got to go. A no-brainer I would say. Let’s go ahead and try it.