【Next.js】eslintの導入

前回isFallbackの位置を間違え、Reactフックの呼ばれる回数が変わりエラーが発生した

uga-box.hatenablog.com

ドキュメントを読んでいると、lintのルールで検知できることがわかったので設定する

使うライブラリは以下だが、そもそもeslint類を導入していなかったので導入する
www.npmjs.com

prettierも合わせて導入したいので、次のライブラリをインストールする

npm install -D eslint eslint-plugin-jsx-a11y eslint-plugin-prettier eslint-plugin-react eslint-plugin-import eslint-config-prettier eslint-plugin-react-hooks

typescript用にこちらもインストールする

npm install -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrcの設定

{
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "sourceType": "module"
  },
  "plugins": [
    "import",
    "react",
    "prettier",
    "@typescript-eslint"
  ],
  "settings": {
    "react": {
      "version": "detect"
    }
  }
}

本命のhookの順序のエラー検知は以下で設定している

{
  "extends": [
    // ...
    "plugin:react-hooks/recommended"
  ]
}