init: biome 세팅

[Dubabbi]

#️⃣ Related Issue

Closes #9

☀️ New-insight

pnpm exec biome init

이번에 처음으로 Biome을 설정하고 사용해보면서 알게 된 점...

1. Biome은 Prettier + ESLint 역할을 하나로 통합해주는 도구로, 설정이 간결하고 빠릅니다. 기존보다 러닝커브가 낮았습니다.
2. formatter, linter, assist 등의 설정이 JSON 하나에 통합되어 있어, 유지보수가 쉽겠다는 생각이 들었습니다.
3. biome.json의 includes, ignoreUnknown 같은 옵션을 통해 체계적으로 적용 범위를 설정할 수 있었습니다.

다만 일부 옵션은 현재 문서화가 부족하고 일부 동작이 예상대로 되지 않아서 더 실험적으로 검증이 필요하다고 느꼈습니다.

Husky와 함께 Git hook에 연동해서 pre-commit 단계에서 biome을 적용해야, 커밋 전 코드 품질을 강제할 수 있기 때문에 husky 설정도 같이 해주었습니다!

참고 명령어

# 수정 없이 문제 확인만
pnpm biome check

# 포맷 수정 적용
pnpm biome format [파일명] --write

# 전체 파일 적용
pnpm biome format --write

💎 PR Point

하단 코드 주석에 구체적인 설정 작성했습니다.

biome.json 설명

{
	"$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true // .gitignore 파일을 읽어서, 무시된 파일은 biome 검사 대상에서 제외합니다. 
	},
	"files": {
		"ignoreUnknown": true, // 확장자나 언어를 Biome이 지원하지 않는 경우 해당 파일을 무시합니다. (예: .md, .json, .png 등 비지원 파일을 검사하지 않도록 설정)
		"includes": ["pages/**/*.ts", "shared/**/*.ts", "pages/**/*.tsx", "shared/**/*.tsx"] // Biome이 분석하거나 포맷할 파일의 경로를 명시합니다. 
	},
	"formatter": {
		"enabled": true, // 포매터 기능을 사용하겠다는 의미입니다.
		"indentStyle": "tab", // 들여쓰기 스타일을 설정합니다. 값은 "tab" 또는 "space"가 가능하며, 여기서는 탭(\t)으로 들여쓰기를 하겠다는 뜻입니다.
		"lineWidth": 100 // 한 줄 최대 길이
	},
	"linter": {
		"enabled": true, // Linter(문법 검사기) 기능을 활성화합니다.
		"rules": {
			"recommended": true, // Biome이 기본으로 제공하는 추천 규칙 세트를 사용합니다. 
			"style": {
				"useSingleVarDeclarator": "error" .. 
			},
			"suspicious": {
				"noDoubleEquals": "error", `==`, `!=` 대신 항상 `===`, `!==`를 사용하라는 규칙`==`, `!=` 대신 항상 `===`, `!==`를 사용하라는 규칙
				"noEmptyBlockStatements": "warn"  // 중괄호 {}만 있고 내용이 없는 블록(예: if () {})을 경고합니다.
			}
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "single", //  `single": 문자열에 '작은 따옴표' 사용`

"trailingCommas": "all": 가능한 모든 곳에 trailing comma(끝 콤마) 사용 (예: 배열/객체/파라미터 등)
			"trailingCommas": "all"

		},
		"linter": {
			"enabled": true // 자바스크립트/타입스크립트 파일에 대해 Lint 검사 수행
		}
	},
	"assist": {
		"enabled": true, 
		"actions": {
			"source": {
				"organizeImports": "on" // import 순서를 자동 정렬
			}
		}
	}
}

특정 파일 포맷 수정하기 (Biome)

pnpm biome format src/pages/Home.tsx --write

• pnpm biome format: Biome의 코드 포맷터 실행
• src/pages/Home.tsx: 포맷을 적용할 대상 파일
• --write: 포맷 결과를 실제 파일에 적용(저장)

사용하는 상황

• 코드 스타일이 꼬였거나 정렬이 안 맞을 때 빠르게 정리하고 싶을 때
• 커밋 전에 자동으로 수정된 내용을 반영하고 싶을 때
• 특정 파일 하나만 포맷하고 싶을 때

여러 파일에도 적용 가능

pnpm biome format "src/**/*.ts" --write

📸 Screenshot

Summary by CodeRabbit

• Chores

  • Biome 도구를 도입하여 코드 포맷팅 및 린팅을 관리합니다.
  • pre-commit 훅이 추가되어 커밋 전 자동으로 코드 품질 검사가 실행됩니다.
  • Husky와 Biome 관련 개발 의존성이 추가되었습니다.
  • 코드 포맷팅 및 린트 스크립트가 Biome으로 전환되었습니다.
  • VSCode 설정이 추가되어 Biome 포맷터와 자동 포맷팅, Tailwind CSS IntelliSense가 개선되었습니다.

• Refactor

  • 메인 파일에서 CSS import가 제거되었습니다.