블로그

Oxfmt 실전 튜토리얼: 코드 포맷팅을 날씬 빠르게

Prettier보다 10배 이상 빠른 코드 포맷팅 도구 Oxfmt 사용법을 배워보세요. 설치부터 설정, 편집기 통합까지 한 번에 안내합니다.

LibDoc Team 2026년 3월 4일 OXC 시리즈 43 분 읽기
#oxc #oxfmt #prettier #코드 포맷팅 #rust

Oxfmt 실전 튜토리얼: 코드 포맷팅을 날씬 빠르게

prettier --write "./src/**/*"를 실행한 후 파일 목록이 천천히 스크롤되는 것을 지켜본 적이 있으신가요? 수백 개 파일의 포맷팅에 십여 초 또는 그 이상이 걸리곤 합니다.

오늘 소개할 Oxfmt는 이런 경험을 완전히 바꿀 수 있습니다. OXC 도구 체인의 포맷팅 도구로, 빠를 뿐만 아니라 Prettier와 높은 호환성을 자랑합니다.

코드 포맷팅이란 무엇인가요?

Oxfmt를 깊이 이해하기 전에, 먼저 “코드 포맷팅”의 의미를 이해해 봅시다.

왜 코드를 포맷팅해야 하나요?

아래 코드를 보세요:

// 형식이 엉망인 코드
const user={name:"홍길동",age:25,email:"test@example.com"};
function getUserInfo(  user  ){
const{name,age}=user;
return  `사용자${name}，나이${age}`;
}

포맷팅 후:

// 정돈된 코드
const user = { name: "홍길동", age: 25, email: "test@example.com" };

function getUserInfo(user) {
  const { name, age } = user;
  return `사용자${name}，나이${age}`;
}

코드 포맷팅의 장점:

  • 가독성 향상: 정돈된 코드는 읽고 이해하기 쉽습니다
  • 충돌 감소: 통일된 스타일은 코드 리뷰 시 논쟁을 줄여줍니다
  • 효율 향상: 자동 포맷팅으로 수동 조정 시간 절약

Prettier의 대중성

Prettier는 현재 가장 인기 있는 코드 포맷팅 도구로, 거의 모든 프론트엔드 프로젝트에서 사용됩니다. 특징은 다음과 같습니다:

  • 설정보다 관례: 합리적인 기본 형식 제공
  • 다양한 언어 지원: JavaScript, TypeScript, CSS, HTML, JSON 등
  • 풍부한 생태계: 다양한 편집기 및 도구 체인과 통합

Oxfmt의 포지션

Oxfmt는 OXC 프로젝트의 일부로, Rust로 작성되어 Prettier의 고성능 대안을 목표로 합니다:

  • 속도 우위: Prettier보다 10-30배 빠름
  • 높은 호환성: Prettier 설정 형식 지원
  • 지속적 진화: 기능 커버리지 지속 향상

Oxfmt 설치

방법 1: 전역 설치

# npm 사용
npm install -g oxfmt

# yarn 사용
yarn global add oxfmt

# pnpm 사용
pnpm add -g oxfmt

방법 2: 프로젝트 내 설치

npm install oxfmt --save-dev

package.json에 스크립트 추가:

{
  "scripts": {
    "format": "oxfmt \"./src/**/*.{js,jsx,ts,tsx}\" --write",
    "format:check": "oxfmt \"./src/**/*.{js,jsx,ts,tsx}\" --check"
  }
}

방법 3: npx 사용

npx oxfmt "./src/**/*.{js,ts}" --write

빠른 시작

기본 명령

# 단일 파일 포맷팅
oxfmt src/main.js --write

# 여러 파일 포맷팅 (glob 패턴 사용)
oxfmt "./src/**/*.{js,jsx,ts,tsx}" --write

# 포맷 규칙 준수 여부만 확인 (파일 수정 안 함)
oxfmt "./src/**/*.{js,ts}" --check

# 포맷팅 차이 표시
oxfmt "./src/**/*.js" --diff

명령행 옵션

옵션설명
--write파일 직접 수정
--check확인만 하고 수정하지 않음, 종료 코드 반환
--diff포맷팅 전후 차이 표시
--config <path>설정 파일 경로 지정

실전: 첫 프로젝트 포맷팅하기

전체 과정을 연습해 봅시다.

1단계: 테스트 파일 생성

src/example.js 생성:

// 의도적으로 형식을 엉망으로 작성
const config={
    debug: true,
  api:"https://api.example.com",
        timeout:5000
}

function   fetchData(  endpoint  ){
const url = config.api+endpoint
    return fetch(url,{timeout:config.timeout})
.then(response=>response.json())
  .catch(error=>{
    console.error('Error:',error)
throw error
  })
}

export{config,fetchData}

2단계: 포맷팅 실행

oxfmt src/example.js --write

3단계: 포맷팅 결과 확인

포맷팅된 코드:

// 정돈된 형식
const config = {
  debug: true,
  api: "https://api.example.com",
  timeout: 5000,
};

function fetchData(endpoint) {
  const url = config.api + endpoint;
  return fetch(url, { timeout: config.timeout })
    .then((response) => response.json())
    .catch((error) => {
      console.error("Error:", error);
      throw error;
    });
}

export { config, fetchData };

4단계: —diff로 차이 확인

oxfmt src/example.js --diff

출력 예시:

--- src/example.js
+++ src/example.js (formatted)
@@ -1,13 +1,15 @@
-const config={
-    debug: true,
-  api:"https://api.example.com",
-        timeout:5000
+const config = {
+  debug: true,
+  api: "https://api.example.com",
+  timeout: 5000,
 }

설정 파일

Oxfmt는 설정 파일로 포맷팅 규칙을 커스터마이즈할 수 있습니다.

설정 파일 생성

프로젝트 루트에 .oxfmtrc 또는 oxfmt.config.js를 생성합니다:

// .oxfmtrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "always"
}

설정 옵션 상세

옵션타입기본값설명
semibooleantrue문장 끝에 세미콜론 추가 여부
singleQuotebooleanfalse작은따옴표 또는 큰따옴표 사용
tabWidthnumber2들여쓰기 공백 수
useTabsbooleanfalsetab 또는 공백 들여쓰기 사용
trailingCommastring"es5"후행 쉼표 규칙
printWidthnumber80줄당 최대 문자 수
bracketSpacingbooleantrue객체 리터럴 중괄호 내 공백
arrowParensstring"always"화살표 함수 매개변수 괄호

trailingComma 옵션

// "none" - 후행 쉼표 사용 안 함
const obj = {
  a: 1,
  b: 2
};

// "es5" - ES5가 지원하는 곳에서 사용 (객체, 배열)
const obj = {
  a: 1,
  b: 2,
};

// "all" - 모든 곳에서 사용 (함수 매개변수 포함)
function example(
  a,
  b,
) {}

arrowParens 옵션

// "always" - 항상 괄호 사용
const fn = (x) => x * 2;

// "avoid" - 단일 매개변수 시 괄호 생략
const fn = x => x * 2;

편집기 통합

편집기에서 자동 포맷팅을 사용하면 개발 효율이 크게 향상됩니다.

VS Code 설정

방법 1: Oxc 플러그인 사용

  1. “Oxc - Oxidation Compiler” 플러그인 설치
  2. .vscode/settings.json에서 설정:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "oxc.oxc-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "oxc.oxc-vscode"
  }
}

방법 2: 명령행 + 저장 시 실행 사용

.vscode/settings.json에서:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.format": true
  }
}

package.json에 추가:

{
  "scripts": {
    "format": "oxfmt \"./src/**/*.{js,ts,jsx,tsx}\" --write"
  }
}

WebStorm / IntelliJ IDEA

  1. Settings → Tools → External Tools 열기
  2. 새 도구 추가:
    • Name: Oxfmt
    • Program: npx
    • Arguments: oxfmt "$FilePath$" --write
  3. 단축키 설정 또는 파일 저장 시 자동 실행 설정

Prettier와의 호환성

Oxfmt는 Prettier와 높은 호환성을 목표로 하지만, 일부 기능은 아직 개발 중입니다.

지원되는 기능

기능상태
JavaScript/TypeScript 포맷팅✅ 지원
JSX/TSX 포맷팅✅ 지원
JSON 포맷팅✅ 지원
기본 설정 옵션✅ 지원
.prettierrc 설정 읽기✅ 지원

개발 중인 기능

기능상태
CSS/SCSS 포맷팅🚧 개발 중
HTML 포맷팅🚧 개발 중
Markdown 포맷팅🚧 개발 중
플러그인 시스템🚧 계획 중

마이그레이션 제안

Prettier를 사용 중이라면 다음과 같이 마이그레이션할 수 있습니다:

  1. Prettier 설정 파일 유지

Oxfmt는 .prettierrc 또는 prettier.config.js를 직접 읽을 수 있습니다:

// prettier.config.js
module.exports = {
  semi: true,
  singleQuote: true,
  tabWidth: 2,
  trailingComma: 'es5',
  printWidth: 100,
};
  1. 점진적 교체
{
  "scripts": {
    "format": "oxfmt \"./src/**/*.{js,ts}\" --write",
    "format:prettier": "prettier --write \"./src/**/*.{css,html,md}\""
  }
}

Oxfmt로 JS/TS를 처리하고, Prettier로 다른 파일 형식을 처리합니다.

성능 비교

Oxfmt와 Prettier의 성능 차이를 살펴봅시다.

테스트 환경

  • 파일 수: 200개 TypeScript 파일
  • 총 코드량: 약 50,000줄
  • 장비: MacBook Pro M1

테스트 결과

도구첫 실행 시간두 번째 실행 시간
Prettier3.2초2.8초
Oxfmt0.15초0.12초

Oxfmt가 Prettier보다 약 20배 빠릅니다!

실제 영향

대형 프로젝트나 CI/CD 환경에서는 이 차이가 더욱 두드러집니다:

상황PrettierOxfmt
pre-commit 훅10-30초0.5-2초
CI 포맷 검사1-2분3-5초
전체 프로젝트 포맷팅수분수초

유용한 팁

특정 파일 무시

.oxfmtignore 파일 생성:

# .oxfmtignore
node_modules/
dist/
build/
*.min.js
*.d.ts
coverage/

특정 범위 포맷팅

glob 패턴으로 정밀 제어:

# src 디렉토리의 컴포넌트 파일만 포맷팅
oxfmt "./src/components/**/*.{jsx,tsx}" --write

# 테스트 파일 제외
oxfmt "./src/**/*.ts" --ignore "./src/**/*.test.ts" --write

lint-staged와 함께 사용

package.json에서:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "oxfmt --write"
    ]
  }
}

husky와 함께 사용하여 pre-commit 자동 포맷팅 구현:

{
  "scripts": {
    "prepare": "husky install"
  }
}

자주 묻는 질문

Oxfmt와 Prettier의 출력이 다른가요?

구현 차이로 인해 일부 엣지 케이스의 출력이 완전히 일치하지 않을 수 있습니다. 설정을 조정하여 차이를 줄일 수 있습니다.

Prettier가 지원하지 않는 파일은 어떻게 하나요?

Prettier를 백업으로 유지:

{
  "scripts": {
    "format": "oxfmt \"./src/**/*.{js,ts,jsx,tsx,json}\" --write && prettier --write \"./src/**/*.{css,scss,html,md}\""
  }
}

Oxfmt는 어떤 언어를 지원하나요?

현재 지원:

  • JavaScript (.js, .mjs, .cjs)
  • TypeScript (.ts, .tsx, .mts, .cts)
  • JSX (.jsx)
  • JSON (.json)

요약

본문에서는 Oxfmt의 핵심 사용법을 소개했습니다:

내용명령
파일 포맷팅oxfmt ./src --write
포맷 검사oxfmt ./src --check
차이 확인oxfmt ./src --diff
설정 파일.oxfmtrc 또는 oxfmt.config.js

Oxfmt의 핵심 가치: 코드 포맷팅을 “대기”에서 “즉시 완료”로 변화.

다음 단계

Oxfmt의 더 많은 설정 옵션을 알고 싶으신가요? **OXC 한국어 문서 - Formatter 챕터**를 방문하세요.

다음 글에서는 OXC Parser를 깊이 탐구해 보겠습니다. 코드 파싱의 마법을 경험하고, AST가 어떻게 작동하는지 이해해 봅시다!

💡 관련 읽기: