React × TypeScript 環境における ESlint の設定

プロジェクトを作るたびに悩まされる ESlint ですが、ある程度これがベストかなーと思える設定ができあがってきたので備忘録がてらです。

今回の環境は Nextjs × TypeScript となっています。

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "4.14.1",
    "@typescript-eslint/parser": "4.14.1",
    "eslint": "7.18.0",
    "eslint-config-prettier": "7.2.0",
    "eslint-plugin-import": "2.22.1",
    "eslint-plugin-jsx-a11y": "6.4.1",
    "eslint-plugin-prettier": "3.3.1",
    "eslint-plugin-react": "7.22.0",
    "eslint-plugin-react-hooks": "4.2.0",
    "eslint-plugin-sort-keys-shorthand": "2.1.0",
    "eslint-watch": "7.0.0",
    "prettier": "2.2.1"
  },
  "eslintConfig": {
    "env": {
      "browser": true,
      "commonjs": true,
      "es6": true,
      "node": true
    },
    "extends": [
      "eslint:recommended",
      "plugin:react/recommended",
      "plugin:@typescript-eslint/recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended",
      "plugin:import/errors",
      "plugin:import/warnings",
      "plugin:import/typescript",
      "plugin:react-hooks/recommended",
      "plugin:jsx-a11y/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaFeatures": {
        "jsx": true
      },
      "ecmaVersion": 2020,
      // @typescript-eslint/parser の反映に必須
      "project": ["./tsconfig.json"],
      "sourceType": "module"
    },
    "plugins": [
      "prettier",
      "react",
      "@typescript-eslint",
      "import",
      "sort-keys-shorthand",
      "jsx-a11y"
    ],
    "rules": {
      "import/order": [
        "error",
        {
          "alphabetize": {
            "caseInsensitive": true,
            "order": "asc"
          }
        }
      ],
      // TODO: Nextjs の Link コンポーネント対策
      "jsx-a11y/anchor-is-valid": [
        "error",
        {
          "aspects": ["invalidHref", "preferButton"],
          "components": ["Link"],
          "specialLink": ["hrefLeft", "hrefRight"]
        }
      ],
      "prettier/prettier": "error",
      "react/jsx-sort-props": [
        "error",
        {
          "callbacksLast": false,
          "ignoreCase": false,
          "noSortAlphabetically": false,
          "reservedFirst": false,
          "shorthandFirst": false,
          "shorthandLast": false
        }
      ],
      "sort-keys-shorthand/sort-keys-shorthand": [
        "error",
        "asc",
        {
          "caseSensitive": true,
          "natural": true,
          "shorthand": "first"
        }
      ]
    },
    "settings": {
      "import/resolver": {
        "node": {
          "paths": ["src"]
        }
      },
      "react": {
        "version": "detect"
      }
    }
  },
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx --fix"
  }
}

個人的には eslint-config-airbnb-typescript も使用したいところなのですが、うまく設定できず断念気味です。

ルールとしてはもう少しきつめにしたほうが良いかな？という印象です。

Prettier のフォーマットがなんだかんだでめちゃくちゃ強いので ESLint 側に組み込む形にしてあります。

フォーマットは ESLint で行うようにしています Pritter でやったらどうなるんですかね？

stylelint もついでに備忘録がてら…ただ、こっちはまだまだ試行錯誤中です。

こちらの環境は Nextjs(CSS Modules) × SCSS となっています。

{
  "devDependencies": {
    "stylelint": "13.9.0",
    "stylelint-config-css-modules": "2.2.0",
    "stylelint-config-recommended-scss": "4.2.0",
    "stylelint-config-sass-guidelines": "7.1.0",
    "stylelint-scss": "3.18.0"
  },
  "scripts": {
    "lint:style": "stylelint '**/*.scss' --fix"
  },
  "stylelint": {
    "extends": [
      "stylelint-config-sass-guidelines",
      "stylelint-config-recommended-scss",
      "stylelint-config-css-modules"
    ],
    "plugins": ["stylelint-scss"],
    "rules": {
      "at-rule-no-unknown": [
        true,
        {
          "ignoreAtRules": ["include"]
        }
      ],
      "selector-class-pattern": null
    }
  }
}

stylelint-config-recommended-scss はいらないのかもなーというのと selector-class-pattern の回避方法がわかっていません、誰か教えて！