Biome

Biome은 JavaScript, TypeScript, JSX, TSX, JSON, CSS, GraphQL 등 다양한 웹 개발 언어를 위한 빠른 포매터이자 린터이다.
Rust로 작성되어 높은 성능을 자랑하며, Prettier와 97% 호환성을 제공한다.

주요 기능

  1. 코드 포매팅(Formatting)

    • 일관된 코드 스타일을 자동으로 적용한다.
    • 들여쓰기, 줄 바꿈, 공백 처리 등을 자동으로 조정한다.
    • Prettier와 유사한 결과물을 생성하지만 훨씬 빠른 속도를 보여준다.

  2. 린팅(Linting)

    • 코드의 잠재적 문제를 미리 발견한다.
    • 보안 취약점, 성능 이슈, 코드 스타일 위반 등을 검사한다.
    • ESLint의 대부분의 규칙을 지원하면서도 더 빠른 처리 속도를 제공한다.

  3. 구문 분석(Parser)

    • JavaScript와 TypeScript 코드를 정확하게 파싱한다.
    • AST(Abstract Syntax Tree)를 생성하여 코드 분석에 활용한다.
    • 최신 ECMAScript 기능들을 모두 지원한다.

  4. 설정의 단순화

    • 단일 설정 파일(biome.json)로 모든 기능을 제어할 수 있다.
    • 복잡한 플러그인 설정이 필요 없다.
    • 대부분의 경우 기본 설정만으로도 충분한 기능을 제공한다.

  5. 개발 생산성 향상

    • 빠른 처리 속도로 개발 워크플로우를 개선한다.
    • VS Code, WebStorm 등 주요 IDE들과 통합된다.
    • Git 훅을 통한 자동화가 가능하다.

주의할 점

  1. 아직 개발 중인 프로젝트이므로 일부 기능이 완성되지 않았을 수 있다.
  2. ESLint의 모든 규칙을 지원하지는 않으므로, 특정 규칙이 필요한 경우 확인이 필요.
  3. 커스텀 규칙 생성 기능은 아직 제한적.

사용 방법

  1. 설치: npm을 통해 쉽게 설치할 수 있다.

    1

    npm install --save-dev --save-exact @biomejs/biome

  2. 설정: npx @biomejs/biome init 명령어로 기본 설정 파일(biome.json)을 생성할 수 있다.

  3. 실행:

    • 린팅: biome check <Location>
    • 포맷팅: biome check --write <Location>

  4. VS Code 확장 프로그램: Biome VS Code 확장을 설치하여 에디터에서 직접 사용할 수 있다.

CI/CD 파이프라인 통합

1
2

- name: Check formatting
  run: npx biome check --files-ignore-unknown=true .

설정 예시

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

// biome.json 설정 파일 예시
{
  "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "error"
      }
    }
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentSize": 2,
    "lineWidth": 80,
    "ignore": [
      "node_modules/**",
      "dist/**"
    ]
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingComma": "all",
      "semicolons": "always"
    }
  }
}

// package.json 스크립트 예시
{
  "scripts": {
    "format": "biome format --write .",
    "lint": "biome lint .",
    "check": "biome check --apply ."
  }
}

참고 및 출처

Biome, toolchain of the web