Setup a Typescript Project with ESlint, Prettier, EditorConfig and Husky

This post shows the bare essentials of how I set up a typescript project. There are lots of articles on adding ESlint to a javascript project, but not as much for typescript projects. So I hope to bridge this gap.

We are going to cover the following tools

• Typescript
• ESlint
• Prettier
• Editorconfig
• Husky

Typescript

In your project folder, make sure you have initialized npm. I use yarn but you can use npm.

yarn init -y

Then install typescript as a dev dependency.

yarn add typescript --dev

Let's configure typescript.

npx typescript --init

This creates a tsconfig.json file in your project. You may choose what settings to enable. I'll post a link to my repo at the end of this article so you'll see what settings I like to work with.

ESlint

Eslint is primarily used for linting our code. That is, ensuring our code follows best practices regarding quality. Let's install it.

yarn add eslint --dev

Eslint should be installed as a dev dependency as it is not needed in production. Let's configure it.

npx eslint --init

On running this command, Eslint will ask us a few questions to determine what config packages to install.

1. How would you like to use ESlint? I usually go with the third option; To check syntax, find problems, and enforce code style
2. What type of modules does your project use? JavaScript modules (import/export)
3. Which framework does your project use? None of these
4. Does your project use TypeScript? Yes
5. Where does your code run? Node
6. How would you like to define a style for your project? Use a popular style guide
7. Which style guide do you want to follow? Airbnb: https://github.com/airbnb/javascript. You can choose any of the three. I'm more comfortable with Airbnb.
8. What format do you want your config file to be in? JSON

You'll be prompted to install some packages
@typescript-eslint/eslint-plugin@latest eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.1.0 eslint-plugin-import@^2.18.2 @typescript-eslint/parser@latest

Choose yes.

If you use yarn, choose yes. Then when the packages are installed, delete the package-lock.json and run yarn to reinstall the packages.

You will notice a new file, .eslintrc.json has been created. It should look like this:

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": [
        "airbnb-base"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

At this point, I turn off the no-console rule 🤓. You absolutely don't have to do this.

Add the code below right under airbnb-base in the extends array in the .eslintrc.json.

plugin:import/errors,
plugin:import/warnings,
plugin:import/typescript

Also add the rule below to the rules object.

    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]

This config is necessary for the eslint-plugin-import package which is responsible for ensuring your import statements are resolved correctly. You can add more configuration using the rules object in the .eslintrc.json file.

Prettier

Prettier takes care of our code formatting. Run this command.

yarn add prettier eslint-config-prettier eslint-plugin-prettier --dev

The command above installs the following packages

• prettier: provides the core prettier functionality.
• eslint-config-prettier: turns off all rules that are unnecessary or might clash with Prettier.
• eslint-plugin-prettier: runs Prettier as an ESLint rule.

Add this "prettier/prettier": "error" to the rules object.
Then add the code below to the extends array.

   "prettier/@typescript-eslint",
   "plugin:prettier/recommended"

At this point, your .eslintrc.json should look like this:

{
  "env": {
    "es6": true,
    "node": true
  },
  "extends": [
    "airbnb-base",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "prettier/prettier": "error",
    "no-console": "off",
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}

Editorconfig

EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs. For Visual Studio Code you need to install the extension. Hers's my configuration below.

# 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

Husky

Husky enables us to tap into git hooks to run commands. A popular git hook is the pre-commit hook. Using this hook, we will prevent bad code from being committed to our codebase. Let's install some packages.

npx mrm lint-staged

The command above installs husky and lint-staged and configures them in the package.json. Lint-stage runs ESlint on our files that are staged in git.

Change the lint-staged config in the package.json to

 "*.{ts,js}": "eslint --cache --fix"

Let's also install pretty-quick. We will use this package with husky to format our files before committing. Pretty-quick uses prettier to format staged files before committing.

yarn add pretty-quick --dev

Add the code below to your scripts in package.json.

"lint":"pretty-quick --staged && lint-staged"

Then add the code below to husky

"hooks": {
   "pre-commit": "yarn lint"
}

Thus our code is prettified and linted before being committed.

So that's all there is to set up a typescript project with ESlint, Prettier, Editorconfig and Husky (at least according to me). Also, don't forget to add a .prettierrc file (Prettier vs-code extension >= 3.2.0 requires it to format your code), .gitignore, and a .eslintignore file. Cheers!😀😀

Here is the link to the GitHub template which you can use to scaffold a typescript project.

Reference: https://blog.theodo.com/2019/08/why-you-should-use-eslint-prettier-and-editorconfig-together/