콘텐츠로 이동

린터 플러그인

Biome Linter는 GritQL 플러그인을 지원합니다. 현재 이러한 플러그인은 특정 코드 패턴을 조정하고, 해당 패턴에 대해 맞춤형 진단 메시지를 기록할 수 있게 해줍니다.

다음은 Object.assign()의 모든 사용 사례를 알리는 플러그인의 예입니다:

`$fn($args)` where {
$fn <: `Object.assign`,
register_diagnostic(
span = $fn,
message = "Prefer object spread instead of `Object.assign()`"
)
}

프로젝트 내 어디든 .grit 확장자로 파일에 GritQL 조각을 넣을 수 있지만, 주의해야 합니다. 그런 다음 다음 설정을 통해 간단히 플러그인으로 활성화할 수 있습니다:

{
"plugins": ["./플러그인-경로.grit"]
}

이제 린터가 실행되는 모든 지원되는 파일에서 플러그인이 활성화됩니다. biome lint 또는 biome check를 실행하면 결과를 확인할 수 있습니다. 예를 들어:

Terminal window
$ biome lint
/packages/tailwindcss-config-analyzer/src/introspect.ts:12:17 플러그인 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
Prefer object spread instead of `Object.assign()`
10 │ function createContextFromConfig(config: Partial<Config>) {
11 │ return createContext(
> 12 │ resolveConfig(Object.assign({}, DEFAULT_CONFIG, config)),
^^^^^^^^^^^^^
13 │ );
14 │ }

항상 특정 대상 언어 에 맞춰서 매칭하려는 시도를 하는 GritQL 조각입니다. 만약 대상 언어가 명시되지 않으면, 기본적으로 자바스크립트 또는 그 상위 언어 중 하나를 가정합니다.

다른 언어를 사용하고 싶다면, 이를 명시적으로 지정해야 합니다. 예를 들어, 허용된 클래스 .color-* 외부에 색상을 설정하는 모든 선택자를 알리는 CSS 플러그인은 다음과 같습니다:

language css;
`$selector { $props }` where {
$props <: contains `color: $color` as $rule,
not $selector <: r"\.color-.*",
register_diagnostic(
span = $rule,
message = "Don't set explicit colors. Use `.color-*` classes instead."
)
}

현재까지 지원하는 대상 언어는 자바스크립트와 CSS 이외에는 없습니다.

Grit의 내장 함수 외에도, Biome는 현재 다음 추가 함수를 지원합니다:

패턴이 일치할 때마다 알림을 보낼 진단을 등록합니다.

세 가지 인수를 지원합니다:

  • span (필수): 진단을 연결할 구문 노드입니다. 일반적으로 코드 조각 내에서 매칭된 변수입니다.
  • message (필수): 진단과 함께 표시할 메시지입니다.
  • severity: 진단의 중대성입니다. 허용되는 값은 hint, info, warn, error입니다. 기본값은 error입니다.