Eslint, Prettier, husky and lint-staged configurations for TypeScript projects

settings.md

If husky is not running, run the following command

chmod ug+x .husky/*

Installation

Install dependencies

yarn add -D prettier eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-simple-import-sort husky lint-staged

If you are using Next.js, also install this package.

yarn add -D eslint-config-next

If you are using Tailwind CSS, also install this package.

yarn add -D eslint-plugin-tailwindcss

Scripts

"lint": "eslint --ext .js,.jsx,.ts,.tsx .",
"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx . --fix",
"format": "npx prettier --write .",
"type-check": "tsc --noEmit"

.eslintrc.json

{
  "extends": ["prettier"], // Add "next", "next/core-web-vitals" if Next.js project.
  "plugins": ["prettier", "simple-import-sort"], // If you are using Tailwind CSS add "tailwindcss".
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "rules": {
    "quotes": ["error", "double"],
    "prettier/prettier": "error",
    "no-console": "error",
    "simple-import-sort/imports": "error",
    "no-duplicate-imports": "error",
    "no-unused-vars": ["error", { "args": "all", "argsIgnorePattern": "^_" }],
    "no-duplicate-case": "error",
    "no-empty": "error",
    "no-use-before-define": "error",
    "class-methods-use-this": "error",
    "no-plusplus": ["error", { "allowForLoopAfterthoughts": true }],
    "no-dupe-keys": "error",
    "no-dupe-args": "error",
    "no-case-declarations": "error",
    
    // If you are not using TailwindCSS remove the following
    "tailwindcss/classnames-order": "warn",
    "tailwindcss/enforces-negative-arbitrary-values": "warn",
    "tailwindcss/enforces-shorthand": "warn",
    "tailwindcss/migration-from-tailwind-2": "warn",
    "tailwindcss/no-arbitrary-value": "off",
    "tailwindcss/no-custom-classname": "warn",
    "tailwindcss/no-contradicting-classname": "error"
  }
}

.eslintignore

node_modules
package-lock.json
yarn.lock

.prettierrc.json

{
  "semi": true,
  "trailingComma": "none",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "bracketSameLine": false,
  "bracketSpacing": true
}

.prettierignore

node_modules
package-lock.json
yarn.lock

lint-staged.config.js

module.exports = {
  '**/*.(ts|tsx)': () => 'yarn tsc --noEmit',

  '**/*.(ts|tsx|js)': (filenames) => [
    `yarn eslint --fix ${filenames.join(' ')}`,
    `yarn prettier --write ${filenames.join(' ')}`,
  ],

  '**/*.(md|json)': (filenames) =>
    `yarn prettier --write ${filenames.join(' ')}`,
};

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "paths": {
      "@/*": ["./*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "lint-staged.config.js"],
  "exclude": ["node_modules"]
}

To enable Husky run:

yarn husky install

or: npx husky install

.husky/pre-commit

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

echo 'Running Git Hooks'

echo "🔎 Checking validity of types with TypeScript"

yarn type-check || (
    "\n⛔️ There is a type error in the code, fix it, and try commit again. ⛔️";
    false;
    )


echo "\n✅ No TypeError found"
echo "\n🔎 Running linter.."

yarn lint || (
    echo '\n⛔️ There is a problem in the code. ⌛️ I run linter autofix for you.';

    echo '\n🔎 Running linter autofix..'
    yarn lint:fix || (
      echo '\n⛔️ Autofix failed. Please fix the linting errors manually. ⛔️';
      false;
    )

    echo '\n🧐 Please check the changes and commit again.\n'
    false;
    )

echo '✅ No Eslint error found'
echo '⌛️ Running lint staged and git commit ⌛️'

npx lint-staged

.vscode/settings.json

{
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}