Skip to content

Oxfmt 베타

Oxfmt가 베타 버전에 도달했다는 소식을 기쁘게 공유합니다.

Oxfmt는 자바스크립트 생태계를 위한, Prettier와 호환되는 러스트 기반 코드 포메터입니다. 최신 툴링과의 완전한 호환성을 제공하면서도 성능을 크게 향상시키도록 설계되었습니다.

벤치마킹 결과, 캐시 없이 초기 실행 시 Oxfmt는 Prettier보다 30배 이상 빠르고, Biome보다 3배 빠릅니다. 전체 벤치마크 결과를 확인하세요.

12월 알파 릴리스 이후, 추가 파일 형식 지원, 임베디드 언어 포맷팅, 임포트 정렬, Tailwind CSS 지원 통합, 그리고 수많은 안정성 및 호환성 개선 사항을 도입했습니다.

현재까지 오엑스프로젝트 생태계 전반에서 넓게 채택되고 있습니다. 이미 사용 중인 프로젝트로는: openclaw/openclaw, vuejs/core, vercel/turborepo, huggingface/huggingface.js, getsentry/sentry-javascript, npmx-dev/npmx.dev 등이 있습니다.

시작하기

개발 종속성으로 oxfmt를 설치하세요:

sh
pnpm add -D oxfmt

package.json에 스크립트를 추가하세요:

package.json
json
{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check"
  }
}

파일을 포맷하세요:

sh
pnpm run fmt

파일 작성 없이 포맷팅을 검사하세요:

sh
pnpm run fmt:check

Prettier에서 마이그레이션하기

하나의 명령어로 설치, 설정 마이그레이션, 재포맷을 수행하세요:

sh
pnpm add -D oxfmt && pnpm oxfmt --migrate prettier && pnpm oxfmt

자세한 마이그레이션 가이드는 Prettier에서 마이그레이션하기를 참고하세요.

인공지능 마이그레이션 프롬프트

또는 다음과 같은 프롬프트를 인공지능 코딩 어시스턴트에 복사하여 프로젝트를 마이그레이션할 수 있습니다:

다음 프로젝트를 다음 문서의 지침에 따라 Prettier에서 Oxfmt로 마이그레이션하세요: https://oxc.rs/docs/guide/usage/formatter.html:
1. oxfmt 설치 후 `oxfmt --migrate prettier` 실행
2. package.json 스크립트를 oxfmt 사용하도록 업데이트
3. CI 워크플로우를 `oxfmt --check` 사용하도록 업데이트
4. lint-staged를 `oxfmt --no-error-on-unmatched-pattern` 사용하도록 업데이트
5. 모든 파일을 재포맷하기 위해 oxfmt 실행
6. prettier 및 관련 패키지 제거
7. 에디터 설정을 oxfmt로 업데이트
8. 만약 CONTRIBUTING.md, AGENTS.md 또는 CLAUDE.md에 prettier가 언급되어 있다면 해당 파일도 업데이트

자세한 지침은 Oxfmt 문서를 참조하세요.

알파 버전 이후 새로 추가된 주요 기능

100% Prettier 호환성

현재 Oxfmt는 Prettier의 자바스크립트 및 타입스크립트 호환성 테스트를 100% 통과합니다. 일부 남아 있는 포맷팅 불일치에 대해서는 Prettier 팀에게 보고하여 기대 동작을 일치시키기 위해 협력하고 있습니다.

이는 여러분이 자신 있게 Prettier에서 Oxfmt로 마이그레이션할 수 있음을 의미합니다. 코드가 정확히 동일하게 포맷되며, 미처 발견되지 않은 사례가 있다면 보고해 주세요.

추가 파일 형식 지원

현재 지원하는 파일 형식은 다음과 같습니다: 자바스크립트, JSX, 타입스크립트, TSX, JSON, JSONC, JSON5, YAML, TOML, HTML, Angular, Vue, CSS, SCSS, Less, Markdown, MDX, GraphQL, Ember, Handlebars. 즉, 프로젝트 전체에 하나의 포메터만 사용하면 됩니다.

Tailwind CSS 통합

자바스크립트/타입스크립트 파일과 비자바스크립트/타입스크립트 파일 모두에서 자동 Tailwind CSS 클래스 정렬이 지원됩니다. prettier-plugin-tailwindcss의 기능이 내장되어 있으므로 더 이상 플러그인이 필요하지 않습니다.

임포트 정렬

사용자 정의 옵션을 제공하는 내장형 임포트 정렬이 이제 사용 가능합니다:

  • ignoreCase - 대소문자 무시 정렬
  • sortSideEffects - 사이드 이펙트 임포트 정렬
  • newlinesBetween - 임포트 그룹 간 공백 줄 제어
  • groups - 사용자 정의 정렬 순서 그룹
  • customGroups - 사용자 정의 그룹 규칙 정의

더 많은 옵션은 완전한 참조 문서를 참조하세요.

package.json 필드 정렬

기본적으로 자동 package.json 필드 정렬이 활성화되어 있어, package.json 파일이 일관되게 정리됩니다.

임베디드 언어 포맷팅

템플릿 리터럴 내에 포함된 코드를 포맷할 수 있습니다 (임베디드 포맷팅 설명):

  • styled-components 유사 구문, styled-jsx, CSS prop 지원을 포함한 CSS-in-JS
  • Angular @Component 템플릿 및 스타일

노드.js API

프로그래밍 가능한 API가 이제 사용 가능합니다:

ts
import { format, type FormatOptions } from "oxfmt";

const input = `let a=42;`;
const options: FormatOptions = {
  semi: false,
};

const { code } = await format("a.js", input, options);
console.log(code); // "let a = 42"

CLI 변경사항

  • --init - 새로운 구성 파일 생성
  • --migrate prettier - Prettier 구성 마이그레이션
  • --migrate biome - Biome 구성 마이그레이션
  • --stdin-filepath - 표준 입력의 파일 경로 지정
  • 글로브 패턴 확장 지원 - oxfmt './packages/**/*.{js,jsx}'

구성 변경사항

에디터 지원

Oxfmt는 다음과 같은 모든 지원 에디터에서 작동합니다: VS Code, Cursor, Zed, IntelliJ IDEA, WebStorm, Neovim, 그리고 LSP 지원을 갖춘 모든 에디터.

로드맵

안정적인 릴리스를 향해 계속해서 개선하고 있습니다:

  • Prettier 플러그인 지원
  • xxx-in-js 포맷팅 개선
  • 안정성 강화
  • 성능 최적화

다음 단계

Oxfmt 문서에서 전체 설치 가이드를 확인하세요.

문제 보고하기

포맷팅 차이에 대한 문의는 포맷팅 차이 논의를 참고하세요.

커뮤니티 참여하기

저희가 여러분의 피드백을 듣는 것을 기쁘게 생각합니다. 함께 참여하세요: