最近のESLintStylelintの設定を公開

最近 ESLint と Stylelint の設定が固まってきたので、公開をば。

環境

以下の環境を前提としますが、Create React App でもそこまで変わらない気がします。

• Next.js
• TypeScript
• CSS Modules(Sass)
• Prettier

ESLint

ESLint に関わるパッケージ一覧

• "@typescript-eslint/eslint-plugin": "5.1.0",
• "eslint": "7.32.0",
• "eslint-config-google": "0.14.0",
• "eslint-config-next": "11.1.2",
• "eslint-config-prettier": "8.3.0",
• "eslint-plugin-css-modules": "2.11.0",
• "eslint-plugin-filenames": "1.3.2",
• "eslint-plugin-sort-destructure-keys": "1.4.0",
• "eslint-plugin-sort-keys-shorthand": "2.1.0",
• "eslint-plugin-typescript-sort-keys": "2.0.0",

"next": "11.1.2" では ESLint の v8 はまだ対応されていないようです。

@typescript-eslint/eslint-plugin は不要そうに見えるのですが、一部のエラーを抑えるためにしぶしぶ導入しています。

ESLint の設定

結構てきとうです。

{
  "extends": [
    "eslint:recommended",
    "google",
    // ここがないとエラーが抑えられない
    "plugin:@typescript-eslint/recommended",
    "plugin:css-modules/recommended",
    "plugin:typescript-sort-keys/recommended",
    "next/core-web-vitals",
    "prettier"
  ],
  "ignorePatterns": ["commitlint.config.js", "next.config.js"],
  "overrides": [
    {
      "excludedFiles": ["_app.tsx", "_document.tsx"],
      "files": "*",
      "rules": {
        "filenames/match-exported": ["error", [null, "camel"]],
        "filenames/match-regex": "error"
      }
    }
  ],
  "plugins": [
    "css-modules",
    "filenames",
    "sort-destructure-keys",
    "sort-keys-shorthand",
    "typescript-sort-keys"
  ],
  "root": true,
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "error",
    "import/order": [
      "error",
      {
        "alphabetize": {
          "caseInsensitive": true,
          "order": "asc"
        }
      }
    ],
    "newline-before-return": "error",
    "no-console": "error",
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 1
      }
    ],
    "react/jsx-sort-props": "error",
    "require-jsdoc": "off",
    "semi": "error",
    "sort-destructure-keys/sort-destructure-keys": "error",
    "sort-keys": "off",
    "sort-keys-shorthand/sort-keys-shorthand": "error"
  }
}

開発中常に手を加えるためこれが正解ではまったくないです、悪しからず。

Stylelint

Stylelint に関わるパッケージ一覧

ESLint と同様に。

• "postcss-scss": "4.0.1",
• "stylelint": "14.0.0",
• "stylelint-config-css-modules": "2.2.0",
• "stylelint-config-prettier": "9.0.3",
• "stylelint-config-recommended-scss": "5.0.0",
• "stylelint-config-sass-guidelines": "8.0.0",
• "stylelint-config-standard": "23.0.0",
• "stylelint-config-standard-scss": "2.0.0",
• "stylelint-order": "5.0.0",
• "stylelint-scss": "4.0.0",

"stylelint": "14.0.0" のメジャーアップデートから仕様がガラッと変わり、postcss-scss のインストールが必須になったみたいです。

Stylelint の設定

{
  "overrides": [
    {
      "customSyntax": "postcss-scss",
      "extends": [
        "stylelint-config-standard-scss",
        "stylelint-config-standard",
        "stylelint-config-css-modules",
        "stylelint-config-recommended-scss",
        "stylelint-config-sass-guidelines",
        "stylelint-config-prettier"
      ],
      "files": ["**/*.scss"],
      "plugins": ["stylelint-order", "stylelint-scss"],
      "rules": {
        "at-rule-no-unknown": null,
        "color-named": [
          "never",
          {
            "ignore": ["inside-function"]
          }
        ],
        "order/properties-alphabetical-order": true,
        "scss/at-rule-no-unknown": [
          true,
          {
            "ignoreAtRules": ["value"]
          }
        ],
        "selector-class-pattern": null,
        "selector-pseudo-class-no-unknown": [
          true,
          {
            "ignorePseudoClasses": ["export", "global"]
          }
        ]
      }
    }
  ]
}

全体を override していますが、これが必須かどうかはよくわかっていないです。

アルファベット順のソートが大好きなので、ちょっと偏った設定になってはいます。

そんな感じです。

ESLint 側はともかく、Stylelint のほうは v14 からガラッと仕様が変わったため、まだ不安定なところも多い印象です。

とはいえ、現状問題なく動いているので動作保証は大丈夫かとー。