排序

Oxfmt 内置了导入、Tailwind 类名和 package.json 的排序功能。

• 导入排序
• Tailwind CSS 类名排序
• package.json 字段排序

完整详情请参阅 配置文件参考。

导入排序

基于 eslint-plugin-perfectionist/sort-imports。

默认禁用。

示例配置

与 eslint-plugin-perfectionist/sort-imports 默认配置相同的顺序。

.oxfmtrc.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"
    ]
  }
}

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  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

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

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  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 接受 glob 模式来匹配导入源。

.oxfmtrc.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"
    ]
  }
}

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  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

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

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  sortTailwindcss: {
    stylesheet: "./path/to/stylesheet.css",
    functions: ["clsx", "cn"],
    preserveWhitespace: true,
  },
});

不支持 attributes 和 functions 的正则模式。

package.json 字段排序

使用固定的顺序对 package.json 的键进行排序。

详见 字段排序。

默认启用。

示例配置

禁用：

.oxfmtrc.json

{
  "sortPackageJson": false
}

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  sortPackageJson: false,
});

按字母顺序排序 scripts：

.oxfmtrc.json

{
  "sortPackageJson": {
    "sortScripts": true
  }
}

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  sortPackageJson: {
    sortScripts: true,
  },
});