Skip to content

ソート

Oxfmt はインポート、Tailwind クラス、および package.json に対するソート機能を提供しています。

詳細については 設定ファイルリファレンス を参照してください。

インポートのソート

eslint-plugin-perfectionist/sort-imports をベースにしています。

デフォルトでは無効になっています。

例での構成

eslint-plugin-perfectionist/sort-imports のデフォルトと同じ順序です。

.oxfmtrc.json
json
{
  "sortImports": {
    "groups": [
      "type-import",
      ["value-builtin", "value-external"],
      "type-internal",
      "value-internal",
      ["type-parent", "type-sibling", "type-index"],
      ["value-parent", "value-sibling", "value-index"],
      "unknown"
    ]
  }
}

トップレベルで "newlinesBetween": false を使用するとグループ間の改行が無効になり、groups 内で { "newlinesBetween": true } を使用することで特定の場所に改行を挿入できます。

.oxfmtrc.json
json
{
  "sortImports": {
    "newlinesBetween": false,
    "groups": [
      ["value-builtin", "value-external"],
      ["value-internal", "value-parent", "value-sibling", "value-index"],
      { "newlinesBetween": true },
      "type-import",
      "unknown"
    ]
  }
}

customGroups を使って、特定のインポートに一致するための独自のグループを定義できます。各カスタムグループには groupName があり、groups で参照できます。elementNamePattern はインポート元と一致させるためにグロブパターンを受け入れます。

.oxfmtrc.json
json
{
  "sortImports": {
    "customGroups": [
      {
        "groupName": "react-libs",
        "elementNamePattern": ["react", "react-**"]
      }
    ],
    "groups": [
      "react-libs",
      ["value-builtin", "value-external"],
      "value-internal",
      ["value-parent", "value-sibling", "value-index"],
      "unknown"
    ]
  }
}

Tailwind CSS クラスのソート

Tailwind ユーティリティクラスをソートします。

prettier-plugin-tailwindcss をベースにしています。

デフォルトでは無効になっています。

例での構成

.oxfmtrc.json
json
{
  "sortTailwindcss": {
    "stylesheet": "./path/to/stylesheet.css",
    "functions": ["clsx", "cn"],
    "preserveWhitespace": true
  }
}

attributes および functions に対して正規表現パターンはサポートされていません。

package.json フィールドのソート

オピニオンに基づいた順序を使用して package.json 内のキーをソートします。

詳細については フィールドの順序 を参照してください。

デフォルトで有効になっています。

例での構成

無効にする場合:

.oxfmtrc.json
json
{
  "sortPackageJson": false
}

scripts をアルファベット順にソートする場合:

.oxfmtrc.json
json
{
  "sortPackageJson": {
    "sortScripts": true
  }
}