🔧 Biome: 웹 개발 생산성과 코드 품질을 높이는 차세대 JavaScript 툴체인

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2
  }
}

"formatter": {
  "enabled": true,
  "indentStyle": "space",
  "indentWidth": 2,
  "lineWidth": 100,
  "quoteStyle": "double",
  "trailingComma": "all",
  "bracketSpacing": true,
  "bracketSameLine": false
}

심각도 레벨:
– error: 오류로 처리
– warn: 경고로 처리
– off: 규칙 비활성화

"linter": {
  "enabled": true,
  "rules": {
    "recommended": true,
    "correctness": {
      "noUnusedVariables": "error"
    },
    "suspicious": {
      "noConsoleLog": "warn",
      "noExplicitAny": "error"
    },
    "style": {
      "useConst": "error"
    }
  }
}

VCS 설정:
– .gitignore 파일과 통합

"files": {
  "ignore": [
    "node_modules",
    "dist",
    "build"
  ],
  "include": [
    "src/**/*.{js,ts,jsx,tsx}"
  ]
},
"vcs": {
  "enabled": true,
  "clientKind": "git",
  "useIgnoreFile": true
}

// biome-ignore: noConsoleLog
console.log("무시됨");

// biome-ignore-next-line: noUnusedVariables
const unused = "이 변수는 무시됨";

// biome-ignore: noConsoleLog, noExplicitAny
const something: any = console.log("여러 규칙 무시");

주요 기능:
– 실시간 오류 표시
– 저장 시 자동 포맷팅
– 빠른 수정 제안

# GitHub Actions 예시
name: Biome Check

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  biome:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - name: Install dependencies
        run: npm ci
      - name: Run Biome check
        run: npx @biomejs/biome ci ./src

# package.json 설정
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,ts,jsx,tsx,json,css}": [
      "@biomejs/biome check --apply"
    ]
  }
}

파일 그룹화:
– 프로젝트 구조에 따라 파일을 그룹화하여 다른 규칙 적용
– 테스트 파일, 구성 파일, 소스 코드 등에 맞춤 규칙 설정

팀 합의:
– 중요한 규칙에 대한 팀 합의 도출
– 코드 스타일 가이드라인 문서화

린팅 규칙 충돌:
– 규칙 간 충돌이 발생한다면 우선순위가 높은 규칙만 남기고 나머지 비활성화
– 특정 파일에 대해 인라인 주석으로 예외 처리

IDE 통합 문제:
– IDE 플러그인이 제대로 작동하지 않는 경우 최신 버전으로 업데이트
– 언어 서버 재시작 또는 편집기 재시작

디버그 모드:
– DEBUG=1 npx @biomejs/biome check ./src 명령으로 상세 로그 확인

변경 로그 확인:
– 업데이트 전 변경 로그를 확인하여 주요 변경 사항 파악
– 중요한 변경 사항이 있는 경우 테스트 환경에서 먼저 검증

버전 고정:
– --save-exact 플래그를 사용하여 정확한 버전 고정
– 예기치 않은 변경으로 인한 문제 방지

2. 초기 구성:
npx @biomejs/biome init

3. 스크립트 추가:
package.json에 편의 스크립트 추가

"scripts": {
  "format": "biome format --write .",
  "lint": "biome lint .",
  "check": "biome check --apply ."
}

4. 에디터 통합:
VS Code 또는 다른 에디터용 Biome 확장 설치

5. CI 설정:
CI/CD 파이프라인에 Biome 검사 추가

2. 현재 설정 분석:
기존 ESLint 및 Prettier 규칙 검토

3. 중요 규칙 식별:
프로젝트에 중요한 린팅 규칙 식별

4. biome.json 생성:
기존 규칙을 참고하여 Biome 구성 파일 작성

5. 점진적 적용:
– 먼저 포맷팅만 적용 (린팅 규칙은 비활성화)
– 점진적으로 린팅 규칙 활성화
– 충돌 해결 및 조정

6. 도구 전환:
– 개발 스크립트 업데이트
– CI/CD 파이프라인 업데이트
– 에디터 설정 업데이트

1. Biome 설치: npm install --save-dev --save-exact @biomejs/biome
2. 기본 구성 생성: npx @biomejs/biome init
3. VS Code 확장 설치: 코드 에디터와 통합
4. 공식 문서 탐색: https://biomejs.dev/
5. 온라인 플레이그라운드 시도: 설치 없이 체험