Prettier, Eslint -> Biome Migration Guide

앞서 Biome 는 Rust 기반의 Code Format와 Lint를 위한 통합 솔루션이고 Prettier 팀에서 개최한 대회에서 우승한 프로젝트입니다.

자세한 내용은 아래 공식 홈페이지와 아티클을 참고해주세요.

https://biomejs.dev/ https://teamdable.github.io/techblog/biome-js-linter-and-formatter

아직 미지원인 eslint rule이 다수 있습니다.

1. npm 설치

npm i @biomejs/biome --save-dev --save-exact

2. configuration

biome init

3. migration

biome migrate eslint --write --include-inspired && biome migrate prettier --write

추가로 biome.json 에서 일부 값들을 추가&변경해줍니다.

"javascript": {
		"formatter": {
			...
			"semicolons": "always", // default: "asNeeded"
			...
		},
		"parser": {
            "unsafeParameterDecoratorsEnabled": true
        } // 새로 추가해주세요. @Param, @Inject, @Query 등 Parameter Decorator 사용 시 필요한 옵션
	},

기존 package.json 에 존재하던 format 스크립트인 "prettier --write \"src/**/*.ts\" \"test/**/*.ts\" \"libs/**/*.ts\""는 "biome format --write ."으로 변경하고 biome.json 에 내용을 추가합니다.

{
	"$schema": ~~~,
	"files": {
		"include": ["src/**/*.ts", "test/**/*.ts", "libs/**/*.ts"],
	},
	...
}

4. 불필요한 패키지 삭제

npm uninstall eslint eslint-config-prettier eslint-config-prettier @typescript-eslint/eslint-plugin @typescript-eslint/parser prettier

5. 불필요한 파일 삭제

rm -rf ./**/.eslintrc.js ./**/.eslintignore ./**/.prettierrc ./**/.prettierignore

etc.

code formatting 외에 lint 옵션만 사용할 경우 아래 명령어를 통해 사용 가능합니다.

biome lint [--apply] [--apply-unsafe] .

--apply, --apply-unsafe옵션 중에서는 --apply를 추천합니다.

https://biomejs.dev/linter/#safe-fixes

lint 와 code formatting 을 동시에 진행하고 싶은 경우 아래 명령어를 사용하면 됩니다.

biome check [--apply] [--apply-unsafe] .

https://biomejs.dev/reference/cli/#biome-check

biome 의 자세한 내용 및 사용법은 공식 문서를 참고하세요.