Prettier에서 Oxfmt로의 마이그레이션

이 가이드에서는 Prettier에서 Oxfmt로의 마이그레이션을 다룹니다.

WARNING

Oxfmt는 베타 버전이며, 특히 복잡한 설정에는 적합하지 않을 수 있습니다.

빠른 시작

간단한 설정의 경우 단일 명령어로 마이그레이션할 수 있습니다:

npm

$ npm add -D oxfmt@latest && npx oxfmt --migrate=prettier && npx oxfmt

pnpm

$ pnpm add -D oxfmt@latest && pnpm oxfmt --migrate=prettier && pnpm oxfmt

yarn

$ yarn add -D oxfmt@latest && yarn oxfmt --migrate=prettier && yarn oxfmt

bun

$ bun add -D oxfmt@latest && bunx oxfmt --migrate=prettier && bunx oxfmt

마이그레이션 전 준비 사항

많은 설정에서 Oxfmt는 Prettier v3.8과 호환됩니다.

주요 차이점:

• 기본 printWidth는 100입니다 (Prettier는 80 사용)
• Prettier 플러그인은 지원되지 않습니다 (다만 일부 인기 있는 플러그인은 내장된 방식으로 구현되어 있음)
• 일부 옵션이 지원되지 않습니다 (자세한 내용은 구성 참조를 참조하세요)

상세 정보는 지원되지 않는 기능을 참고하세요.

단계 1: Prettier를 v3.8로 업그레이드하기 (선택 사항)

Oxfmt의 출력 결과가 가장 근사하게 나오는 것은 Prettier v3.8입니다. 먼저 업그레이드하면 포맷팅 차이를 최소화할 수 있습니다.

단계 2: Oxfmt 설치하기

npm

$ npm add -D oxfmt@latest

pnpm

$ pnpm add -D oxfmt@latest

yarn

$ yarn add -D oxfmt@latest

bun

$ bun add -D oxfmt@latest

deno

$ deno add -D npm:oxfmt@latest

단계 3: 구성 파일 마이그레이션

Oxfmt는 .oxfmtrc.json 또는 .oxfmtrc.jsonc를 사용합니다. 기본 예제:

.oxfmtrc.jsonc

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "printWidth": 80,
}

oxfmt --migrate prettier 명령을 실행하여 자동으로 Prettier 구성 파일을 변환할 수 있습니다.

prettierrc.js 예제

변경 전:

prettierrc.js

module.exports = {
  singleQuote: true,
  jsxSingleQuote: true,
};

변경 후 (.oxfmtrc.jsonc):

.oxfmtrc.jsonc

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
}

prettierrc.yaml 예제

변경 전:

prettierrc.yaml

trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

변경 후 (.oxfmtrc.jsonc):

.oxfmtrc.jsonc

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true,
  "printWidth": 80,
}

단계 4: 스크립트 업데이트하기

package.json 스크립트

{
  "scripts": {
-   "format": "prettier --write .",
+   "format": "oxfmt",
-   "format:check": "prettier --check ."
+   "format:check": "oxfmt --check"
  }
}

CI 워크플로우

  - name: 포맷 검사
-   run: yarn prettier --check .
+   run: yarn oxfmt --check

Git 훅 (husky, lint-staged)

package.json에서:

"lint-staged": {
- "*": "prettier --write --no-error-on-unmatched-pattern"
+ "*": "oxfmt --no-error-on-unmatched-pattern"
}

단계 5: 포맷터 실행하기

npm run format

필요하지 않으면 Prettier를 제거하세요.

선택 사항 단계

에디터 통합 업데이트하기

에디터 설정하기를 참조하세요.

문서 업데이트하기

해당되는 경우 CONTRIBUTING.md, AGENTS.md, CLAUDE.md 등에서 Prettier 참조를 업데이트하세요.

린트 규칙 업데이트하기

존재한다면 eslint-plugin-prettier를 제거하세요. 필요하다면 이를 oxfmt --check 작업으로 대체할 수 있습니다.
또한, ESLint를 계속 사용할 계획이라면, 충돌할 수 있는 스타일링 관련 ESLint 규칙을 비활성화하기 위해 eslint-config-prettier를 유지하거나 추가해야 합니다. eslint-config-prettier는 eslint-plugin-prettier와 달리 새로운 린트 규칙이 없습니다. 오직 설정 파일에 불과합니다.

또한 Oxlint로 마이그레이션하는 것을 고려해 보세요.

.git-blame-ignore-revs 업데이트하기

포맷 변경 커밋의 SHA를 .git-blame-ignore-revs에 추가하여 git blame에서 숨길 수 있습니다.

.prettierignore를 "ignorePatterns"로 교체하기

Prettier를 더 이상 사용하지 않는다면, 선택적으로 .prettierignore의 내용을 oxfmt 구성 파일의 "ignorePatterns"로 이동할 수 있습니다. 자세한 정보는 파일 무시하기를 참고하세요.