안녕 ESLint, Prettier: Biome으로 도구 통합하기
들어가며
바로 이전 글인 협업을 위한 코드 규칙을 정하자 에서 eslint 와 prettier 를 이용해 협업에서 중요한 요소인 코드의 품질 관리와 일관성에 대해 다루었습니다. 이후 여러 자료를 살펴보던 중 Biome 라는 새로운 도구에 대해 알게 되었고, eslint 와 prettier 를 사용하는 프로젝트에서 Biome 로 변경하게된 이유와 변경 전후의 성능 차이에 대해 이번 포스팅에서 상세히 작성하려고 합니다.
Biome이란
Biome은 JavaScript, TypeScript, JSX, TSX, JSON 등의 언어를 지원하며, 총 293개의 규칙을 제공하는 툴체인입니다. 하지만 현재는 컴파일러의 기초 작업 단계에 있으며, 주로 Code Formatter 와 Linter 기능을 제공하고 있습니다.
툴체인은 소스 코드를 컴파일러, 링커, 라이브러리 등을 의미합니다.
최근 Biome의 사용자가 점차 늘어나고 있어 많은 개발자들에게 주목을 받는 프로젝트라고 할 수 있습니다. 참고로 Biome은 prettier에서 개최한 대회에서 우승을 차지한 프로젝트입니다
그렇다면 왜 Biome을 사용해야 하는 걸까요?
Biome의 장점
- 빠른 속도 :
Rust로 구현되어 있어 매우 빠른 속도를 자랑합니다. 공식 홈페이지에 따르면prettier보다 약35배빠른 속도라고 소개하고 있습니다.
- 간편한 설정 :
eslint,prettier보다 설정이 단순해 빠르게 적용할 수 있습니다. - 다양한 언어 지원 : 여러 언어를 한 번에 관리할 수 있어 편리합니다.
Biome Formatter 소개글 Biome Linter 소개글 Biome에서 지원하는 언어 목록
Rust로 구현된 프로그램이 Javascript 보다 빠른 이유는 병렬처리와 컴파일 타임의 차이에 있습니다. Rust로 구현된 프로그램은 사전에 컴파일이 완료되어 바이너리 코드로 즉시 작동하며, 싱글 스레드로 작동하는 Javascript와는 다르게 병렬적으로 작동합니다.
직접 사용해보자
위에서 Biome에 대해서 간략하게 알아보았습니다. 저는 현재 eslint 와 prettier 를 사용중인 프로젝트가 있으며, 이 프로젝트를 Biome을 사용하도록 마이그레이션 진행을 해보겠습니다.
Biome 설치
저는 yarn 을 사용하고 있어서 아래의 명령어를 통해 설치했습니다. 혹시 yarn 이 아닌 다른 패키지 매니저를 사용한다면 아래의 공식 문서 페이지를 참고해서 본인의 환경에 맞는 명령어를 사용하면 됩니다.
yarn add --dev --exact @biomejs/biome
모듈이 설치되었다면 설정 파일을 생성해야 합니다. 아래 명령어를 통해 생성합시다.
yarn biome init
명령어 실행이 완료되었다면 root 디렉토리에 biome.json 이 생성되었을 것입니다.
{
"$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"
}
}
}
다음으로는 Biome 플러그인을 설치합니다.
설치를 하지 않으면 biome 에러가 발생하지 않습니다.
설치후에는 biome 에서 에러가 발생합니다.
eslint, prettier 마이그레이션
기존 프로젝트에 있던 설정들을 biome.json 으로 옮겨봅시다.
아래 명령어를 통해 기존 eslint 설정을 biome.json 으로 가져올 수 있습니다. 하지만 저의 환경에서는 에러가 발생하고 마이그레이션이 작동하지 않았습니다.
아직 Biome 은 아직 레퍼런스가 많지 않아서 혹시라도 이 글을 보는 독자들이 에러를 해결하는데 도움이 되고자 해결 방법도 함께 작성했습니다.
해결 방법은 아래와 같습니다.
node_modules/eslint-config-next/index.js 에서 require('@rushstack/eslint-patch/modern-module-resolution') 를 주석처리 후 다시 마이그레이션 명령어를 실행하면 작동합니다.
명령어를 실행하면 아래 코드처럼 자동으로 biome.json 의 설정이 적용됩니다.
{
"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
"files": { "ignoreUnknown": false, "ignore": [] },
"formatter": {
"enabled": true,
"useEditorconfig": true,
"formatWithErrors": false,
"indentStyle": "space",
"indentWidth": 2,
"lineEnding": "lf",
"lineWidth": 100,
"attributePosition": "auto",
"bracketSpacing": true
},
"organizeImports": { "enabled": true },
"linter": {
"enabled": true,
"rules": {
"recommended": false,
"a11y": {
"noAriaUnsupportedElements": "warn",
"noBlankTarget": "error",
"useAltText": "warn",
"useAriaPropsForRole": "warn",
"useValidAriaProps": "warn",
"useValidAriaValues": "warn"
},
"complexity": {
"noExtraBooleanCast": "error",
"noMultipleSpacesInRegularExpressionLiterals": "error",
"noUselessCatch": "error",
"noUselessTypeConstraint": "error",
"noWith": "error"
},
"correctness": {
"noChildrenProp": "error",
"noConstAssign": "off",
"noConstantCondition": "error",
"noEmptyCharacterClassInRegex": "error",
"noEmptyPattern": "error",
"noGlobalObjectCalls": "off",
"noInvalidBuiltinInstantiation": "off",
"noInvalidConstructorSuper": "off",
"noNewSymbol": "off",
"noNonoctalDecimalEscape": "error",
"noPrecisionLoss": "error",
"noSelfAssign": "error"
// ...
},
"security": { "noDangerouslySetInnerHtmlWithChildren": "error" },
"style": {
"noArguments": "error",
"noNamespace": "error",
"noVar": "error",
"useAsConstAssertion": "error",
"useBlockStatements": "off",
"useConst": "error"
},
"suspicious": {
"noAsyncPromiseExecutor": "error",
"noCatchAssign": "error",
"noClassAssign": "off",
"noCommentText": "error",
"noCompareNegZero": "error",
"noControlCharactersInRegex": "error",
"noDebugger": "error",
"noDuplicateCase": "error",
"noDuplicateClassMembers": "off",
"noDuplicateJsxProps": "error",
"noDuplicateObjectKeys": "off",
"noDuplicateParameters": "off"
// ...
}
}
},
"javascript": {
"formatter": {
"jsxQuoteStyle": "double",
"quoteProperties": "asNeeded",
"trailingCommas": "all",
"semicolons": "always",
"arrowParentheses": "asNeeded",
"bracketSameLine": false,
"quoteStyle": "single",
"attributePosition": "auto",
"bracketSpacing": true
},
"globals": [
"OffscreenCanvas",
"onpointerleave",
"onemptied",
"onkeypress",
"onloadeddata",
"onmouseup"
// ...
]
}
}
성능 측정
Biome 설정과 마이그레이션이 완료 되었으니 가장 중요한 성능 측정을 했습니다.
eslint와 biome 성능 측정
기존 eslint를 사용할 때 작업 시간은 약 2.17초였으나, Biome을 사용하니 0.17초로 약 92.17% 작업 시간이 단축되었습니다.
prettier와 biome 성능 측정
기존 prettier 사용 시 작업 시간은 약 1.43초였으나, Biome을 사용하니 0.16초로 약 88.81% 작업 시간이 단축되었습니다.
그 외
주로 다룬 내용 외에도 Biome 을 사용하면서 알게된 꿀팁들을 공유하려고 합니다.
reporter
package.json 의 scripts 에 명령어를 추가합니다.
"scripts": {
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "biome lint --write",
"format": "biome format --write",
"reporter": "biome check --reporter=summary"
},
reporter 명령어를 사용한다면 Biome이 친절하게 결과를 리포트 형식으로 제공해줍니다.
제외 파일 설정
biome.json에서 제외할 파일들에 대해 설정할 수 있습니다. 이 포스팅에서는 빈 배열로 진행했지만, 실제 실행결과 node_modules 파일까지 분석하는 경우가 있기에 이를 명시해서 검사 파일에서 제외시켜줍시다.
// biome.json
"files": { "ignoreUnknown": false, "ignore": ["node_modules", ".next", ".github", "public"] },
마무리
현재 진행 중인 프로젝트를 시작한 지 1개월밖에 되지 않은 시점입니다. 1개월 전 eslint의 버전을 v9로 올리면서 여러 가지 어려움을 겪었는데, 그로부터 한 달 만에 Biome으로 마이그레이션을 하니 다소 아쉬운 느낌이 들기도 합니다.
현재 시점(2025/04/19) 다시 eslint + prettier 설정으로 돌아왔습니다. 돌아온 이유는 아직 biome에서
tailwind 자동 정렬기능이 지원되고 있지 않으며,import order또한 커스텀 설정이 불가능하기 때문입니다.
하지만 이번 경험을 통해 더 빠르고 효율적인 도구를 발견했다는 점에서 긍정적으로 생각합니다. 앞으로 Biome이 더욱 안정화되고 기능이 확장된다면, 협업 환경에서 코드 품질 관리와 개발 생산성 향상에 큰 도움이 될 것으로 기대합니다.