Biome - 차세대 Linter & Formatter

들어가기 전에

대부분 정적 코드 분석 도구로 ESLint를, 코드 포매터로 Prettier를 조합하여 많이 사용하실거라 생각되는데요. 이 두 도구의 조합이 워낙 유명하고 좋지만, 가끔 포매팅 속도가 좀 더 빠르면 좋겠다... 싶었을 때가 있었는데요. 그런데 최근에 Prettier보다 훨씬 빠른 도구인 Biome을 알게 되어서 이에 대해 정리해보고자 합니다.

Biome...? 🤔

Biome은 JavaScript, TypeScript, JSX, JSON 등과 같은 코드들을 위한 아주 빠른 포매터이자 린터입니다. 쉽게 말해서 Prettier와 ESLint를 합쳐놓은 도구라고 생각하면 될 것 같습니다.

하나의 도구로 포매터와 린터 기능을 합쳤어요

Biome의 큰 매력중 하나는 바로 이 점입니다. 보통 Prettier 따로, ESLint 따로 설정하고 실행해야 해서 번거로울때가 많았는데요. Biome은 하나의 명령어로 두 가지 작업을 한번에, 빠른 속도로 처리할 수 있습니다.

포매터로써 Biome

Biome은 Prettier랑 문법적으로 약 96%가 호환된다고 합니다.

린터로써 Biome

Biome은 JavaScript, TypeScript, JSX를 위한 성능이 뛰어난 린터로, ESLint 그리고 기타 써드파티 라이브러리에서 가져온 266개 이상의 유용한 규칙을 특징으로 가집니다. 또한 ESLint에서 자주 쓰던 eslint-plugin-jsx-a11y (접근성 관련 규칙) 같은 것들도 Biome에 많이 포함되어 있습니다.

Biome 설정 방법

Biome 설치방법은 매우 간단한데요. 간략하게 다섯 단계로 소개하겠습니다.
자세한 내용은 공식문서를 참고해주세요!

첫 번째, Biome 라이브러리 설치

사용중인 패키지 매니저로 biome 설치를 진행해주세요.

1yarn add --dev --exact @biomejs/biome

두 번째, Biome 익스텐션 설치

Biome을 효율적으로 사용하기 위해서는 Visual Studio Code 마켓스토어에서 제공하는 Biome 익스텐션을 설치해야 합니다.

성공적으로 설치되었다면 출력 탭에 이와같이 Biome is ready 라는 메세지가 출력됩니다.

익스텐션을 설치하면 이와 같이 실시간으로 린트 룰 파악이 가능해집니다.

Format On Save도 잘 작동이 되는거같습니다.

세 번째, settings.json 설정

Biome 익스텐션을 사용하기 위해서는 .vscode/settings.json파일을 생성해서 아래의 내용을 추가해야합니다.

1"[javascript][typescript][javascriptreact][typescriptreact]": {
2    "editor.codeActionsOnSave": {
3      "source.organizeImports.biome": "explicit",
4      "quickfix.biome": "explicit"
5    },
6    "editor.defaultFormatter": "biomejs.biome",
7    "editor.formatOnSave": true
8  }

editor.codeActionsOnSave 설정은 파일을 저장할 때 자동으로 실행할 코드 작업을 정의합니다.

source.organizeImports.biome 설정은 파일을 에디터에서 저장할 때 Biome에서 제공하는 import 순서를 정리하는 기능을 실행하도록 합니다.

editor.defaultFormatter 설정은 VSC에서 파일을 포매팅할 때 사용할 기본 포매터를 지정합니다.

네 번째, Biome 환경 설정

biome 의존성을 설치하면 루트 디렉토리 경로에 biome.json 파일이 생성되고, 필요한 설정을 추가하면 됩니다.

1{
2  "$schema": "https://biomejs.dev/schemas/1.8.3/schema.json", // 스키마 버전은 설치 시점에 따라 달라질 수 있습니다.
3  "organizeImports": {
4    "enabled": true // import 구문 자동 정렬 기능
5  },
6  "files": {
7    "ignoreUnknown": true,
8    "ignore": ["node_modules", "src/components/ui"]
9  },
10  "organizeImports": {
11     "enabled": true  
12  },
13  "linter": {
14    "enabled": true, // 린터를 사용할지 여부
15    "rules": {
16      "recommended": true // Biome이 추천하는 기본 규칙들을 사용할지
17      // "all": true, // 모든 규칙을 다 켜고 싶다면!
18      // "suspicious": { // 의심스러운 코드 관련 규칙들
19      //   "noDebugger": "warn" // debugger 구문이 있으면 경고! 
20      // }
21    }
22  },
23  "formatter": {
24    "enabled": true, // 포매터를 사용할지 여부!
25    "formatWithErrors": false, // 코드에 오류가 있어도 포매팅할지! (보통 false)
26    "indentStyle": "space", // 들여쓰기 스타일: "space" 또는 "tab"
27    "indentWidth": 2,       // 들여쓰기 칸 수 (보통 2칸)
28    "lineWidth": 80,        // 한 줄에 들어갈 최대 글자 수
29    "lineEnding": "lf"      // 줄바꿈 문자 스타일: "lf", "crlf", "cr"
30  },
31  "javascript": { // 자바스크립트/타입스크립트 관련 세부 설정
32    "formatter": {
33      "quoteStyle": "single", // 문자열 따옴표 스타일: "double" 또는 "single"
34      "trailingCommas": "all" // 객체나 배열 마지막 요소 뒤에 콤마를 붙일지: "all", "es5", "none"
35    }
36  }
37  // "overrides": [ // 특정 파일이나 폴더에만 다른 설정을 적용하고 싶을 때!
38  //   {
39  //     "include": ["src/legacy/**"],
40  //     "linter": {
41  //       "enabled": false
42  //     }
43  //   }
44  // ]
45}

ignoreUnknown 옵션은 Biome이 알지 못하는 파일 형식이나 규칙을 무시하도록 설정합니다.

• node_modules는 린팅이나 포매팅이 따로 필요 없으니 ignore에 추가하였습니다.
• src/components/ui의 경우, Shadcn/ui의 컴포넌트가 추가되는 경로인데, 저는 해당 경로도 ignore에 추가해줬습니다.

다섯 번째, Script 작성

Biome은 결국 자동화 도구로 사용되기 때문에 프로젝트 코드에 규칙을 한꺼번에 적용할 수 있도록 실행 명령어를 작성해야 하는데요. package.json의 scripts에 추가해주시면 됩니다.

1"scripts": {
2    "build": "next build",
3    "clean": "rimraf .next",
4    "codegen:fetch": "tsx scripts/fetch-openapi.ts",
5    "codegen:generate": "orval --config orval.config.ts",
6    "dev": "next dev --turbopack",   
7
8    ✅ 이 부분의 스크립트를 추가해주세요.
9    "lint": "biome check ./src",
10
11    "prepare": "simple-git-hooks",
12    "start": "next start"
13  },

그래서 Biome을 왜 써야 할까요?

첫 번째, 매우 빠른 속도

Biome은 Rust로 개발되어 기존 도구들보다 월등히 빠른 성능을 제공합니다. 단순히 로컬 환경에서 개발 시간 단축 뿐만 아니라, CI/CD 파이프라인 내 코드 검사 및 포매팅 시간을 현저히 줄여 전체적인 개발 생산성이 향상됩니다.

두 번째, 사용이 간편해요

Biome은 개발자가 쉽게 도입하고 사용할 수 있도록 설계되었습니다. 설치 과정이 간단하고, biome.json 단일 설정 파일을 통해 모든 관련 설정들을 관리할 수 있습니다. 기본적인 설정이 모두 되어 있어서 별도 추가 설정 없이도 즉시 프로젝트에서 사용 가능합니다.

세 번째, 확장성이 뛰어나요

프로젝트 규모에 관계없이 일관된 성능을 유지하도록 설계되었습니다. 소규모 프로젝트부터 대규모 엔터프라이즈급 어플리케이션의 복잡한 코드베이스에 이르기까지 안정적으로 동작하고, 코드 양이 증가하더라도 성능 저하가 없습니다.

네 번째, IDE와의 통합이 뛰어나요

Visual Studio Code 등과 같이 많이 사용되는 IDE와 호환성이 높습니다. Biome 익스텐션을 설치하면 실시간 린팅 피드백 등의 기능을 IDE 내에서 직접 확인할 수 있습니다.

다섯 번째, 명확한 오류 메세지를 제공해요

Biome은 문제 원인을 신속하게 파악하고 해결할 수 있도록 상세하고 이해하기 쉬운 오류 메세지를 터미널에 출력합니다.

여섯 번째, 접근성 검사 기능을 기본적으로 지원해요

Biome은 HTML, JSX, TSX 코드 내에서 발생할 수 있는 웹 접근성 관련 문제점들을 warning 하는 기능을 내장하고 있습니다. 예를 들어 이미지 태그에 alt 속성이 누락되었다거나, 부적절한 ARIA 속성이 사용되었을경우 이를 감지하여 터미널에 메세지를 출력해줍니다.

사용해본 소감은

장점 1. 속도가 빨라요

eslint	biome

Write (Format, Fix)

eslint	biome

장점 2. 설정이 간편해요

ESLint와 Prettier 조합을 TypeScript 환경에서 사용한다고 하면...

• ESLint를 설치하고
• typescript-eslint/eslint-plugin, eslint-plugin-tailwindcss 등과 같은 추가적인 의존성을 설치하고,
• 설정파일을 작성하고,
• Prettier를 설치하고,
• 설정 파일을 작성하고,
• ESLint와 Prettier를 동시에 사용하기위해 설정을 하고.....

와 같은 수많은 과정을 거쳐야 합니다.

하지만 Biome을 사용한다고 하면

• Biome을 설치하고,
• 익스텐션을 설치하고
• 설정 파일을 작성

하는 것으로 간단하게 설정을 마칠 수 있습니다.

단점 1. HTML, CSS, Vue 등 아직 지원하지 않는 언어가 존재해요

저는 주로 React를 사용하여 개발하므로 Biome을 사용해 볼 수 있었지만, 만약 Vue나 Svelt를 사용할 때는 Biome을 도입하기 어려울 수 있습니다.

단점 2. 레퍼런스가 부족해요

ESLint는 메이저버전이 9인 만큼 수많은 레퍼런스가 존재합니다. 하지만 biome의 공식문서가 잘 정리되어있고, 사용법도 매우 간편해서 사용에 큰 어려움은 없었습니다.

결론

Biome을 직접 사용해보니, ESLint와 Prettier를 조합하여 사용하던 것과 비교해서 빠른 성능과 매우 간편한 세팅이 특히 인상깊었습니다. 특히 Biome의 빠른 속도는 CI/CD 파이프라인 단계 중 CI(지속적 통합) 단계에서 특히 체감되었습니다. 이 두가지 장점만으로도 충분히 사용해볼만한 가치가 있는 웹 개발 도구라고 생각합니다.🤗