設定

Stylelint は設定オブジェクトを想定し、以下のいずれかのファイルで設定オブジェクトを探します。

• stylelint.config.js または .stylelintrc.js ファイル
  • 使用するモジュールシステムは、Node.js のデフォルトのモジュールシステム設定（例：package.json の "type": "module"）によって異なります。
• export default を使用した stylelint.config.mjs または .stylelintrc.mjs ファイル (ES モジュール)
• module.exports を使用した stylelint.config.cjs または .stylelintrc.cjs ファイル (CommonJS)
• .stylelintrc.json、.stylelintrc.yml、または .stylelintrc.yaml ファイル
• JSON または YAML 形式の .stylelintrc ファイル
  • エディターによる構文チェックとハイライト表示を容易にするために、拡張子（例：.json）を追加することをお勧めします。
• package.json の stylelint プロパティ

ES モジュールの例

/** @type {import('stylelint').Config} */
export default {
  rules: {
    "block-no-empty": true
  }
};

注記

@type JSDoc アノテーションにより、Typescript は自動補完と型チェックを行うことができます。

CommonJS の例

module.exports = {
  rules: {
    "block-no-empty": true
  }
};

JSON の例

{
  "rules": {
    "block-no-empty": true
  }
}

Stylelint は、現在の作業ディレクトリから開始して、これらのいずれかが検出されると検索を停止します。あるいは、--config または configFile オプションを使用して、検索をショートカットすることもできます。

設定オブジェクトには、次のプロパティがあります。

rules

ルールは、リンターが何を検索し、何に警告するかを決定します。Stylelint には 100 以上のルール が組み込まれています。 *デフォルトではルールは有効になっていません。*

rules プロパティは、*キーがルール名、値がルール設定であるオブジェクト*です。例えば

{
  "rules": {
    "color-no-invalid-hex": true
  }
}

各ルール設定は、次のいずれかの形式に適合します。

• null (ルールを無効にする)
• 単一の値 (プライマリオプション)
• 2 つの値を持つ配列 ([プライマリオプション、セカンダリオプション])

プライマリオプションを指定すると、ルールが有効になります。

多くのルールは、詳細なカスタマイズのためのセカンダリオプションを提供しています。セカンダリオプションを設定するには、2 つのメンバーを持つ配列を使用します。例えば

{
  "rules": {
    "selector-pseudo-class-no-unknown": [
      true,
      {
        "ignorePseudoClasses": ["global"]
      }
    ]
  }
}

オブジェクトには任意の数のキーを追加できます。例えば、

• block-no-empty を無効にする
• プライマリオプションを使用して unit-allowed-list を有効にする
• プライマリおよびセカンダリオプションを使用して alpha-value-notation を有効にする

{
  "rules": {
    "block-no-empty": null,
    "unit-allowed-list": ["em", "rem", "%", "s"],
    "alpha-value-notation": ["percentage", { "exceptProperties": ["opacity"] }]
  }
}

ルールやオプションの中には、正規表現を受け入れるものがあります。以下の一般的なケースを適用できます。

• ケバブケース: ^([a-z][a-z0-9]*)(-[a-z0-9]+)*$
• lowerCamelCase: ^[a-z][a-zA-Z0-9]+$
• スネークケース: ^([a-z][a-z0-9]*)(_[a-z0-9]+)*$
• UpperCamelCase: ^[A-Z][a-zA-Z0-9]+$

または、肯定後読み正規表現を使用してプレフィックスを強制します。例えば、foo- でプレフィックスを付けるには (?<=foo-) を使用します。

disableFix

disableFix セカンダリオプションを設定して、*ルールごとに*自動修正を無効にすることができます。

例えば

{
  "rules": {
    "color-function-notation": ["modern", { "disableFix": true }]
  }
}

message

message セカンダリオプションを使用して、ルールに違反した場合にカスタムメッセージを表示できます。

例えば、次のルール設定では、カスタムメッセージが置き換えられます。

{
  "rules": {
    "custom-property-pattern": [
      "^([a-z][a-z0-9]*)(-[a-z0-9]+)*$",
      {
        "message": "Expected custom property name to be kebab-case"
      }
    ]
  }
}

あるいは、本格的なカスタマイズが必要な場合は、最大限のコントロールのためにカスタムフォーマッターを作成することもできます。

実験的機能：一部のルールはメッセージ引数をサポートしています。例えば、color-no-hex ルールを設定する場合、16 進数の色をメッセージ文字列で使用できます。

.stylelintrc.js:

{
  'color-no-hex': [true, {
    message: (hex) => `Don't use hex colors like "${hex}"`,
  }]
}

.stylelintrc.json:

{
  "color-no-hex": [true, {
    "message": "Don't use hex colors like \"%s\""
  }]
}

JSON のような関数をサポートしていない形式では、printf のような形式 (例：%s) を使用できます。一方、JS 形式では、printf のような形式と関数の両方を使用できます。

reportDisables

reportDisables セカンダリオプションを設定して、このルールの stylelint-disable コメントをすべて報告し、作成者がルールをオプトアウトできないようにすることができます。

例えば

{
  "rules": {
    "color-no-invalid-hex": [true, { "reportDisables": true }]
  }
}

レポートはリントエラーとみなされます。

severity

severity セカンダリオプションを使用して、特定のルールの重大度を調整できます。

severity に使用できる値は次のとおりです。

• "warning"
• "error" (デフォルト)

例えば

{
  "rules": {
    "number-max-precision": [
      2,
      {
        "ignoreUnits": ["em"],
        "severity": "warning"
      }
    ]
  }
}

レポーターは、これらの重大度レベルを使用して、問題を表示したり、プロセスを異なる方法で終了したりすることがあります。

実験的機能：一部のルールはメッセージ引数をサポートしています。これらのルールでは、severity に関数を使用することができ、この関数はこれらの引数を受け取り、これらの引数に基づいて重大度を調整することができます。

この関数は、"error"、"warning"、または null を返さなければなりません。null を返すと、defaultSeverity が使用されます。

例えば、

{
	rules: {
		'selector-disallowed-list': [
			['a > .foo', '/\\[data-.+]/'],
			{
				severity: (selector) => {
					return selector.includes('a > .foo') ? 'error' : 'warning';
				},
			},
		],
	},
}

次のパターンはエラーとして報告されます。

a > .foo {}

しかし、次のパターンは警告として報告されます。

a[data-auto="1"] {}

extends

既存の設定 (独自の設定またはサードパーティの設定) を拡張できます。設定では、プラグイン、カスタム構文、オプションをバンドルし、ルールを設定できます。また、他の設定を拡張することもできます。

例えば、stylelint-config-standard は、拡張できる公式設定の 1 つです。

ある設定が別の設定を拡張する場合、別の設定のプロパティから開始し、そこに追加したり、上書きしたりします。

例えば、stylelint-config-standard を拡張し、アルファ値を数値に変更し、selector-class-pattern ルールを無効にするには、次のようにします。

{
  "extends": "stylelint-config-standard",
  "rules": {
    "alpha-value-notation": "number",
    "selector-class-pattern": null
  }
}

既存の設定の配列を拡張できます。配列の各項目は前の項目よりも優先されます (つまり、2 番目の項目は最初の項目のルールを上書きし、3 番目の項目は最初の項目と 2 番目の項目のルールを上書きし、以下同様に、最後の項目は他のすべてを上書きします)。

例えば、stylelint-config-standard を使用し、その上に myExtendableConfig を重ね、alpha-value-notation ルールを上書きするには、次のようにします。

{
  "extends": ["stylelint-config-standard", "./myExtendableConfig"],
  "rules": {
    "alpha-value-notation": "number"
  }
}

"extends" の値は、最終的に require() される「ロケーター」 (または「ロケーター」の配列) です。Node の require.resolve() アルゴリズムで動作する形式であれば、どのような形式でも使用できます。つまり、「ロケーター」は次のようになります。

• node_modules 内のモジュールの名前 (例：stylelint-config-standard、そのモジュールの main ファイルは有効な JSON 設定でなければなりません)。
• .js または .json 拡張子を持つファイルへの絶対パス (Node.js コンテキストで JS オブジェクトを作成して渡す場合に有効です)。
• 参照設定ファイルを基準とした、.js または .json 拡張子を持つファイルへの相対パス (例：configA に extends: "../configB" がある場合、configA を基準とした configB を探します)。

より多くの設定は Awesome Stylelint にあります。

plugins

プラグインは、方法論、ツールセット、*非標準の* CSS 機能、または非常に特殊なユースケースをサポートするために構築されたカスタムルールまたはカスタムルールのセットです。

例えば、stylelint-order は、宣言ブロック内のプロパティなどを順序付けるための一般的なプラグインパックです。

プラグインは、多くの場合、拡張できる共有設定に含まれています。例えば、stylelint-config-standard-scss 設定には、stylelint-scss プラグインが含まれています。

プラグインを直接使用するには、設定に "plugins" 配列を追加します。この配列には、プラグインオブジェクトまたは使用するプラグインを識別する「ロケーター」が含まれます。上記の extends と同様に、「ロケーター」は次のいずれかになります。

• npm モジュール名
• 絶対パス
• 呼び出し元の設定ファイルを基準とした相対パス

プラグインが宣言されたら、"rules" オブジェクト内で、標準ルールと同様に、*プラグインのルールのオプションを追加する必要があります*。ルール名については、プラグインのドキュメントを参照してください。

{
  "plugins": ["../special-rule.js"],
  "rules": {
    "plugin-namespace/special-rule": "everything"
  }
}

「プラグイン」は、単一のルールまたはルールのセットを提供できます。使用するプラグインがセットを提供する場合、"plugins" 設定値でモジュールを呼び出し、"rules" で提供されるルールを使用します。例えば

{
  "plugins": ["../some-rule-set.js"],
  "rules": {
    "some-rule-set/first-rule": "everything",
    "some-rule-set/second-rule": "nothing",
    "some-rule-set/third-rule": "everything"
  }
}

その他のプラグインは、Awesome Stylelint にあります。

customSyntax

コードで使用するカスタム構文を指定します。詳細はこちら。

overrides

overrides プロパティを使用すると、設定を適用するファイルのサブセットを指定できます。

例えば、

• すべての .scss ファイルに postcss-scss 構文を使用するには
• components および pages ディレクトリにあるすべての .css ファイルのすべてのアルファ値に percentage 表記を使用するには

{
  "rules": {
    "alpha-value-notation": "number"
  },
  "overrides": [
    {
      "files": ["*.scss", "**/*.scss"],
      "customSyntax": "postcss-scss"
    },
    {
      "files": ["components/**/*.css", "pages/**/*.css"],
      "rules": {
        "alpha-value-notation": "percentage"
      }
    }
  ]
}

overrides プロパティの値はオブジェクトの配列です。各オブジェクトは

• 設定を適用するファイルを指定するglobパターンの配列である files プロパティを含んでいる必要があります
• customSyntax、rules、extends などの通常の構成プロパティを少なくとも1つ含んでいる必要があります。

customSyntax プロパティは置き換えられますが、plugins、extends、rules などは追加されます。

パターンは、設定ファイルのディレクトリを基準としたファイルパスに対して適用されます。たとえば、設定ファイルのパスが /project-foo/.stylelintrc.js で、lintしたいファイルのパスが /project-foo/components/bar.css の場合、.stylelintrc.js で提供されるパターンは相対パス components/bar.css に対して実行されます。

オーバーライドは、通常の構成よりも優先順位が高くなります。同じ設定内の複数のオーバーライドは順番に適用されます。つまり、設定ファイルの最後のオーバーライドブロックは常に最も高い優先順位を持ちます。

defaultSeverity

セカンダリオプションで重大度が指定されていないすべてのルールのデフォルトの重大度レベルを設定できます。たとえば、デフォルトの重大度を "warning" に設定できます。

{
  "defaultSeverity": "warning"
}

report*

これらの report* プロパティは、stylelint-disable コメントの追加検証を提供します。これは、有用で適切に文書化された無効化を強制するのに役立ちます。

利用可能なレポートは次のとおりです。

• reportDescriptionlessDisables
• reportInvalidScopeDisables
• reportNeedlessDisables

これらはルールと同様に設定されます。次の3つの値のいずれかを持つことができます。

• null （設定をオフにする）
• true または false （プライマリオプション）
• 2 つの値を持つ配列 ([プライマリオプション、セカンダリオプション])

次のセカンダリオプションが利用可能です。

• "except" は、プライマリオプションを反転させるルール名の配列を取ります。
• "severity" は、上記のように、ルールに対して出力されるエラーのレベルを調整します。

たとえば、これは selector-max-type を除くすべてのルールの不要な無効化に対してエラーを生成します。

{
  "reportNeedlessDisables": [true, { "except": ["selector-max-type"] }]
}

そして、これは説明のない unit-allowed-list の無効化に対して警告を出力します。

{
  "reportDescriptionlessDisables": [
    false,
    {
      "except": ["unit-allowed-list"],
      "severity": "warning"
    }
  ]
}

reportDescriptionlessDisables

説明のない stylelint-disable コメントを報告します。report* プロパティです。

例えば

{
  "reportDescriptionlessDisables": true
}

詳細はこちら.

reportInvalidScopeDisables

設定オブジェクトで指定されているルールと一致しない stylelint-disable コメントを報告します。report* プロパティです。

例えば

{
  "reportInvalidScopeDisables": true
}

詳細はこちら.

reportNeedlessDisables

無効にする必要のある lint と一致しない stylelint-disable コメントを報告します。report* プロパティです。

例えば

{
  "reportNeedlessDisables": true
}

詳細はこちら.

configurationComment

/* stylelint-disable */ のような設定コメントが何で始まるかを設定できます。これは、異なる設定で複数のStylelintインスタンスを使用する場合に役立ちます。

たとえば、Stylelintのインスタンスで、デフォルトの /* stylelint-disable */ ではなく /* stylelint-foo-instance-disable */ でルールを無効にするには

{
  "configurationComment": "stylelint-foo-instance"
}

ignoreDisables

stylelint-disable コメント (例: /* stylelint-disable block-no-empty */) を無視します。

例えば

{
  "ignoreDisables": true
}

詳細はこちら.

ignoreFiles

特定のファイルを無視するためのglobまたはglobの配列を提供できます。

たとえば、すべてのJavaScriptファイルを無視できます。

{
  "ignoreFiles": ["**/*.js"]
}

Stylelintはデフォルトで node_modules ディレクトリを無視します。ただし、ignoreFiles が設定されている場合は、これがオーバーライドされます。

globが絶対パスである場合、それらはそのまま使用されます。相対パスの場合、以下の基準で解析されます。

• 提供されている場合は configBasedir
• 設定がStylelintが見つけてロードしたファイルである場合、設定のファイルパス
• または process.cwd()

注記

これは、**多数のファイルを無視するための効率的な方法ではありません**。多数のファイルを効率的に無視したい場合は、.stylelintignore を使用するか、ファイルglobを調整してください。

allowEmptyInput

globパターンがファイルと一致しない場合、Stylelintはエラーをスローしません。

例えば

{
  "allowEmptyInput": true
}

注記

この設定オプションは、ファイルごとにオーバーライドしないでください。

詳細はこちら.

cache

処理済みファイルの結果を保存して、Stylelintが変更されたファイルのみを操作するようにします。

例えば

{
  "cache": true
}

注記

この設定オプションは、ファイルごとにオーバーライドしないでください。

詳細はこちら.

fix

ルールによって報告された問題を、可能な場合は自動的に修正します。

例えば

{
  "fix": true
}

注記

この設定オプションは、ファイルごとにオーバーライドしないでください。

詳細はこちら.