Oxfmt: Oxc 포매터 알파

• 

  BoshenProject Lead

• 

  DunqingCore

• 

  Yuji SugiuraCore

이 글은 Oxfmt 알파 릴리스를 알립니다. Oxfmt는 이후 베타에 도달했습니다. 최신 기능·개선은 Oxfmt 베타 발표를 참고하세요.

Rust 기반·Prettier 호환 코드 포매터 Oxfmt 알파를 공개합니다. 첫 릴리스는 JavaScript와 TypeScript에 초점을 맞추었으며, 다른 언어 지원은 곧 이어집니다.

Oxfmt의 목표는 다음과 같습니다.

• 성능: 캐시 없는 첫 실행에서 Prettier보다 30배 이상, Biome보다 3배 이상 빠름(벤치마크).
• 호환성: Prettier 호환이라 기존 프로젝트 도입이 쉽습니다.
• 개발자 경험: 곧 import 정렬, 포맷 옵션 확장, Prettier 플러그인 지원이 예정입니다.

빠른 시작

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

Oxfmt는 Prettier 설정 형식을 따릅니다. JSON 설정으로 Prettier를 쓰 중이라면 파일 이름을 .oxfmtrc.jsonc로 바꿀 수 있습니다.

cp .prettierrc.json .oxfmtrc.jsonc

.oxfmtrc.jsonc 예시로 시작할 수도 있습니다.

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  // Prettier에서 옮길 때는 80; Oxfmt 기본값은 100입니다!
  "printWidth": 80,
  "ignorePatterns": [] // `.prettierignore`와 동일
}

다음으로 package.json 스크립트에 oxfmt를 추가합니다.

"scripts": {
  "format": "oxfmt"
}

자세한 설치는 설치 가이드를 참고하세요.

성능

Oxfmt는 매우 빠릅니다. Outline 저장소 기준 벤치마크:

• 캐시 없는 실험적 Prettier CLI보다 30배 이상 빠름
• @prettier/plugin-oxc로 Oxc 파서를 쓰는 Prettier보다 20배 이상 빠름
• Rust 기반 포매터인 Biome보다 3배 이상 빠름

벤치마크 설정 상세는 다음 저장소를 참고하세요.

oxc-project/bench-formatter
https://github.com/oxc-project/bench-formatter

설계

Oxc 팀은 기존 생태계와의 호환을 우선해 대규모 코드베이스도 마이그레이션이 단순하도록 합니다.

포맷 결과

Oxfmt는 Prettier의 JavaScript 포맷과 일치합니다. 지금 Oxfmt로 옮기면 Prettier와 포맷 차이는 보이지 않아야 합니다.

구형 Prettier에서 옮길 때는 작은 차이가 있을 수 있습니다(마이그레이션 예시). Prettier 포맷을 더 좋게 할 수 있는 부분을 찾아 Prettier 팀에 버그 리포트와 PR을 보내 왔고, 많은 개선이 최근 Prettier 3.7에 포함되었습니다.

Oxfmt는 현재 Prettier의 JavaScript·TypeScript 테스트의 약 95%를 통과하며, Prettier 팀과 협력해 시간이 지나며 수렴하기를 바랍니다.

기본값 printWidth: 100

기본 줄 길이를 Prettier의 80 대신 printWidth: 100으로 두었습니다. 이유는 다음과 같습니다.

• 타입 주석 때문에 TypeScript 코드가 JavaScript보다 길어지는 경향
• import 문에 항목이 많음
• 큰 화면에서 가로 공간이 넉넉함
• LLM 토큰이 약간 적게 듦

Prettier와 호환되지만 기본 print width는 100입니다. Prettier에서 옮길 때 큰 diff를 피하려면 80으로 명시하세요.

ignorePatterns

.prettierignore를 지원하면서, 설정 한 파일에 모으려면 ignorePatterns 옵션도 씁니다.

설정

Prettier JSON 설정은 Oxfmt와 호환됩니다. 가장 단순한 마이그레이션은 다음과 같습니다.

cp .prettierrc.json .oxfmtrc.jsonc

에디터가 JSON language server를 지원한다면 oxfmt를 devDependencies에 추가한 뒤 이 최소 템플릿으로 시작할 수 있습니다.

{
  "$schema": "./node_modules/oxfmt/configuration_schema.json",
  "ignorePatterns": []
}

이 알파에서 Prettier의 모든 옵션은 아직 아니지만, 주요 옵션은 지원합니다: printWidth, tabWidth, useTabs, semi, singleQuote, quoteProps, jsxSingleQuote, trailingComma, bracketSpacing, objectWrap, bracketSameLine, arrowParens, endOfLine, singleAttributePerLine.

전체 옵션은 문서를 참고하세요.

터미널 출력

Oxfmt 기본 동작은 prettier . --write와 같아 cargo fmt와 비슷한 UX이며 출력이 없습니다. CI에서는 --check로 차이를 보이고 강제할 수 있습니다.

베타 릴리스 계획

베타를 향한 계획:

• 더 많은 파일 형식 지원 — .json 등
• 임베디드 언어 포맷 — css in js, graphql in js 등
• 내장 정렬·미관 기능, 예: import 정렬
• Prettier 플러그인
• Oxfmt Node.js API
• 파일 끝 줄바꿈 끄기
• --migrate prettier
• …그리고 여러분의 기능 요청

베타까지 진행은 여기서 추적할 수 있습니다.

Formatter Beta · Milestone #15 · oxc-project/oxc
https://github.com/oxc-project/oxc/milestone/15

향후 버전에서는 일부 포맷 의견도 완화할 계획입니다.

다음 단계

전체 설치 가이드는 Oxfmt 문서를 참고하세요.

이슈 보고

포맷 차이는 https://github.com/oxc-project/oxc/discussions/14669를 참고하세요. 알려진 이슈는 라벨로 구분합니다.

그 외 문제는 GitHub에서 전용 템플릿으로 이슈를 열어 주세요.

커뮤니티 참여

RFC: Formatter · oxc-project/oxc · Discussion #13608
https://github.com/oxc-project/oxc/discussions/13608

Oxfmt를 더 좋게 만드는 데 피드백을 환영합니다!

감사의 말

Oxfmt는 biome_formatter 인프라 포크를 기반으로 하며, Biome 팀 특히 @ematipico, @MichaReiser께 감사드립니다. Prettier 팀과 포맷 호환에 협력해 주신 @fisker께도 감사드립니다.