最近のESLintStylelintの設定を公開

2021-10-25

最近 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 からガラッと仕様が変わったため、まだ不安定なところも多い印象です。

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

© 2018 kk-web