Setup ESLint, Prettier and Husky for TypeScript

eslint-prettier-husky-commitlint-for-typescript.md

1. Go to terminal, open the project directory.

   cd project

2. Run the following commands:

   1. Delete node_modules directory

      rm -rf node_modules

   2. Delete package-lock.json

      rm package-lock.json

   3. Set node and npm version in package.json

      npm pkg set engines.npm="9"
      npm pkg set engines.node="18"

   4. Create .nvmrc

      touch .nvmrc
      echo 'save-exact=true' > .nvmrc

      1. Remove ^ from all dependencies in package.json

   5. Update typescript and @types/node packages

      npm un typescript @types/node
      npm -D typescript @types/node

   6. Create .eslintrc.json

      echo '{ "parser": "@typescript-eslint/parser", "parserOptions": { "project":"./tsconfig.json" }, "extends": [ "plugin:@typescript-eslint/recommended","plugin:prettier/recommended","prettier" ], "rules": { "consistent-return": 1, "eqeqeq": 1, "no-param-reassign": 1, "@typescript-eslint/no-floating-promises": 2, "@typescript-eslint/explicit-function-return-type": 2, "@typescript-eslint/explicit-module-boundary-types": 2} }' > .eslintrc.json

   7. Create .prettierrc.json

      echo '{ "printWidth": 120, "tabWidth": 2, "useTabs": false, "semi": true, "singleQuote": true, "trailingComma": "all", "arrowParens": "avoid" }' > .prettierrc.json

   8. Create .commitlintrc.json

      echo '{ "extends": ["@commitlint/config-conventional"] }' > .commitlintrc.json

   9. Install eslint, commitlint, prettier, husky, cross-os

      npm i -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin prettier eslint-config-prettier eslint-plugin-prettier @commitlint/cli @commitlint/config-conventional husky cross-os

   10. Set prettier and lint scripts in package.json

       npm pkg set cross-os.pretty.darwin="prettier --write 'src/**/*.ts'"
       npm pkg set cross-os.pretty.linux="prettier --write 'src/**/*.ts'"
       npm pkg set cross-os.pretty.win32="prettier --write src/**/*.ts"
       npm pkg set scripts.pretty="cross-os pretty"
       npm pkg set cross-os.pretty:check.darwin="prettier --check 'src/**/*.ts'"
       npm pkg set cross-os.pretty:check.linux="prettier --check 'src/**/*.ts'"
       npm pkg set cross-os.pretty:check.win32="prettier --check src/**/*.ts"
       npm pkg set scripts.pretty:check="cross-os pretty:check"
       npm pkg set cross-os.lint.darwin="eslint 'src/**/*.ts'"
       npm pkg set cross-os.lint.linux="eslint 'src/**/*.ts'"
       npm pkg set cross-os.lint.win32="eslint src/**/*.ts"
       npm pkg set scripts.lint="cross-os lint"
       npm pkg set scripts.prepare="husky install"

       Note: Replace the src with your source-code directory name

   11. Setup Husky Git hooks

       npm run prepare
       npx --yes husky add .husky/pre-commit "npm run pretty:check && npm run lint"
       npx --yes husky add .husky/commit-msg 'npx --no -- commitlint --edit $1'
       npx --yes husky add .husky/pre-push ""

       On MacOS or Linux:

       cat << _EOF_ >> .husky/pre-push
       STATUS=\$(git status --porcelain | wc -l | xargs)
       FILES=\$(git status --porcelain | sed -n "s;^.. \(.*\)\$;\\\\\t\\\\\t\1\\\\\n;p")
       
       RED='\033[0;31m'
       GREEN='\033[0;32m'
       NO_COLOR='\033[0m'
       
       if [ \$STATUS -ne 0 ]; then
         echo \$RED'✖ Make sure all changes are staged and committed before pushing'\$NO_COLOR
         echo \$RED'\tDetected changes in:'\$NO_COLOR
         echo \$RED\$FILES\$NO_COLOR
         exit 1
       fi
       
       echo \$GREEN'✓ No changes left to commit'\$NO_COLOR
       
       _EOF_

       On Windows:

       Copy the following in .husky/pre-push

       #!/usr/bin/env sh
       . "$(dirname -- "$0")/_/husky.sh"
       
       STATUS=$(git status --porcelain | wc -l | xargs)
       FILES=$(git status --porcelain | sed -n "s;^.. \(.*\)$;\\\t\\\t\1\\\n;p")
       
       RED='\033[0;31m'
       GREEN='\033[0;32m'
       NO_COLOR='\033[0m'
       
       if [ $STATUS -ne 0 ]; then
       echo -e "${RED}✖ Make sure all changes are staged and committed before pushing${NO_COLOR}"
       echo -e "${RED}\tDetected changes in:${NO_COLOR}"
       echo -e "${RED}$FILES${NO_COLOR}"
       exit 1
       fi
       
       echo -e "${GREEN}✓ No changes left to commit${NO_COLOR}"