Configuring Tooling using ESLint, Editorconfig, Prettier and Husky

Setup EditorConfig :

EditorConfig is very helpful, as it can override your current vscode settings with the settings defined in the project (so all the developers has same set of vscode configurations).

To make it work, We need to install this extention https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig for Vscode EditorConfig

This extension is activated whenever you open a new text editor, switch tabs into an existing one or focus into the editor you already have open. When activated, it uses editorconfig to resolve the configuration for that particular file and applies any relevant editor settings based on the project. You can checkout the configurations here : https://editorconfig.org/

Create a .editorconfig in root directory

# stop .editorconfig files search on current file.
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = tab
indent_size = 2
trim_trailing_whitespace = true

Now you can safely work on the project without worrying about eof or indenting..

Setting up prettier :

Install prettier globally

yarn add --dev --exact prettier // Install prettier 
yarn add --dev eslint-config-prettier

Let’s now create a .prettierrc.json file :

{
    "singleQuote": true,
    "arrowParens": "always",
    "printWidth": 120,
    "parser": "typescript",
    "trailingComma": "all"
 }

Also let’s create a .prettierignore to tell prettier to ignore files/folders to prettify.

# Ignore artifacts:
build
coverage

Now we can add a command in package.json

{
 "scripts": {
     "prettify": "prettier --config .prettierrc.json --write src/**/*.ts",
  }
}

Great ! with all setup, Now we can run prettier, it will autofix all the files under src folder.

Adding Rules in Eslint

Let’s create some new rules for our eslint.

Let’s create a new .eslintrc.js file and rename the old one to .eslintrc-old.js (which was generated from tslint-to-eslint )

For a start, let’s use a custom config which uses airbnb style linting with typescript and prettier support.

module.exports = {
    "root": true,
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "project": "./tsconfig.json",
    },
    "plugins": [
        "@typescript-eslint",
        "prettier"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:import/recommended",
        "plugin:import/typescript",
        "airbnb-typescript/base",
        "plugin:prettier/recommended"
    ],
    "rules":{
        "import/extensions": ["error", "ignorePackages", {
            "js": "never",
            "mjs": "never",
            "jsx": "never",
            "ts": "never",
            "tsx": "never"
          }],
        "prettier/prettier": "error",
        "@typescript-eslint/indent": ["error", 2],
        "@typescript-eslint/no-unused-vars": "error",
        "@typescript-eslint/no-explicit-any": "error"
    },
    "settings": {
        "import/resolver": {
          "node": {
            "extensions": [
              ".js",
              ".jsx",
              ".ts",
              ".tsx"
            ]
          }
        }
      }
}

Will add the rules soon ! It’s important to understand which rules can be beneficial for you, so a complete list you can check out the eslint rules doc –

• For ESLint Rules we can follow the official docs – https://eslint.org/docs/rules and customize our rules based on our project requirements.

Setup Husky

Let’s setup a pre-commit git hook, this will make sure all our commits are formatted, without having to wait for our CI build to finish.

Initialize husky in project, in the project root directory run the following commands :

npx husky-init

It will create a package.json and husky install command, we want to install it in to our server directory:

Change the prepare accordingly for the path you want to install husky to :

 "scripts": {
    "prepare": "husky install app/server/.husky"
  }

Now run

yarn

This will run and install the hook in app/server folder “.husky”.

Let’s add lint-staged – https://github.com/okonet/lint-staged , which runs linters/commangs against staged git files, so that we don’t let bugs slip in our code base. We will use lint-staged for that:

add this in the package.json (not inside scripts):

  "lint-staged": {
    "src/**/*": "prettier --config .prettierrc.json --write src/**/*.ts"
  }

Let’s add a pre-commit the commands we want to run before committing. I want to run tests and also prettify my code before committing.

now, run the following commands, to add precommit commands in the husky git hook.

npx husky add .husky/pre-commit "npx lint-staged"

or you can also do: (since we utilized eslint and prettify)

npx husky add .husky/pre-commit "npm lint:fix"
npx husky add .husky/pre-commit "npm prettify"

In the .husky/precommit :

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

cd app
cd server
npx lint-staged

# yarn lint:fix 
# yarn prettify

Now, if we commit it will run lint:fix and prettify commands first as defined in app/server/package.json file. Let’s try to commit :

git add .
git commit -m "setting up husky"

This will throw error, if any error is found while linting or prettifying before commiting !

I guess, now whenever you commit, you will have a lint running and let you know if it finds any error !

Great ! We are done for now 🙂