Oxc로 자바스크립트 린팅과 포맷팅을 압도적으로 빠르게

자바스크립트 프로젝트를 하나 세팅하려면 설치해야 할 도구가 한두 개가 아닙니다. 코드 린팅에는 ESLint, 포맷팅에는 Prettier, 트랜스파일링에는 Babel이나 SWC, 번들링에는 Webpack이나 Vite… 각각 다른 팀이 다른 언어로 만든 도구들을 조합해서 쓰다 보니 설정 파일만 여러 개, 플러그인 간 버전 충돌에 빌드 속도는 답답하고. 😩

이 파편화된 자바스크립트 도구 생태계를 하나로 통합하겠다는 프로젝트가 있는데요, 바로 Oxc입니다. 이번 포스팅에서는 Oxc가 무엇이고, 어떤 도구들로 구성되어 있으며, 실제 프로젝트에 어떻게 도입할 수 있는지 알아보겠습니다.

Oxc란?

Oxc(The JavaScript Oxidation Compiler)는 Rust로 작성된 고성능 자바스크립트/타입스크립트 툴체인입니다. 이름에서 “Oxidation”은 Rust의 상징인 산화(oxidation)에서 따온 것인데요, 자바스크립트 도구를 Rust로 다시 만들겠다는 의지가 담겨 있습니다.

Oxc는 VoidZero라는 회사에서 개발하고 있습니다. VoidZero는 Vite의 창시자인 Evan You가 설립한 자바스크립트 도구 전문 회사로, Vite뿐만 아니라 Vitest, Rolldown, 그리고 Oxc까지 자바스크립트 생태계의 핵심 인프라를 통합적으로 관리하고 있습니다. Shopify, OpenAI, Cloudflare, Linear 같은 유명 기업들이 VoidZero의 도구들을 사용하고 있을 정도로 이미 업계에서 신뢰를 받고 있죠.

기존에도 Rust로 작성된 자바스크립트 도구가 있긴 했습니다. 트랜스파일링에는 SWC, CSS 처리에는 Lightning CSS가 있었는데요. 이 도구들은 각각 하나의 역할에 특화되어 있었습니다. Oxc는 여기서 한 발 더 나아가 파서, 린터, 포맷터, 트랜스포머, 리졸버, 미니파이어까지 자바스크립트 개발에 필요한 거의 모든 도구를 하나의 프로젝트 안에서 제공합니다.

어떤 도구들이 있을까?

Oxc는 여러 개의 독립적인 도구로 구성되어 있는데, 각각 어떤 역할을 하는지 간략히 살펴보겠습니다.

우선 모든 것의 기반이 되는 파서(oxc-parser)가 있습니다. 자바스크립트와 타입스크립트 파일을 AST(추상 구문 트리)로 변환하는 역할인데, SWC보다 3배 빠릅니다. ECMAScript의 Test262 스테이지 4 테스트를 모두 통과하여 정확도도 검증되었고요.

그다음으로 개발자들이 가장 직접적으로 쓰게 되는 린터(Oxlint)와 포맷터(Oxfmt)가 있습니다. Oxlint는 ESLint보다 50~100배 빠르고, Oxfmt는 Prettier보다 30배 빠릅니다. 이 두 도구는 뒤에서 자세히 다루겠습니다.

트랜스포머(oxc-transform)는 타입스크립트를 자바스크립트로 변환하거나, JSX를 처리하거나, 최신 문법을 ES2015로 낮추는 역할을 합니다. React Fast Refresh나 styled-components 같은 플러그인도 지원합니다. Babel이나 SWC가 하던 일을 Oxc 하나로 대체할 수 있게 된 거죠.

리졸버(oxc-resolver)는 모듈 경로를 해석하는 도구입니다. import 문에서 ./components/Button이라고 쓰면 실제로 어떤 파일을 가리키는지 찾아주는 건데, Webpack에서 쓰이는 enhanced-resolve보다 28배 빠릅니다.

마지막으로 미니파이어(oxc-minify)는 프로덕션 빌드 시 코드를 압축합니다. 불필요한 코드 제거, 공백 압축, 변수명 축약 등을 수행하는데, 아직 알파 단계라 안정화가 진행 중입니다.

Oxlint로 린팅하기

Oxlint는 2025년 6월에 안정 버전(v1.0)이 출시되면서 실전에서 쓸 수 있는 수준이 되었습니다. 695개 이상의 규칙이 내장되어 있는데, ESLint의 핵심 규칙뿐 아니라 typescript-eslint, eslint-plugin-react, eslint-plugin-import, eslint-plugin-unicorn 등 인기 플러그인의 규칙까지 포함하고 있어서 별도의 플러그인 설치 없이도 꽤 많은 규칙을 바로 사용할 수 있습니다.

설치부터 해보겠습니다.

bun add -D oxlint

npm install -D oxlint

package.json에 스크립트를 추가하면 바로 사용할 수 있습니다.

{
  "scripts": {
    "lint": "oxlint",
    "lint:fix": "oxlint --fix"
  }
}

oxlint 명령어만 실행하면 프로젝트 전체를 스캔하여 문제를 찾아줍니다. --fix 옵션을 붙이면 자동으로 고칠 수 있는 문제는 알아서 수정해줍니다.

그럼 실제로 얼마나 빠를까요? 공식 벤치마크에 따르면 같은 코드베이스를 검사했을 때 ESLint이 약 33초 걸리는 작업을 Oxlint는 멀티스레드 기준 약 0.6초 만에 끝냅니다. Airbnb에서는 12만 6천 개 이상의 파일을 Oxlint로 7초 만에 린팅하고 있다고 하는데요, ESLint로는 타임아웃이 걸릴 정도였다고 합니다. 🤯

설정은 .oxlintrc.json 파일이나 oxlint.config.js 파일로 관리합니다. ESLint의 flat config와 비슷한 방식이라 익숙하게 느껴질 겁니다.

{
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off",
    "eqeqeq": "error"
  },
  "ignorePatterns": ["dist", "node_modules"]
}

Oxlint의 강점 중 하나는 타입 인식 린팅(type-aware linting)입니다. 타입스크립트의 Go 포트인 tsgo를 활용하여 네이티브 수준의 타입 정보를 기반으로 린팅을 수행할 수 있는데요. 예를 들어 Promise를 await 없이 사용하는 실수(floating promise)를 잡아내는 것 같은 고급 검사가 가능합니다.

또한 여러 파일에 걸친 분석(multi-file analysis)도 기본으로 지원합니다. 한 파일에서 내보낸 것을 다른 파일에서 제대로 가져다 쓰고 있는지, 순환 의존성이 있는지 같은 프로젝트 전체 수준의 검사를 할 수 있어서 대규모 프로젝트에서 특히 유용합니다.

에디터 지원도 잘 되어 있어서 VS Code, WebStorm, Zed에서 Language Server Protocol을 통해 실시간 린팅 피드백을 받을 수 있습니다.

Oxfmt로 포맷팅하기

Oxfmt는 2026년 2월에 베타가 출시된 코드 포맷터입니다. Prettier의 자바스크립트/타입스크립트 적합성 테스트를 100% 통과하기 때문에, 기존 Prettier 설정을 거의 그대로 유지하면서 전환할 수 있습니다.

설치 방법은 Oxlint와 동일합니다.

bun add -D oxfmt

npm install -D oxfmt

package.json에 스크립트를 추가합니다.

{
  "scripts": {
    "fmt": "oxfmt",
    "fmt:check": "oxfmt --check"
  }
}

oxfmt 명령어를 실행하면 프로젝트의 모든 파일을 포맷팅하고, --check 옵션을 사용하면 포맷이 맞는지만 확인합니다.

Prettier보다 30배, Biome보다 3배 빠른 성능인데요, 파일이 몇 개 없는 작은 프로젝트에서는 체감이 안 되겠지만 수천 개의 파일을 포맷팅해야 하는 대규모 코드베이스의 CI에서는 몇 분이 몇 초로 줄어드는 경험을 하게 됩니다.

Oxfmt가 특히 매력적인 건 Prettier에서는 별도의 플러그인이 필요했던 기능들이 내장되어 있다는 점입니다. import 정렬, Tailwind CSS 클래스 정렬, package.json 필드 정렬, CSS-in-JS 포맷팅까지 추가 플러그인 없이 바로 사용할 수 있습니다. prettier-plugin-tailwindcss 같은 플러그인을 따로 설치하고 설정하던 번거로움이 사라지는 거죠.

지원하는 파일 형식도 놀라울 정도로 넓습니다. 자바스크립트/타입스크립트는 당연하고 JSON, YAML, TOML, HTML, Vue, CSS, SCSS, Less, Markdown, MDX, GraphQL까지 다 됩니다. Prettier 하나로 모든 파일을 포맷팅하던 것처럼 Oxfmt 하나로 대체가 가능한 셈이죠.

실제로 Vue.js, Turborepo, Hugging Face, Sentry JavaScript SDK 같은 유명 프로젝트들이 이미 Oxfmt를 쓰고 있습니다.

기존 도구에서 마이그레이션

이미 ESLint나 Prettier를 쓰고 있는 프로젝트에서 Oxc로 전환하는 방법을 살펴보겠습니다.

ESLint에서 Oxlint로 넘어갈 때 한 번에 전면 교체하는 것보다는 점진적인 접근을 권장합니다. eslint-plugin-oxlint라는 플러그인을 사용하면 Oxlint와 ESLint를 동시에 실행하되, 겹치는 규칙은 ESLint 쪽에서 자동으로 꺼집니다.

bun add -D eslint-plugin-oxlint

그리고 ESLint 설정 파일에서 플러그인을 추가합니다.

import oxlint from "eslint-plugin-oxlint";

export default [
  // 기존 ESLint 설정...
  oxlint.configs["flat/recommended"],
];

이렇게 하면 린팅 실행 시 Oxlint를 먼저 돌리고 나머지를 ESLint가 처리하는 방식으로 운영할 수 있습니다.

{
  "scripts": {
    "lint": "oxlint && eslint"
  }
}

Oxlint가 처리할 수 있는 규칙이 점점 늘어나고 있어서, 시간이 지나면 ESLint를 완전히 걷어낼 수 있을 겁니다.

기존 ESLint flat config 파일을 Oxlint 설정으로 변환하고 싶다면 oxlint-migrate 도구를 사용할 수 있습니다.

bunx oxlint-migrate eslint.config.js

Prettier에서 Oxfmt로의 전환은 더 간단합니다. Oxfmt가 Prettier의 자바스크립트/타입스크립트 적합성 테스트를 100% 통과하기 때문에 대부분의 경우 패키지만 교체하면 됩니다. 기존 .prettierrc 설정도 대부분 호환되므로 포맷팅 결과가 달라질 걱정을 크게 하지 않아도 됩니다.

Vite 8과의 통합

Oxc는 단독으로 사용할 수도 있지만, Vite 8의 내부 엔진으로도 이미 채택되어 있습니다.

2026년 3월에 출시된 Vite 8은 자바스크립트/타입스크립트 변환과 코드 압축을 Oxc가 담당하고, 번들링은 역시 Rust로 작성된 Rolldown이 처리합니다. CSS 처리에는 Lightning CSS가 기본으로 사용되고요. 이렇게 빌드 파이프라인 전체가 Rust 기반 도구로 통일되면서 Rollup 대비 10~30배 빠른 빌드 속도를 달성했습니다.

Vite를 사용하고 있다면 이미 Oxc의 혜택을 받고 있는 셈입니다. 별도 설정 없이 Vite 8로 업그레이드하는 것만으로 Oxc의 빠른 파싱과 변환 성능을 누릴 수 있죠.

여기에 Oxlint와 Oxfmt까지 도입하면 린팅, 포맷팅, 트랜스파일링, 번들링, 압축까지 자바스크립트 빌드 파이프라인의 거의 모든 단계가 Rust 기반 도구로 구성됩니다. 예전에는 상상하기 힘들었던 일이 현실이 되고 있는 겁니다.

마치며

자바스크립트 도구 생태계가 빠르게 Rust 기반으로 재편되고 있습니다. SWC가 Babel을 대체하고, Lightning CSS가 PostCSS를 대체하기 시작한 것처럼, Oxc는 ESLint와 Prettier까지 아우르는 통합 툴체인으로 자리잡아 가고 있습니다.

특히 Oxlint는 이미 안정 버전이 나와서 실전 투입에 무리가 없고, Oxfmt도 베타 단계이지만 Prettier와의 호환성이 검증되어 있어서 도입 장벽이 낮습니다. 대규모 프로젝트에서 린팅과 포맷팅에 시간이 오래 걸려 답답했다면 Oxc를 한번 시도해보시는 걸 추천드립니다.

더 자세한 내용은 Oxc 공식 문서를 참고하세요.