eslint/prettier 못 쓰겠다. Biome로 갈아보자

eslint와 prettier의 개발 경험은 불쾌하다. 그 이유는

역할 중복

eslint와 prettier의 역할이 중복된다. 그래서 eslint-config-prettier와 eslint-plugin-prettier를 사용한다. 이 두 라이브러리는 eslint의 prettier의 설정으로 덮어 써준다.

하지만 eslint-plugin-prettier를 사용하지 말 것을 권장한다. eslint를 사용할 필요가 없다나? 그래서 eslint-plugin-prettier를 삭제하면 어떻게 되느냐? IDE와 prettier가 따로 논다. 특히 intelllJ 계열 IDE(Webstorm)에서 그렇다.

결론부터 말하자면 Webstorm은 prettier를 제대로 지원하지 못한다. Webstorm에는 파일 수정 후 저장시, 자동으로 eslint와 prettier를 돌려서 파일을 수정해주는 기능이 있다. 들여쓰기나 import sorting이 자동으로 되니 편리하고, 무엇보다 협업을 할 때 띄어쓰기 변경 등으로 인한 git log 혼돈을 예방할 수 있다. 하지만 이건 이론상으로만 그렇다. eslint와 prettier의 설정을 수정하다 보면 Webstorm은 prettier의 설정을 따를지, eslint의 설정을 따를지 혼돈스러워 한다. 무슨 짓을 해도 import sorting이 안 되는 꼬라지를 보고 있으면 화가 치밀어 오른다. visual studio code에서는 이런 일이 없는 것 같으나… intelliJ 계열 IDE는 버림받았다.

Biome

eslint/prettier 조합이 제대로 안 돌아가고, 불편해서 대안이 Biome이다. Biome는 eslint와 prettier가 하는 역할을 모두 한다. 그리고 Webstorm 연동 플러그인도 잘 돌아간다. 파일 저장시 formatter가 잘 동작하고, lint도 잘 표시해준다!

migration

eslint/prettier에서 Biome로 이관하는 방법은 간단하다.

npx @biomejs/biome migrate

그런데 대부분의 rule이 eslint/prettier와 호환되기 때문에 나는 위 기능을 사용하지 않고 수작업으로 이관해도 충분했다.

장점

• Webstorm을 잘 지원한다. lint와 formatter가 잘 동작한다!
• typescript와 jsx, tsx를 기본 지원한다. 말이 필요없다.
• React를 잘 지원한다.
• 설정이 간단하다. eslint + prettier + @type 을 설치할 필요가 없다.
• cli가 정상 동작한다.
• bun을 잘 지원한다. Node.js가 필요없다.

단점

• 불안정한 Webstorm 지원. v1.0 플러그인이 현재 nightly 버전이다. 하지만 잘 돌아간다.
• 부족한 레퍼런스. 검색해도 잘 안 나온다.
• 프로젝트가 언제 망할지 모른다.
• css와 html, vue, markdown은 향후 지원 예정이다.

거짓말(?)

• rust로 만들어서 속도가 대단히 빠르다… 고 홍보하는데 m1 pro macbook 환경에서 체감은 되지 않았다. eslint와 prettier도 제법 빠르다보니…

TMI

Biome는 통합 빌드 도구를 표방하다가 망해버린 Rome의 후계자다. 과연 안 망하고 버틸 수 있을 것인가.

20240220