Prettier에서 마이그레이션

Prettier에서 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

Skills로 마이그레이션

migrate-oxfmt 스킬로 대화형 마이그레이션을 할 수 있습니다.

npx skills add https://github.com/oxc-project/oxc --skill migrate-oxfmt

설치 후 /migrate-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, oxfmt.config.ts를 사용합니다. 기본 예:

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

이후(oxfmt.config.ts):

oxfmt.config.ts

import { defineConfig } from "oxfmt";

export default defineConfig({
  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: Check formatting
-   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가 있으면 제거하세요. 필요하면 CI에서 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"로 옮길 수 있습니다. .prettierignore는 전역이고 ignorePatterns는 해당 설정 파일 범위입니다. 중첩 설정에서는 무시되는 파일이 달라질 수 있습니다. 자세한 내용은 무시 파일을 참고하세요.