DEV Community

Cover image for Setup a Typescript Project with ESlint, Prettier, EditorConfig and Husky
Ochuko Ekrresa
Ochuko Ekrresa

Posted on

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

#typescript #eslint #prettier #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
Enter fullscreen mode Exit fullscreen mode

Then install typescript as a dev dependency.

yarn add typescript --dev
Enter fullscreen mode Exit fullscreen mode

Let's configure typescript.

npx typescript --init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

npx eslint --init
Enter fullscreen mode Exit fullscreen mode

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": {
    }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Also add the rule below to the rules object.

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

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

"lint":"pretty-quick --staged && lint-staged"
Enter fullscreen mode Exit fullscreen mode

Then add the code below to husky

"hooks": {
   "pre-commit": "yarn lint"
}
Enter fullscreen mode Exit fullscreen mode

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/

Top comments (7)

Collapse
 
warriorofsunlight profile image
WarriorOfSunlight •

Bookmarked. Will definitely be sharing with the newer devs on my team!

Collapse
 
ekrresa profile image
Ochuko Ekrresa •

Glad to have helped

Collapse
 
gersongams profile image
Gerson Garrido •

Awesome post, thanks for sharing!

Collapse
 
arunmurugan78 profile image
Arun Murugan •

Thanks for posting!

Collapse
 
fredericokluser profile image
Frederico Guilherme Klüser de Oliveira •

Great Work man ;)

Collapse
 
lndr27 profile image
Leandro •

Great post, thanks for the information!

Collapse
 
fredericokluser profile image
Frederico Guilherme Klüser de Oliveira •

add pretty-quick this dependencie

Read next

mrsupercraft profile image

Interactive Code Editor Tutorial: Managing Dynamic Content with react-codemirror

MrSuperCraft -

shafayeat profile image

The Evolution of JavaScript

Shafayet Hossain -

lucaspereiradesouzat profile image

Autenticação com JWT no Frontend e Backend: Implementando com Node.js e ReactJS (em TypeScript)

Lucas Pereira de Souza -

omidnikrah profile image

🚀 Introducing Figma Sprite Generator – Effortlessly Create PNG Sprites from Your Figma Icons

Omid Nikrah -