Skip to content

Instantly share code, notes, and snippets.

@harireddy7
Last active July 22, 2024 13:55
Show Gist options
  • Save harireddy7/4bf775d8cafed239cc74141cdc0963f5 to your computer and use it in GitHub Desktop.
Save harireddy7/4bf775d8cafed239cc74141cdc0963f5 to your computer and use it in GitHub Desktop.
Setup a typescript project with eslint, prettier, husky and jest

Setup Typescript project

featuring:

  • eslint
  • prettier
  • husky
  • jest

Steps

1. Initialize project

  • git init
  • npm init

2. Add typescript

yarn add typescript -D

3. setup eslint

If bootstrapped with eslint, react app comes with eslint installed by default. else, need to install eslint package(^8.56.0).

If typescript is installed, need to use ts specific parser and plugins

  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

eslint plugins:

  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-jsx-a11y
  • eslint-plugin-import

create .eslintrc/.eslintrc.js/.eslintrc.json (export eslint config object if it's a js file)

4. setup prettier

Install following packages to integrate prettier to be used a code formatter and plugins to work along with eslint

  • prettier
  • eslint-config-prettier
  • eslint-plugin-prettier

create .prettierrc/.prettierrc.json

5. Sample .eslintrc.json file

  • We can use readily available configurations which can be declared in extends array.
  • If we want to use only specific rules from the config, we can install the plugins and add to plugins array and enable/disable only that specific rule
{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "react",
    "react-hooks",
    "@typescript-eslint",
    "jsx-a11y",
    "prettier"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "prettier",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
    "plugin:react-hooks/recommended",
    "plugin:jsx-a11y/recommended"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  },
  "rules": {
    "quotes": ["error", "single"],
    "no-magic-numbers": "off",
    "@typescript-eslint/no-magic-numbers": [
      "error",
      {
        "ignore": [0, 1, -1, 100],
        "enforceConst": true,
        "ignoreNumericLiteralTypes": true,
        "ignoreEnums": true,
        "ignoreDefaultValues": true,
        "ignoreArrayIndexes": true
      }
    ],
    "@typescript-eslint/no-explicit-any": ["off"],
    "@typescript-eslint/no-non-null-assertion": ["off"],
    "react-hooks/exhaustive-deps": ["off"]
  }
}

6. setup husky

npx husky-init && yarn

This will install husky as dev dependency and setup .husky directory with husky script file and pre-commit hook file.

This will also add a script to package.json like "prepare": "husky install". so that other devs will have to run yarn prepare to setup .husky in their local systems.

We can update pre-commit with our custom commands those need to be run before committing the code. Like - yarn lint:fix && yarn test

Everytime we run git commit, these commands are going to be executed first. If there's any error with linting or tests, commit action wil fail.

7. setup lint-staged

lint-staged helps in running linters like eslint and prettier on staged files.

yarn add lint-staged -D

Add lint-staged config to package.json

  "lint-staged": {
    "*.{js,ts}": [
      "yarn lint:fix"
    ]
  }

Add the following to pre-commit hook:

yarn lint-staged && yarn test

When git commit command is executed, it invokes husky which invoke pre-commit script.

pre-commit script will then invokes lint-staged. lint-staged command will pick up the config present in package.json or from .lintstagedrc file and run the linters on specific files present in git staging area.

If everything goes well, code is committed or else error will be thrown adn commit will not executed.

8. setup commit-msg

commit-msg hook is used to validate the commit message and check if they are compatabile with conventional commit (which follow semantic versioning)

use npx husky add .husky/commit-msg to generate commit-msg hook in .husky

Add this to .husky/commit-msg which will check for specific type, scope, message in the commit.

#!/bin/sh
if ! head -1 "$1" | grep -qE "^(feat|fix|chore|docs|test|style|refactor|perf|build|ci|revert)(\(.+?\))?: .{1,}$"; then
    echo "Aborting commit. Your commit message is invalid." >&2
    exit 1
fi
if ! head -1 "$1" | grep -qE "^.{1,88}$"; then
    echo "Aborting commit. Your commit message is too long." >&2
    exit 1
fi

9. setup jest

  • jest
  • @types/jest
  • ts-jest
  • eslint-plugin-jest

test command: jest --coverage --watch

More

Refer mrm package https://mrm.js.org/docs/getting-started

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment