Oxfmt와 Oxlint를 직접 연결하기

자료 확인일: 2026-09-06. 예제는 별도 format-lab 프로젝트에서 순서대로 적용합니다. 명령은 macOS·Linux·WSL의 프로젝트 루트 기준이며, 기존 설정에는 필요한 키를 병합합니다.

먼저 도구를 직접 설치합니다

EditorConfig 실습의 format-lab에서 Node.js와 npm을 준비합니다. Oxc 버전은 이 글의 예제 기준이며 최신 버전이라는 뜻은 아닙니다. 설치로 생성된 package-lock.json을 커밋하고 이후에는 npm ci로 재현합니다. Bun 프로젝트라면 해당 프로젝트의 Bun 명령과 lockfile을 유지합니다.

npm init -y
npm install --save-dev --save-exact oxfmt@0.66.0 oxlint@1.81.0 typescript
code --install-extension oxc.oxc-vscode

루트 .oxfmtrc.json은 다음과 같습니다. 폭과 들여쓰기는 EditorConfig 실습의 EditorConfig에 맡기고 import 정렬 정책만 추가합니다.

{
    "$schema": "./node_modules/oxfmt/configuration_schema.json",
    "sortImports": { "newlinesBetween": false },
    "sortPackageJson": false,
    "ignorePatterns": ["node_modules/", "dist/", "coverage/", ".venv/"]
}

루트 .oxlintrc.json은 코드 진단을 맡습니다. React 프로젝트라면 실제 사용하는 react, jsx-a11y 플러그인과 필요한 규칙을 검토해 추가합니다. 인프라 스크립트까지 UI 컴포넌트 전용 예외를 공유할 필요는 없습니다.

{
    "$schema": "./node_modules/oxlint/configuration_schema.json",
    "categories": { "correctness": "error" },
    "plugins": ["typescript", "unicorn", "oxc"],
    "rules": {
        "eslint/prefer-const": "error",
        "typescript/no-explicit-any": "error"
    },
    "ignorePatterns": ["node_modules/", "dist/", "coverage/"]
}

JSON 설정은 설정 자체를 실행할 런타임 구성을 줄이고 스키마로 자동 완성을 제공합니다. TypeScript 설정도 지원하므로 실제 계산이나 조합이 필요할 때 선택할 수 있습니다. Oxlint 설정

포맷과 lint의 차이를 코드로 확인합니다

src/greet.ts에 다음 코드를 입력합니다.

export function greet(name:any){let message='Hello, '+name;return message}

Oxfmt는 줄·공백·따옴표를 정리하지만 any의 의미를 결정하지 않습니다. Oxlint는 prefer-const와 no-explicit-any를 진단합니다. 자동 수정으로 가능한 부분을 고친 뒤 인수의 계약을 사람이 string으로 정하면 다음과 같습니다.

export function greet(name: string) {
  const message = "Hello, " + name;
  return message;
}

any를 무조건 unknown으로 치환하면 문자열 덧셈의 계약까지 해결되는 것은 아닙니다. 입력이 외부 데이터라면 별도로 검증하고 좁혀야 합니다.

package scripts와 VS Code를 같은 설정에 연결합니다

package.json의 scripts에 병합합니다.

{
    "scripts": {
        "fmt": "oxfmt .",
        "fmt:check": "oxfmt --check .",
        "lint": "oxlint .",
        "lint:fix": "oxlint --fix .",
        "typecheck": "tsc --noEmit"
    }
}

타입 검사에 사용할 루트 tsconfig.json도 만듭니다.

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "strict": true,
        "noEmit": true
    },
    "include": ["src/**/*.ts"]
}

.vscode/settings.json에 아래 블록을 병합합니다. EditorConfig 실습의 formatOnSave는 유지합니다. TSX·JSX를 쓰면 typescriptreact, javascriptreact에도 같은 정책을 추가합니다.

{
    "[typescript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.oxc": "explicit",
            "source.organizeImports": "never",
            "source.fixAll.eslint": "never"
        }
    },
    "[javascript]": {
        "editor.defaultFormatter": "oxc.oxc-vscode",
        "editor.codeActionsOnSave": {
            "source.fixAll.oxc": "explicit",
            "source.organizeImports": "never",
            "source.fixAll.eslint": "never"
        }
    }
}

import 정렬은 Oxfmt가 맡습니다. TypeScript의 Organize Imports는 사용하지 않는 import 삭제까지 할 수 있어 동작이 완전히 같지 않습니다. 기존의 범용 source.fixAll이나 다른 저장 확장도 점검합니다. explicit은 먼저 수동 저장으로 검증하기 위한 선택입니다. Oxc 확장 설정

CLI는 수정과 검사를 구분합니다

npm run fmt
npm run lint
npm run lint:fix
npm run fmt
npm run fmt:check
npm run lint
npm run typecheck

처음 lint는 의도적으로 실패합니다. lint:fix 뒤에도 any 진단이 남으면 위의 string 수정 후 계속합니다. 마지막 세 명령은 파일을 고치지 않고 결과를 판정합니다. 저장 뒤 이 명령이 통과하고 재저장이 diff를 만들지 않는지 확인합니다.

타입 기반 lint가 필요하면 npm install --save-dev --save-exact oxlint-tsgolint로 추가하고 .oxlintrc.json에 "options": { "typeAware": true }를 병합합니다. 예를 들어 typescript/no-floating-promises를 켜서 처리하지 않은 Promise를 검사할 수 있습니다. 정상적인 tsconfig와 의존성이 필요하며 tsc --noEmit의 대체로 간주하지 않습니다. 타입 기반 lint

에디터만 실패하면 Output의 Oxc (Lint)·**Oxc (Fmt)**에서 실행 파일을 확인합니다. 이 예제는 루트 자동 탐색을 사용합니다. --config를 고정하면 중첩 설정 탐색 동작이 달라지므로 CLI에만 이를 추가하지 않습니다. 설정을 고정해야 한다면 확장의 lint·fmt 설정 경로도 각각 맞춥니다.

이전 실습 · 다음 실습