Biome.js 사용 후기 (prettier + eslint)

Biome.js는 Rust로 작성된 prettier와 eslint를 합친 기능을 가지는 FE lint, formatter 라이브러리이다.

https://biomejs.dev/

Biome

Biome이 가지는 가장 큰 장점은 빠르다는 점이다.

빠른 이유는 Rust로 작성되었기 때문인데, 최근 FE 개발 생태계에서 등장하고 있는 Rust로 작성된 라이브러리중에 하나라고 할 수 있다.

(이외에도  Rust로 작성된 라이브러리는 turbopack, swc, farm등이 있다)

 

아쉬운 점으로는 아직 eslint가 쌓아온 생태계를 따라오지 못하기 때문에 커스텀에 제약이 있을 수 있는 점이다.

👻 예를 들면, biome은 import 설정을 끄고 켜고만 가능한데, 세부적으로 어떻게 import문을 정렬할지는 커스텀할 수 없다.

 

 👍그래도 기존의 eslint와 prettier의 중복으로 인한 eslint-config-prettier, eslint-plugin-prettier 세팅이 필요없는 것은 꽤나 좋은 점이라고 생각한다.

 

🙌 Biome의 기본적인 세팅

 

일단 설치한다.

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

 

설치 후, cli 명령어로 biome.json을 생성한다.

npx @biomejs/biome init

 

그리고 이제 biome을 설정할 수 있는데, 방법은 두 가지가 있다.

1. 직접 공식문서를 보고 원하는 설정을 세팅한다.

2. 기존의 prettier, eslint 설정을 마이그레이션한다.

 

개인적으로는 2번의 기능이 biome의 큰 장점이 아닌가 싶다.

명령어만 입력하면 기존에 세팅해둔 prettier + eslint 환경을 biome에 이식할 수 있기 때문에 사용함에 있어서 부담이 적어진다.

 

이미 eslint, prettier 설정이 된 프로젝트에서 다음과 같은 명령어로 손쉽게 biome 세팅이 가능하다.

biome migrate eslint --write // eslint 설정 가져오기
biome migrate prettier --write // prettier 설정 가져오기

 

https://biomejs.dev/guides/migrate-eslint-prettier/

Migrate from ESLint and Prettier

 

 

물론, 모든 세팅이 1대1로 대응하지는 않기 때문에 불러오지 못하는 설정들이 있을 수 있다.

🥝 앞서 말했듯이 import문 등...

 

그래도 편하다 😊

 

이제 세팅이 끝났으면, 명령어를 사용해 biome을 사용할 수 있다.

npx @biomejs/biome format --write <files> // formatter 실행
npx @biomejs/biome lint --write <files> // lint 실행
npx @biomejs/biome check --write <files> // formatter, lint 모두 실행

--write 옵션으로 safe fixes할 수 있다. (자동 수정)

 

그리고 물론 biome 역시 vs code 확장도구를 지원한다.

https://marketplace.visualstudio.com/items?itemName=biomejs.biome

Biome - Visual Studio Marketplace

 

👻

Biome을 사용하면, 빠르다는 걸 체감할 수 있다.

다만, 이미 세세하게 설정을 많이 해둔 상태에서 마이그레이션을 한다면 지원하지 않는 설정들이 우수수 발견되서 불편할 듯 하다.

오히려 처음부터 biome으로 설정하면, 꽤 괜찮게 사용할 수 있을 것 같다.

하지만 아직 사용량이 그렇게 많지 않은 프로젝트이고 앞으로 더 지켜 봐야할 것 같다.