Setup a Typescript Project with ESlint, Prettier, EditorConfig and Husky
Tags: typescript, eslint, prettier, husky
Published: 2020-02-13 15:20:23

---
title: Setup a Typescript Project with ESlint, Prettier, EditorConfig and Husky
published: true
description: A guide to configuring ESlint, Prettier, EditorConfig and Husky in a typescript project.
tags: typescript, eslint, prettier, husky
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iycrgu4a89ov35eu0fxy.jpg
---

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.

```bash
yarn init -y
```

Then install typescript as a dev dependency.

```bash
yarn add typescript --dev
```

Let's configure typescript.

```bash
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.

```bash
yarn add eslint --dev
```
Eslint should be installed as a dev dependency as it is not needed in production. Let's configure it.

```bash
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.
6. 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:
```json
{
    "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.

```js
plugin:import/errors,
plugin:import/warnings,
plugin:import/typescript
```
Also add the rule below to the rules object.

```json
    "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.

```bash
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.

```js
   "prettier/@typescript-eslint",
   "plugin:prettier/recommended"
``` 
At this point, your .eslintrc.json should look like this:

```json
{
  "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] (https://editorconfig.org/) 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] (https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig). Hers's my configuration below.

```yaml
# 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] (https://www.npmjs.com/package/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.

```bash
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
```bash
 "*.{ts,js}": "eslint --cache --fix"
```

Let's also install [pretty-quick] (https://www.npmjs.com/package/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.
```bash
yarn add pretty-quick --dev
```

Add the code below to your scripts in package.json.
```json
"lint":"pretty-quick --staged && lint-staged"
```
Then add the code below to husky
```bash
"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] (https://github.com/chuck-huey/typescript-base-template) 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/>