Astro/Vue/Svelte 파일에서 Biome 미사용 경고 끄기

Astro, Vue, Svelte 같은 프레임워크 파일에서는 템플릿에서 사용하는 변수나 import가 JavaScript 쪽에서는 미사용처럼 보일 때가 있다.

Biome은 이것을 미사용 변수나 미사용 import로 경고하지만, 실제로는 템플릿에서 쓰이기 때문에 오탐이다.

해결 방법

Biome 설정 파일에서 특정 파일 타입에 대해서만 미사용 경고를 끌 수 있다.

{
  "overrides": [
    {
      "includes": ["**/*.astro", "**/*.vue", "**/*.svelte"],
      "linter": {
        "rules": {
          "correctness": {
            "noUnusedImports": "off",
            "noUnusedVariables": "off"
          }
        }
      }
    }
  ]
}

includes에 지정한 파일 타입에 대해서만 noUnusedImports와 noUnusedVariables 규칙을 끈다.

커스터마이즈

프로젝트에서 쓰지 않는 프레임워크가 있다면 includes에서 빼면 된다.

예를 들어 Astro만 쓴다면 "**/*.astro"만 지정해도 충분하다.

반대로 다른 프레임워크도 추가하고 싶다면 배열에 더 넣으면 된다.

정리

Biome의 overrides 기능을 사용하면 프레임워크 특유 문법 때문에 생기는 오탐을 쉽게 피할 수 있다.

프레임워크별로 적절히 규칙을 조정하면 훨씬 실용적인 린트 환경이 된다.