eslint 와 prettier 대신 사용하는 Biome?? (intelliJ 세팅 포함)

새로운 토이 프로젝트를 시작하면서 eslint 와 prettier 를 설정해야했는데

면접에서 Biome 라는 Rust 기반의 포맷팅 툴을 알게되어..?

eslint 와 prettier 대신 세팅을 해보았다.

 

Biome 소개하는 아티클 링크

---

Biome 란?

Rust 기반의 엄청 빠른 포맷팅 및 린팅 툴

 

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

npx @biomejs/biome init // biome.json 파일 추가

---

 

Biome 의 장점

올인원 포맷팅 린팅 툴

 

마치 올인원 스킨케어 마냥.. 한 번에 다 처리해주는게 장점이라고 할 수 있다.

 

기존에는 린팅과 포멧팅을 하기 위해서 eslint, prettier 그리고 기타 등등 관련 플러그인들을 설치해주었다.

그런데 biome 을 사용하게 되면 biome 하나만 설치하면 끝이다.

 

빠르다

 

 

Rust 기반이며 rust-analyzer에서 영감을 받아 개발된 혁신적인 아키텍처로 만들어져 빠르고 성능이 좋다고 한다.

 

간단하다

 

확실히 prettier + eslint 에 비해 간단한 config 로 포맷팅 및 린팅을 할 수 있다.

그러나, Eslint 로 설정하던 복잡한 룰을 따라오진 못한다.

 

예를 들어, jsx 에 {''}를 막는 "react/jsx-curly-brace-presence" 라는 룰과 import order 를 상세히 custom 하는 기능은 없다.

 

IDE  호환성이 좋음, Vscode, intellij 지원

 

link 참고

 

---

IntelliJ X Biome 세팅하기

1. 일단 공식문서에서 하라는대로 한다.

 

공식 플러그인 링크

Biome - IntelliJ IDEs Plugin | Marketplace

 

intellij Biome 공식 플러그인

 

 

마켓에서 플러그인을 다운 받고난 후 사진 처럼 세팅까지 다 해주고 reformat 하면

아래 사진처럼 에러가 난다.

 

 

자꾸 rome.json 파일을 찾는다..

biome.json 이 없을 때 rome.json 을 찾는다고 하는데,,

영문도 모르겠고 생각보다 이용자가 적은지.. 잘 안 나오기도하고

 

어차피 나는 저장하면 자동으로 포멧팅을 하고 싶기 때문에 넘어가준다.

 

 

2. File Watchers 이용

마켓에서 File Watchers Install

 

 

package.json 에 script 추가
Settings > Tools > File Watchers 설정

 

// package.json

"biome:fix": "biome format --write ./ && biome check --apply ./"

 

이렇게 하면 저장 후에 좀 있다가 formatting 과 eslint 가 된다.

 

---

후기

확실히 세팅이 편했고, 파일이 몇개 없긴 하지만 뭔가 빠른 느낌이다.

룰을 빡세게 적용하던 사람 성에는 안 찰 것 같다.

 

intellij 에서 biome가 action on save 를 따로 지원하지 않는다는게 참 슬프다ㅠ