biome 사용해보기

평소 eslint, prettier, lint-staged를 통해 커밋한 코드에 대해 정적 분석하고 포맷팅을 해왔다.

biome은 eslint, prettier의 기능을 통합해서 제공해준다고 하고 훨씬 빠르다고 한다.(공식 문서 상으로 fast formatter, performant linter라고 표현되어 있다)

또한 prettier와 97% 가량 호환이 된다고 한다.

그래서 한번 어떻게 적용하는지 간단히 알아보고자 한다.

1. 설치

현재 pnpm을 사용하고 있기 때문에 해당 패키지 매니저 기반으로 설치하자.

pnpm add --save-dev --save-exact @biomejs/biome

그리고 biome 설정 파일인 biome.json를 생성하기 위해 초기화 명령어를 입력해주자.

pnpm biome init

그러면 아래와 같은 설정 파일이 생성된다.

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": { "ignoreUnknown": false, "ignore": [] },
  "formatter": { "enabled": true, "indentStyle": "tab" },
  "organizeImports": { "enabled": true },
  "linter": {
    "enabled": true,
    "rules": { "recommended": true }
  },
  "javascript": { "formatter": { "quoteStyle": "double" } }
}

• linter.enabled: true를 통해 linter 설정을 활성화한다.
• linter.rules.recommended: true를 통해 추천 linter 설정을 적용한다.(참고)

---

2. 사용

최초 사용

포맷팅을 하고 싶다면 다음과 같이 하면 된다.

pnpm biome format --write <files>

린트를 하고 싶으면 다음과 같이 하자.

pnpm biome lint --write <files>

기본적으로 위 명령어는 Safe fixes로 코드의 의미나 동작을 변경하지 않는다.

만약 코드의 의미나 동작을 변경하는 Unsafe fixes를 하고 싶다면 다음과 같이 하면된다.

safe fixes랑 unsafe fixes를 동시에 진행하는 것이다.

pnpm biome lint --write --unsafe <files>

safe fixes랑 unsafe fixes도 커스텀하게 설정할 수 있다. (참고)

마지막으로 포맷팅과 린트를 한번에 하려면 다음 커맨드를 입력하면 된다.

pnpm biome check --write <files>

prettier, eslint에서 마이그레이션

마이그레이션이 정말 간단하다.

prettier와 eslint는 해당 명령어를 입력하면 알아서 마이그레이션을 해준다.

pnpm biome migrate prettier --write
pnpm biome migrate eslint --write

eslint를 마이그레이션할 때 inspired rules는 마이그레이션이 되지 않는다고 한다.

따라서 eslint-config-airbnb 또는 eslint-config-google와 같은 inspired rules를 마이그레이션하기 위해 --include-inspired 옵션을 추가해 마이그레이션 명령어를 실행해야 한다.

pnpm biome migrate eslint --write --include-inspired

biome에서 제공해주는 rules 및 추천 rules은 여기서 확인할 수 있다.