저는 프론트엔드 개발을 하다 보면 ESLint, Prettier 라는 도구들을 주로 사용해왔습니다. 저 뿐만 아니라 다른 분들도 이 조합을 많이 사용하시리라 생각됩니다. 그런데 간혹 eslint-plugin-prettier를 사용하다보면 극심한 속도저하를 경험하게 되었습니다.
[info] eslint-plugin-prettier
코드 스타일과 관련된 문제를 prettier의 규칙에 따라 검사하고 수정할 수 있도록 해주는 플러그인
이에 다른 대안을 찾던 중 Biome 이란 것을 알게 되었고 ESLint와 Prettier 대신 사용해보려 합니다.
Biome에 대해 알아보기 전에 ESLint와 Prettier가 무엇인지 간략하게만 알아보겠습니다.
Biome은 자바스크립트, 타입스크립트, JSX, TSX, JSON을 위한 빠른 포매터이며, 동시에 성능이 뛰어난 린터의 역할도 합니다.
bun add --dev --exact @biomejs/biomebiome init{
"$schema": "<https://biomejs.dev/schemas/1.9.4/schema.json>",
"vcs": {
"enabled": true,
"clientKind": "git",
"useIgnoreFile": true
},
"files": {
"ignore": ["node_modules", ".next", "dist", "build", "out"],
"ignoreUnknown": true
},
"formatter": {
"enabled": true,
"indentStyle": "space",
"indentWidth": 2,
"lineWidth": 80
},
"javascript": {
"formatter": {
"quoteStyle": "single",
"jsxQuoteStyle": "double",
"trailingCommas": "all",
"semicolons": "always",
"arrowParentheses": "always"
}
},
"organizeImports": {
"enabled": true
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"suspicious": {
"noExplicitAny": "off"
},
"complexity": {
"noForEach": "off"
},
"style": {
"noUselessElse": "off"
}
}
},
"json": {
"parser": {
"allowComments": false,
"allowTrailingCommas": false
},
"formatter": {
"indentWidth": 2,
"trailingCommas": "none"
}
},
"css": {
"formatter": {
"indentWidth": 2
}
},
"overrides": [
{
"include": ["**/*.md", "**/*.yml", "**/*.yaml"],
"formatter": { "enabled": false },
"linter": { "enabled": false },
"organizeImports": { "enabled": false }
}
]
}