VSCode 확장

Biome VS Code 확장

Biome는 별도의 도구 기능을 통합하여 개발 스택을 일관되게 만듭니다. 하나의 설정 파일만 사용하고 뛰어난 성능을 제공하며, 어떤 스택과도 호환됩니다. 이 확장은 당신의 편집기로 Biome를 가져와 다음 작업을 가능하게 합니다:

저장 시 또는 문서 형식 지정 명령을 실행할 때 파일 형식 지정
작성 중에 린트 확인 및 코드 수정 적용
리팩터링 수행

설치

다음 중 하나를 통해 코드 확장을 설치할 수 있습니다:

Visual Studio Code Market Place 페이지로 이동
또는 VS Code에서:
- 확장 탭(보기 → 확장)을 열고 Biome를 검색합니다.
- 빠른 열기 오버레이 (Ctrl/⌘+P 또는 이동 -> 파일로 이동)를 열고 ext install biomejs.biome를 입력한 후 엔터를 누릅니다.

시작하기

기본 포맷터 설정

작업 공간의 루트 디렉터리에서 biome.json 파일을 찾으면 자동으로 로드됩니다.
지원되는 파일 유형에 대해 Biome를 기본 포맷터로 설정하면, 다른 포맷터가 설치되어 있어도 VS Code가 항상 Biome를 사용하도록 보장할 수 있습니다. 다음 절차를 따르세요:

자바스크립트 또는 타입스크립트 파일을 열기
명령 팔레트 열기 (Ctrl/⌘+⇧+P 또는 보기 → 명령 팔레트)
문서 형식 지정… 선택
기본 포맷터 구성… 선택
Biome 선택

또한 특정 언어에만 Biome를 활성화할 수도 있습니다:

.vscode/settings.json 열기: 명령 팔레트 (Ctrl/⌘+⇧+P)를 열고 사용자 설정(파일) 열기(JSON) 선택
원하는 언어에 대해 editor.defaultFormatter를 biomejs.biome로 설정

1
{
2
  "editor.defaultFormatter": "<기타 포맷터>",
3
  "[javascript]": {
4
    "editor.defaultFormatter": "biomejs.biome"
5
  }
6
}

이 설정은 자바스크립트 파일에 대해 Biome를 기본 포맷터로 지정합니다. 기타 모든 파일은 <기타 포맷터>로 형식 지정됩니다.

설정 해석

확장은 작업 공간 루트 디렉터리에서 biome.json 파일을 자동으로 로드합니다.

Biome 해석

확장은 프로젝트의 로컬 종속성(node_modules/@biomejs/biome)에서 Biome를 사용하려고 시도합니다. 프로젝트에 Biome를 종속성으로 추가하여, NPM 스크립트와 확장이 동일한 버전의 Biome를 사용하도록 권장합니다.

또한 확장이 사용할 Biome 바이너리 경로를 명시적으로 지정할 수 있습니다. 이를 위해 편집기 옵션에서 biome.lspBin 매개변수를 구성하세요.

프로젝트에 Biome 종속성이 없으며 명시적 경로가 설정되지 않은 경우, 확장은 자체 패키지에 포함된 Biome 버전을 사용합니다.

사용 방법

문서 형식 지정

전체 문서를 형식 지정하려면, 명령 팔레트 (Ctrl/⌘+⇧+P)를 열고 _문서 형식 지정_을 선택하세요.

텍스트 범위를 형식 지정하려면, 형식 지정할 텍스트를 선택하고, 명령 팔레트 (Ctrl/⌘+⇧+P)를 열어 _선택 영역 형식 지정_을 선택하세요.

저장 시 형식 지정

Biome는 VS Code의 저장 시 형식 지정 설정을 존중합니다. 저장 시 형식 지정을 활성화하려면, 설정(파일 → 환경 설정 → 설정)을 열고 editor.formatOnSave를 찾아 활성화하세요.

저장 시 수정

Biome는 VS Code의 저장 시 코드 조치 설정을 존중합니다. 저장 시 수정을 활성화하려면 다음 내용을 vscode/settings.json에 추가하세요:

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.fixAll.biome": "explicit"
4
  }
5
}

임포트 정렬 [실험적]

VS Code Biome 확장은 “임포트 정렬” 코드 조치를 통해 임포트 정렬을 지원합니다. 기본적으로 이 조치는 ⇧+Alt+O 단축키로 실행하거나, 명령 팔레트 (Ctrl/⌘+⇧+P)에서 _임포트 정렬_을 선택하여 접근할 수 있습니다.

수동으로 호출하는 대신 저장 시 자동으로 실행되도록 하려면, 다음 설정을 편집기 설정에 추가하세요:

1
{
2
  "editor.codeActionsOnSave": {
3
    "source.organizeImports.biome": "explicit"
4
  }
5
}

확장 설정

`biome.lspBin`

biome.lspBin 옵션은 확장이 사용하는 Biome 바이너리를 재정의합니다. 경로가 상대 경로인 경우, 작업 공간 폴더가 기준 경로로 사용됩니다.

`biome.rename`

Biome가 작업 공간 내 이름 변경을 관리하도록 허용합니다 (실험적).

버전 관리

공식 문서(제안된 가이드라인)에 따라 다음과 같이 버전을 관리합니다:

홀수 소수 버전은 사전 릴리스 전용입니다. 예: *.5.*
짝수 소수 버전은 공식 출시 전용입니다. 예: *.6.*

문제 해결

`@biomejs/biome`를 설치했지만, 확장은 라이브러리 해결 불가 경고를 표시합니다

라이브러리 @biomejs/biome는 운영 체제 및 아키텍처에 따라 일부 선택적 종속성을 지정합니다.

그럼에도 불구하고, 확장이 로드될 때 바이너리 해결이 실패할 수 있습니다. 이는 아마도 사용 중인 패키지 관리자 때문일 수 있습니다.

문제 해결 방법: 수동으로 바이너리를 설치해 보세요. 경고 메시지는 해당 시스템에 맞는 바이너리 경로를 표시해야 합니다.

여러 운영 체제/아키텍처를 사용하는 팀원이 있는 경우, 다음 모든 바이너리를 설치하는 것이 좋습니다:

@biomejs/cli-darwin-arm64
@biomejs/cli-darwin-x64
@biomejs/cli-linux-arm64
@biomejs/cli-linux-x64
@biomejs/cli-win32-arm64
@biomejs/cli-win32-x64

다중 루트 작업 공간에서 `biome.json` 파일이 무시됩니다

현재 다중 루트 작업 공간에 대한 지원은 제한적입니다. 따라서 각각의 루트 폴더에 위치한 biome.json 파일이 확장에서 감지되지 않을 수 있습니다. 현재로서는, Biome를 사용하는 각 폴더에 대해 개별 작업 공간을 구성하는 것이 필요할 수 있습니다. 진행 상황은 이 이슈에서 확인할 수 있습니다.