Eslint, prettier에서 Biome로 마이그레이션하기

toto9602·2025년 2월 9일

ESLint Prettier biome webstorm

진행 중인 사이드 프로젝트에서 기존에 사용 중이던 Eslint + Prettier 조합 대신, Biome js를 사용해 보기로 하였습니다~!

본 포스팅에서는 Biome로 마이그레이션을 진행했던 간단한! 과정을 기록해 두고자 합니다.

P.S Biome js는 Node.js v14.18 이상의 버전에서만 사용 가능하다고 하네요!

참고자료

Biomejs 공식 문서
Biomejs Github
eslint/prettier 못 쓰겠다. Biome로 갈아보자

Biome js 마이그레이션

1. 패키지 설치

공식 문서에 적힌 대로, 우선 패키지를 설치해 줍니다.
저희는 pnpm을 사용 중이어서, 아래 명령어로 biome을 설치해 주었습니다!

pnpm add --save-dev --save-exact @biomejs/biome

2. 설정 파일 생성

다음으로, 아래 명령어를 실행하여 biome.json 파일을 생성해 줍니다!

pnpm biome init

명령어가 실행되면, 아래와 같은 초기 설정 파일이 루트 경로에 생성됩니다.

[ biome.json ]

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"vcs": {
		"enabled": false,
		"clientKind": "git",
		"useIgnoreFile": false
	},
	"files": {
		"ignoreUnknown": false,
		"ignore": []
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "tab"
	},
	"organizeImports": {
		"enabled": true
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	}
}

3. Eslint, Prettier 설정 마이그레이션

Biome js로 설정 내용을 마이그레이션하는 과정도, CLI를 통해 간단히 가능했습니다!

https://biomejs.dev/guides/migrate-eslint-prettier/

Eslint

pnpm biome migrate eslint --write

기존에도 기본적인 rule만 설정해 둔 탓에 자세하진 않지만,
명령어를 실행한 이후의 파일을 보면..
1. linter 필드에 규칙들이 추가되었고
2. 초기 파일에 기본적으로 켜져 있던 recommended 옵션은 false로 바뀌었고
3. ignore 필드에 eslintIgnore 파일 설정까지 잘 옮겨져 왔네요!

Biome은 rule의 의미를 보다 명확히 전달하기 위해 기존 eslint와 규칙명을 다르게 설정한 부분이 있다고 하는데,
이 부분도 공식 문서에 잘 나열되어 있어 추후에 필요한 부분을 설정해 보려 합니다.
[ biome.json ]

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
	"files": { "ignoreUnknown": false, "ignore": [] },
	"formatter": { "enabled": true, "indentStyle": "tab" },
	"organizeImports": { "enabled": true },
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": false,
			"complexity": { "noUselessTypeConstraint": "error" },
			"correctness": {
				"noUnusedVariables": "error",
				"useArrayLiterals": "off"
			},
			"style": {
				"noNamespace": "error",
				"useAsConstAssertion": "error",
				"useBlockStatements": "off"
			},
			"suspicious": {
				"noExplicitAny": "off",
				"noExtraNonNullAssertion": "error",
				"noMisleadingInstantiator": "error",
				"noUnsafeDeclarationMerging": "error",
				"useNamespaceKeyword": "error"
			}
		},
		"ignore": ["**/.eslintrc.js", "**/node_modules", "**/*.json"]
	},
	"javascript": { "formatter": { "quoteStyle": "double" } },
	"overrides": [
		{
			"include": ["*.ts", "*.tsx", "*.mts", "*.cts"],
			"linter": {
				"rules": {
					"correctness": {
						"noConstAssign": "off",
						"noGlobalObjectCalls": "off",
						"noInvalidBuiltinInstantiation": "off",
						"noInvalidConstructorSuper": "off",
						"noNewSymbol": "off",
						"noSetterReturn": "off",
						"noUndeclaredVariables": "off",
						"noUnreachable": "off",
						"noUnreachableSuper": "off"
					},
					"style": {
						"noArguments": "error",
						"noVar": "error",
						"useConst": "error"
					},
					"suspicious": {
						"noDuplicateClassMembers": "off",
						"noDuplicateObjectKeys": "off",
						"noDuplicateParameters": "off",
						"noFunctionAssign": "off",
						"noImportAssign": "off",
						"noRedeclare": "off",
						"noUnsafeNegation": "off",
						"useGetterReturn": "off"
					}
				}
			}
		}
	]
}

Prettier

동일하게 CLI로 prettier 설정도 마이그레이션해 줍니다.

biome migrate prettier --write

다시 한 번 전체 파일 기준으로 살펴 보면, Prettier 설정을 옮겨 오면서
formatter 필드 쪽 설정이 추가되었네요.

[ biome.json ]

{
	"$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
	"vcs": { "enabled": false, "clientKind": "git", "useIgnoreFile": false },
	"files": { "ignoreUnknown": false, "ignore": [] },
	"formatter": {
		"enabled": true,
		"useEditorconfig": true,
		"formatWithErrors": false,
		"indentStyle": "space",
		"indentWidth": 2,
		"lineEnding": "lf",
		"lineWidth": 120,
		"attributePosition": "auto",
		"bracketSpacing": true
	},
	"organizeImports": { "enabled": true },
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": false,
			"complexity": { "noUselessTypeConstraint": "error" },
			"correctness": {
				"noUnusedVariables": "error",
				"useArrayLiterals": "off"
			},
			"style": {
				"noNamespace": "error",
				"useAsConstAssertion": "error",
				"useBlockStatements": "off"
			},
			"suspicious": {
				"noExplicitAny": "off",
				"noExtraNonNullAssertion": "error",
				"noMisleadingInstantiator": "error",
				"noUnsafeDeclarationMerging": "error",
				"useNamespaceKeyword": "error"
			}
		},
		"ignore": ["**/.eslintrc.js", "**/node_modules", "**/*.json"]
	},
	"javascript": {
		"formatter": {
			"jsxQuoteStyle": "double",
			"quoteProperties": "asNeeded",
			"trailingCommas": "all",
			"semicolons": "always",
			"arrowParentheses": "always",
			"bracketSameLine": false,
			"quoteStyle": "double",
			"attributePosition": "auto",
			"bracketSpacing": true
		}
	},
	"overrides": [
		{
			"include": ["*.ts", "*.tsx", "*.mts", "*.cts"],
			"linter": {
				"rules": {
					"correctness": {
						"noConstAssign": "off",
						"noGlobalObjectCalls": "off",
						"noInvalidBuiltinInstantiation": "off",
						"noInvalidConstructorSuper": "off",
						"noNewSymbol": "off",
						"noSetterReturn": "off",
						"noUndeclaredVariables": "off",
						"noUnreachable": "off",
						"noUnreachableSuper": "off"
					},
					"style": {
						"noArguments": "error",
						"noVar": "error",
						"useConst": "error"
					},
					"suspicious": {
						"noDuplicateClassMembers": "off",
						"noDuplicateObjectKeys": "off",
						"noDuplicateParameters": "off",
						"noFunctionAssign": "off",
						"noImportAssign": "off",
						"noRedeclare": "off",
						"noUnsafeNegation": "off",
						"useGetterReturn": "off"
					}
				}
			}
		}
	]
}