Prettier 플러그인

prettier-plugin-intlayer는 Prettier가 파일을 포맷할 때마다 번역 키를 고정된 순서로 정렬합니다. diff를 작게 유지하고, 병합 충돌을 줄이며, 누락된 로케일을 쉽게 발견할 수 있습니다.

// 전
t({ en: "Hello", ru: "Привет", fr: "Bonjour", "en-GB": "Hello", ar: "مرحبا" });

// 후
t({ en: "Hello", ar: "مرحبا", "en-GB": "Hello", fr: "Bonjour", ru: "Привет" });

설치

npm install --save-dev prettier prettier-plugin-intlayer

Prettier 3 이상이 필요합니다.

프로젝트에서 이미 Prettier를 사용 중인 경우 intlayer init prettier 명령을 실행하면 플러그인이 설치되고 설정에 자동으로 추가됩니다.

사용법

Prettier 설정 파일에 플러그인을 추가합니다:

{
  "plugins": ["prettier-plugin-intlayer"]
}

콘텐츠 선언 파일에만 적용하려면 override를 사용하세요:

{
  "overrides": [
    {
      "files": "*.content.{ts,tsx,js,jsx,mjs,cjs,json}",
      "options": {
        "plugins": ["prettier-plugin-intlayer"],
        "intlayerSortContentKeys": true
      }
    }
  ]
}

정렬되는 대상

t(): 로케일

고정된(pinned) 로케일이 먼저 옵니다(기본값은 en). 나머지 로케일은 알파벳 순서대로 정렬됩니다.

t({
  en: "Invitation not found",
  ar: "الدعوة غير موجودة",
  de: "Einladung nicht gefunden",
  "en-GB": "Invitation not found",
  fr: "Invitation introuvable",
  "he-IL": "ההזמנה לא נמצאה",
});

plural(): CLDR 순서

카테고리는 가장 작은 수량부터 대체값(fallback) 순으로 정렬됩니다: zero, one, two, few, many, other.

plural({
  one: "{{count}} вакансия",
  few: "{{count}} вакансии",
  many: "{{count}} вакансий",
  other: "{{count}} вакансий",
});

enu(): 오름차순 임계값

조건은 숫자 순으로 정렬된 후 연산자 순(<1, <=1, 1, >=1, >1)으로 정렬됩니다. fallback은 마지막에 위치합니다.

enu({
  "<-1": "Less than minus one car",
  "0": "No cars",
  "2": "Two cars",
  ">=3": "Many cars",
  fallback: "Some cars",
});

런타임에서는 먼저 일치하는 조건이 적용됩니다. 플러그인은 모든 수량이 동일한 콘텐츠로 확인될 때에만 새 순서를 적용합니다. 순서가 결과에 영향을 미치는 경우 객체는 작성된 상태 그대로 유지됩니다. 예를 들어 { '<1': …, '<=-2.3': … }에서는 '<1' 키가 모든 음수를 처리합니다.

select(): 알파벳 순서

케이스는 알파벳 순서로 정렬되며 fallback이 마지막에 배치됩니다.

select({
  draft: "This post is a draft",
  published: "This post is live",
  scheduled: "This post is scheduled",
  fallback: "Unknown status",
});

fallback이나 other 키가 없는 경우 마지막 케이스가 fallback으로 사용됩니다. 해당 케이스는 마지막에 유지되고 이전 케이스들만 정렬됩니다.

.content.json 파일

직렬화된 형태도 동일한 방식으로 정렬됩니다: { "nodeType": "translation", "translation": { … } }, 그리고 plural, enumeration, select 노드도 마찬가지입니다.

콘텐츠 키 (선택 사항)

intlayerSortContentKeys: true를 지정하면 플러그인이 딕셔너리 content의 키도 모든 중첩 수준에서 알파벳순으로 정렬합니다. 이는 *.content.* 파일에만 적용됩니다.

export default {
  key: "app",
  content: {
    description: t({ en: "…", fr: "…" }),
    footer: {
      copyright: "© Intlayer",
      links: [{ href: "/doc", label: t({ en: "Docs", fr: "Docs" }) }],
    },
    title: t({ en: "Hello", fr: "Bonjour" }),
  },
} satisfies Dictionary;

정렬은 각 헬퍼 함수(t, plural, enu, select, cond, gender, md, insert, nest, file…)를 거쳐 내부 객체까지 적용됩니다. 각 헬퍼 자체의 키 구조는 고유한 순서를 유지합니다. cond() 및 gender()에 전달된 키는 마지막 키가 fallback 역할을 하므로 순서가 재정렬되지 않습니다. content와 같은 수준의 필드(key, title, locale…)는 원래 상태를 유지합니다.

옵션

변경되지 않는 대상

• 스프레드(...base), 계산된 키([key]), 메서드 또는 중복 키가 포함된 객체.
• CLDR 카테고리가 아닌 키를 가진 plural() 맵.
• 새로운 순서 적용 시 확인되는 콘텐츠가 달라질 수 있는 enu() 맵.
• 헬퍼와 이름은 같지만 객체가 아닌 인수가 전달된 함수 호출.

주석은 해당 주석이 속한 키와 함께 이동합니다.

지원되는 파서

babel, babel-flow, babel-ts, typescript, flow, acorn, espree, meriyah, json, json5, jsonc. Vue, Svelte, Astro 파일의 <script> 블록도 이 파서들을 통해 포맷됩니다.

알려진 제한 사항. Prettier는 파서당 단 하나의 플러그인만 실행합니다. 다른 플러그인도 JavaScript/TypeScript 파서를 대체하는 경우(예: prettier-plugin-tailwindcss), 마지막에 나열된 플러그인만 해당 파일에 적용됩니다. 충돌을 피하려면 override를 사용하여 prettier-plugin-intlayer의 범위를 *.content.* 파일로 한정하세요.