Zenn
🤖

stylelintユーザガイドーカスタマイズ

に公開
CSS
Sass
Scss
tech

内容の目的

本内容は、Stylelintユーザガイドーカスタマイズ を翻訳し、個人活用のために整理しています。

カスタマイズ

標準設定は、組み込みルールの約半分を有効にします。Stylelint にはさらに多くの機能があります。標準設定を基盤として利用し、その上に独自のルールを追加することをおすすめします。

もう半分の組み込みルールを利用して、以下のことができます：

これらの慣習は、通常あなたやあなたのプロジェクト固有のものです。

できることはたくさんあります。例えば、以下のみを許可したい場合：

  • 一般的には %, deg, px, rem, ms の単位
  • 境界線には px
  • パディングやギャップには rem

この場合、unit-allowed-list や declaration-property-unit-allowed-list ルールを使うことができます：

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "declaration-property-unit-allowed-list": {
+     "/^border/": ["px"],
+     "/^padding|^gap/": ["rem"]
+   },
+   "unit-allowed-list": ["%", "deg", "px", "rem", "ms"]
+ }
}

または、color-named、color-no-hex、function-disallowed-list ルールを使って hsl() カラーノーテーションのみを許可することもできます：

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "color-named": "never",
+   "color-no-hex": true,
+   "function-disallowed-list": ["rgb", "hwb", "lch"]
+ }
}

または、selector-max-id ルールを使って ID セレクタの数を制限することもできます：

{
  "extends": ["stylelint-config-standard"],
+ "rules": {
+   "selector-max-id": 0
+ }
}

これらは組み込みルールでできることの一部にすぎません。ルールを厳格に設定して、CSS をコントロールすることが可能です。

カスタムルール

組み込みルールに加え、Stylelint にはプラグインとして追加できるカスタムルールがあります。

カスタムルールは、主にコミュニティによって、手法、ツールセットz、非標準CSS機能、または非常に特定のユースケースをサポートするために作成されています。

カスタムルールは、それを含む共有設定を拡張するか、プラグインを直接利用することで設定に追加できます。たとえば、recess order 設定を拡張してプロパティをグループ化できます：

{
  "extends": [
-   "stylelint-config-standard"
+   "stylelint-config-standard",
+   "stylelint-config-recess-order"
  ]
}

または、alphabetical order 設定を拡張してプロパティをアルファベット順に並べることもできます：

{
  "extends": [
-   "stylelint-config-standard"
+   "stylelint-config-standard",
+   "stylelint-config-alphabetical-order"
  ]
}

また、order プラグインを直接利用して独自の順序を指定することもできます：

{
  "extends": ["stylelint-config-standard"],
+ "plugins": ["stylelint-order"],
+ "rules": {
+   "order/properties-order": [
+     "transform",
+     "top",
+     "color"
+   ]
+ }
}

カスタムルールには、厳格な BEM 規則の強制や、数値値の厳格なスケールなど、さまざまなものがあります。その他の共有設定やカスタムルール用プラグインはAwesome Stylelintにリストアップされています。

また、独自のカスタムルールをプラグイン内で作成することもできます。独自のニーズや慣習を強制したい場合に特に便利です。

厳格性

自分の慣習を厳格に強制する設定を作成し、必要に応じて設定コメントを使って特定のルールを無効化することをおすすめします。設定コメントは Stylelint の重要な一部なので、積極的に活用してください。

設定内で report* プロパティを使うことで、コメントが無意味だったり説明がなかったりしないようにできます：

{
  "extends": ["stylelint-config-standard"],
+ "reportDescriptionlessDisables": true,
+ "reportInvalidScopeDisables": true,
+ "reportNeedlessDisables": true
}

これらのプロパティは、例外を追加する必要がある場合に個別に設定できます。

また、reportDisables セカンダリプロパティを使って、ルールごとに無効化を禁止することもできます。

Stylelint の利用方法

Visual Studio Code 拡張機能や、Awesome Stylelintにリストされている他の統合ツールを利用すれば、コードエディタ内で即座にフィードバックを得ることができます。これは問題をすぐに確認し解決する最速の方法です。

CLIを使う必要はありません。Node.js APIも提供していますし、Awesome Stylelintにリストされている他の統合ツールやタスクランナーも利用できます。

どれを選んでも、Stylelint には動作をカスタマイズできる多くのオプションがあります。例えば、--fix オプションを使って自動で修正できる問題をできるだけ自動修正するのが一般的です：

npx stylelint "**/*.css" --fix

また、以下も検討するとよいでしょう：

目次に戻る

Discussion