● 1. Reactアプリの初期化

npx create-react-app sample-ts-app-lint --template typescript
cd sample-ts-app-lint

● 2. ESlintのインストール

yarn add -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
yarn add -D eslint-plugin-react eslint-plugin-react-hooks

● 設定ファイル（.eslintrc.js）の自動生成

yarn eslint --init

質問に答えていくとファイルが（.eslintrc.js）生成されます。 そこに自分でオプションを書き加えて行きます

.eslintrc.jsの例

module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react-hooks/recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "rules": {
    }
}

  1:1  error  'module' is not defined  no-undef

を消すために

"node": true

を記述します

● ESlintの実行

eslint を実行

eslint  . 

eslint を実行（デバッグ実行）

eslint  --debug . 

.gitignore に記載されているパスを除外しながら拡張子 .js , .jsx .ts , .tsx に対して eslint を実行

eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . 

.gitignore に記載されているパスを除外しながら拡張子 .js , .jsx .ts , .tsx に対して eslint を実行（デバッグ表示）

DEBUG=eslint:*  eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore .

.gitignore に記載されているパスを除外しながら拡張子 .js , .jsx .ts , .tsx に対して eslint を実行（対象ファイル表示）

（Macの場合です。 /User でgrep をかけています）

DEBUG=eslint:*  eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . 2>&1 | grep /User

eslintの現在の設定を確認する

eslint --print-config src/index.ts

package.jsonにも記述しておきます

  "scripts": {
    "lint:js": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . ",
  },

↑ yarn run lint:js で起動します

● 3. stylelintのインストール

yarn add -D stylelint stylelint-config-prettier stylelint-config-standard

● stylelint設定ファイルの作成

stylelint.config.js

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
  rules: {},
}

● stylelintの実行

yarn stylelint **/*.{scss,css} --ignore-path .gitignore

package.jsonにも記述しておきます

"lint:css": "stylelint **/*.{scss,css} --ignore-path .gitignore",

yarn run lint:css で実行できるようになります

● 4. husky + lint-staged でコミット前にステージングされているファイルを対象にeslintを自動実行する

huskyで消耗したくない人はこちら
husky v5 で消耗している人には simple-git-hooks がお薦め - Qiita

husky lint-staged npm-run-all のインストール

yarn add -D husky lint-staged npm-run-all

package.json へ設定を追加

  "lint-staged": {
    "*.{ts,tsx}": "eslint",
    "*.{css,scss}": "stylelint"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

  "scripts": {
    "lint:js": "eslint --ext .js,.ts,.jsx,.tsx --ignore-path .gitignore . ",
    "lint:css": "stylelint **/*.{scss,css} --ignore-path .gitignore",
    "lint": "npm-run-all lint:js lint:css"
  },

● lint-staged の実行

yarn lint-staged

● lint-staged の実行（デバッグ表示）

動作が思ってたものと違う場合はこちらで実行して確認します

yarn lint-staged --debug

● lint-staged のオプション表示

yarn lint-staged --help

● Git hooks の有効化

npx husky-init && yarn

.husky/pre-commit が自動生成されます。

● 5. git commit でエラーが出ることを確認する

1. eslint . でエラーが出る状態にして
2. git aad -A
3. git commit

としてエラーが出ることを確認する

● vscode の設定

.vscode/settings.json

{
    "tslint.enable": false,
    "eslint.enable": true,
    "eslint.validate": [
      "javascript",
      "javascriptreact",
      { "language": "typescript", "autoFix": true },
      { "language": "typescriptreact", "autoFix": true }
  ],
}

参考 : https://qiita.com/karak/items/12811d235b0d8bc8ad00

● eslint が遅い時の調査方法

 TIMING=1 npm run lint