13. 도구 설정

13.1 biome의 react 도메인과 추가 검사를 설정합니다

자동 검사 범위와 리뷰에서 판단할 범위를 구분합니다.

biome 2.x의 linter.domains에서 react를 켭니다. package.json에 react@>=16이 있을 때 React 검사가 적용되며, 기본 설정은 TypeScript 규칙 7.1를 따릅니다.

도메인 검사와 추가 설정

접근성 검사

a11y 검사는 useButtonType, useAltText, useValidAnchor, useKeyWithClickEvents, useSemanticElements, noStaticElementInteractions, useFocusableInteractive를 포함합니다.

가져오기 경로 제한

라우트가 늘면 해당 overrides도 추가합니다. overrides는 규칙 옵션을 통째로 바꾸므로 기본 설정의 경로 패턴을 각 항목에 함께 적습니다. 소유자 경계는 가져오는 파일의 위치에 따라 달라지므로 import 문자열만으로 판정하지 못하고 리뷰에서 확인합니다.

켜지 않는 규칙

도메인과 추가 검사를 켜고 레이어, 라우트 overrides를 설정합니다.

{
	"linter": {
		"enabled": true,
		"domains": {"react": "recommended"},
		"rules": {
			"preset": "recommended",
			"correctness": {"noNestedComponentDefinitions": "error"},
			"style": {
				"noRestrictedImports": {
					"level": "error",
					"options": {
						"patterns": [{"group": ["../**", "./**", "!./*.css"], "message": "Import with the absolute alias. Only a bare file import may use ./ for the same folder."}]
					}
				}
			}
		}
	},
	"overrides": [
		{
			"includes": ["src/component/ui/**"],
			"linter": {
				"rules": {
					"style": {
						"noRestrictedImports": {
							"level": "error",
							"options": {
								"patterns": [
									{
										"group": ["../**", "./**", "!./*.css"],
										"message": "Import with the absolute alias. Only a bare file import may use ./ for the same folder."
									},
									{
										"group": ["@/component/widget/**", "@/page/**"],
										"message": "ui must not import widget or page."
									}
								]
							}
						}
					}
				}
			}
		},
		{
			"includes": ["src/component/widget/**"],
			"linter": {
				"rules": {
					"style": {
						"noRestrictedImports": {
							"level": "error",
							"options": {
								"patterns": [
									{
										"group": ["../**", "./**", "!./*.css"],
										"message": "Import with the absolute alias. Only a bare file import may use ./ for the same folder."
									},
									{"group": ["@/page/**"], "message": "widget must not import page."}
								]
							}
						}
					}
				}
			}
		},
		{
			"includes": ["src/page/product-detail/**"],
			"linter": {
				"rules": {
					"style": {
						"noRestrictedImports": {
							"level": "error",
							"options": {
								"patterns": [
									{
										"group": ["../**", "./**", "!./*.css"],
										"message": "Import with the absolute alias. Only a bare file import may use ./ for the same folder."
									},
									{"group": ["@/page/**", "!@/page/product-detail/**"], "message": "Do not import the inside of another route."}
								]
							}
						}
					}
				}
			}
		}
	]
}