정렬

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

상위 레벨에서 "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"
    ]
  }
}

특정 가져오기를 매칭하기 위해 customGroups를 사용하여 사용자 정의 그룹을 정의할 수 있습니다. 각 사용자 정의 그룹은 groups에서 참조할 수 있는 groupName을 가집니다. elementNamePattern은 가져오기 소스를 매칭하는 데 사용 가능한 글로브 패턴을 수락합니다.

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

Tailwind CSS 클래스 정렬

Tailwind 유틸리티 클래스를 정렬합니다.

prettier-plugin-tailwindcss를 기반으로 합니다.

기본적으로 비활성화되어 있습니다.

예시 구성

.oxfmtrc.json

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

attributes 및 functions에 대한 정규 표현식 패턴은 지원되지 않습니다.

package.json 필드 정렬

의견에 따라 정렬된 순서를 사용하여 package.json의 키를 정렬합니다.

자세한 사항은 필드 순서를 참고하세요.

기본적으로 활성화되어 있습니다.

예시 구성

비활성화하려면:

.oxfmtrc.json

{
  "sortPackageJson": false
}

scripts를 알파벳순으로 정렬하려면:

.oxfmtrc.json

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