정렬

Oxfmt에는 import, Tailwind 클래스, package.json 정렬이 포함되어 있습니다.

• import 정렬
• Tailwind CSS 클래스 정렬
• package.json 필드 정렬

전체 옵션은 설정 파일 참조를 보세요.

import 정렬

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로 특정 import를 묶을 수 있습니다. 각 그룹은 groups에서 참조할 groupName을 가지며, elementNamePattern에는 import 경로에 맞는 글로브 패턴을 씁니다.

.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을 정렬합니다.

필드 순서는 field ordering을 참고하세요.

기본값은 활성입니다.

설정 예

끄려면:

.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,
  },
});