カスタマイズ

standard config は、組み込みルールの約半分を有効にします。Stylelintはさらに多くのことができます。standard config を基盤として、その上に構築することをお勧めします。

組み込みルールの残りの半分を使用して、次のことができます。

特定の記述を禁止することで、より一貫性を確保する
制限を設定することで、コードの複雑さを管理する

これらの規則は、通常、ユーザーとプロジェクトに固有のものです。

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

一般的に %、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 にプラグインとして組み込むことができるカスタムルールがあります。

カスタムルールは、通常、コミュニティによって作成され、方法論、ツールセット、非標準の CSS 機能、または非常に具体的なユースケースをサポートします。

カスタムルールをconfigに追加するには、カスタムルールを含む共有configを拡張するか、プラグインを直接使用します。たとえば、orderプラグインを含むrecess order configを拡張することで、プロパティを順序付けることができます。

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

または、たとえば、プロパティをアルファベット順に並べたい場合は、プラグインを直接使用できます。

{
  "extends": ["stylelint-config-standard"],
+ "plugins": ["stylelint-order"],
+ "rules": {
+   "order/properties-alphabetical-order": true
+ }
}

カスタムルールは、厳密な 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 の動作をカスタマイズするために使用できる Stylelint には多くのオプションがあります。たとえば、--fix オプションを使用して、できるだけ多くの問題を自動的に修正することをお勧めします。

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

また、以下についても調べてみてください。

パフォーマンスを向上させるための --cache オプション
出力をカスタマイズするための --formatter オプション

カスタマイズ

カスタムルール​

厳格さ​

Stylelint の使用​

カスタムルール

厳格さ

Stylelint の使用