Zenn
🤖

stylelint開発ガイドーフォーマッター

に公開
CSS
Sass
Scss
tech

内容の目的

本内容は、stylelint開発ガイドーフォーマッター を翻訳し、個人活用のために整理しています。

カスタムフォーマッターの作成

フォーマッターとは、次のシグネチャを持つ関数です：

/**
 * @type {import('stylelint').Formatter}
 */
export default function formatter(results, returnValue) {
  return "整形された結果の文字列";
}

最初の引数（results）は、Stylelint の結果オブジェクト（型 Array<StylelintResult>） の配列です。

2 番目の引数（returnValue）は、以下のようなキーを持つオブジェクト（型 LinterResult）です：

{
  "errored": false, // "error" レベルの警告がある場合は true
  "maxWarningsExceeded": {
    // Stylelint が `maxWarnings` 設定で実行された場合に含まれる
    "maxWarnings": 10,
    "foundWarnings": 15
  },
  "ruleMetadata": {
    "block-no-empty": {
      "url": "https://stylelint.io/user-guide/rules/block-no-empty"
    }
    // 他のルール...
  }
}

引数の渡し方

フォーマッターでは環境変数を利用できます。たとえば、SKIP_WARNINGS を渡すには：

SKIP_WARNINGS=true stylelint "*.css" --custom-formatter ./my-formatter.js

または、別の整形プログラムを作成し、組み込みの JSON フォーマッターの出力をパイプで渡すことも可能です：

stylelint -f json "*.css" 2>&1 | my-program-that-reads-JSON --option

stylelint.formatters

Stylelint の内部フォーマッターは stylelint.formatters 経由で公開されています。

フォーマッターの共有

package.json に stylelint-formatter キーワードを追加することで共有可能になります。例：

{
  "keywords": ["stylelint", "stylelint-formatter"]
}

目次に戻る

Discussion