ESLint + Prettier 조합을 단일 도구로 대체하는 Biome 1.9 실전 가이드. 설치, biome.json 설정, ESLint/Prettier 마이그레이션, VS Code 통합, GitHub Actions CI 구성까지 정리.
biome check 명령 하나로 두 작업을 동시에 수행한다.
Biome 설치# npm npm install --save-dev --save-exact @biomejs/biome # pnpm pnpm add --save-dev --save-exact @biomejs/biome # yarn yarn add --dev --exact @biomejs/biome # 설정 파일 초기화 npx @biomejs/biome init
biome init을 실행하면 프로젝트 루트에 biome.json이 생성된다. 아래가 기본 설정 파일 구조다.biome.json 기본 구조{ "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json", "organizeImports": { "enabled": true }, "linter": { "enabled": true, "rules": { "recommended": true } }, "formatter": { "enabled": true, "indentStyle": "space", "indentWidth": 2, "lineWidth": 100 }, "javascript": { "formatter": { "quoteStyle": "double", "trailingCommas": "all", "semicolons": "always" } } }
Biome 주요 CLI 명령어# 린트 + 포맷 검사 (변경 없이) npx biome check ./src # 린트 + 포맷 자동 수정 npx biome check --apply ./src # 포맷만 (prettier 대체) npx biome format --write ./src # 린트만 (eslint 대체) npx biome lint ./src # 특정 파일 npx biome check src/components/Button.tsx # CI 환경 (오류 코드 반환) npx biome ci ./src
biome check --apply는 자동 수정 가능한 린트 오류와 포매팅을 동시에 처리한다. biome ci는 수정 없이 검사만 하고 문제가 있으면 non-zero exit code를 반환해 CI 파이프라인에 적합하다.package.json scripts{ "scripts": { "lint": "biome lint ./src", "format": "biome format --write ./src", "check": "biome check --apply ./src", "ci": "biome ci ./src" } }
ESLint 설정 마이그레이션# ESLint 설정을 biome.json으로 자동 변환 npx @biomejs/biome migrate eslint --write # Prettier 설정을 biome.json으로 자동 변환 npx @biomejs/biome migrate prettier --write
eslint-plugin-import 일부)은 아직 미지원이다. 공식 규칙 목록에서 확인할 것.
VS Code 설정 (.vscode/settings.json){ "editor.defaultFormatter": "biomejs.biome", "editor.formatOnSave": true, "editor.codeActionsOnSave": { "quickfix.biome": "explicit" }, // TypeScript/JavaScript 파일에 Biome 적용 "[typescript]": { "editor.defaultFormatter": "biomejs.biome" }, "[typescriptreact]": { "editor.defaultFormatter": "biomejs.biome" }, "[javascript]": { "editor.defaultFormatter": "biomejs.biome" } }
GitHub Actions CI (.github/workflows/biome.yml)name: Biome on: push: branches: [main] pull_request: branches: [main] jobs: biome: runs-on: ubuntu-latest steps: - name: Checkout uses: actions/checkout@v4 - name: Setup Biome uses: biomejs/setup-biome@v2 with: version: latest - name: Run Biome run: biome ci .
biomejs/setup-biome 공식 GitHub Action을 사용하면 Node.js나 pnpm 없이 Biome 바이너리만 설치해 CI를 빠르게 구성할 수 있다. 전체 워크플로우가 보통 10~15초 안에 완료된다.overrides를 사용한다.biome.json — 고급 설정 예시{ "$schema": "https://biomejs.dev/schemas/1.9.0/schema.json", "files": { "ignore": [ "node_modules", "dist", ".next", "coverage", "*.generated.ts" ] }, "linter": { "enabled": true, "rules": { "recommended": true, "complexity": { "noExcessiveCognitiveComplexity": "warn" }, "correctness": { "noUnusedImports": "error" } } }, "overrides": [ { // 테스트 파일은 일부 규칙 완화 "include": ["**/*.test.ts", "**/*.spec.ts"], "linter": { "rules": { "suspicious": { "noExplicitAny": "off" } } } }, { // 스크립트 디렉토리는 CommonJS 허용 "include": ["scripts/**/*.js"], "linter": { "rules": { "style": { "useImportType": "off" } } } } ] }
eslint-plugin-security, eslint-plugin-import 심화 규칙이 필요한 보안 중심 프로젝트eslint-plugin-react-hooks의 hooks 의존성 검사가 반드시 필요한 경우 (Biome에서 부분 지원)