[Infra] Biome.js VSCode 세팅

 

린트와 포맷팅을 한번에 할 수 있는 성능 좋은 툴 Biome ..

하지만 세팅이 항상 헷갈려서 정리해놓음.

 

VSCode에서 저장시 자동 포맷팅이 되도록 하는 세팅 방법이다.

npm install -D @biomejs/biome@1.9.4

2.x버전부터는 아직 VSCode에서 확장 프로그램 지원을 안하고 있기 때문에 1.x버전으로 설치한다.

 

{
    "editor.defaultFormatter": "biomejs.biome",
    "editor.formatOnSave": true,
    "[typescript]": {
        "editor.defaultFormatter": "biomejs.biome"
    },
    "[typescriptreact]": {
        "editor.defaultFormatter": "biomejs.biome"
    }
}

프로젝트 루트에 .vscode 디렉토리를 만들고 settings.json 파일에 위와 같은 내용을 작성한다.

 

모두 끝나면 shift + ctrl + p 로 Reload Window 명령을 실행하여 VSCode를 재시작해준다.

여기까지 한다면 파일 저장 시 프로젝트 루트의 biome.json에 규칙을 정하는 대로 자동 포맷팅된다.

아래는 실제 사이드 프로젝트에 썼던 biome.js 파일의 내용이다.

{
    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
    "vcs": {
        "enabled": false,
        "clientKind": "git",
        "useIgnoreFile": false
    },
    "files": {
        "ignoreUnknown": false,
        "ignore": [
            "**/node_modules/**",
            "**/dist/**",
            "**/.next/**",
            "**/.turbo/**",
            "**/build/**",
            "**/*.generated.*",
            "**/coverage/**",
            "**/.vite/**"
        ]
    },
    "formatter": {
        "enabled": true,
        "indentStyle": "space",
        "indentWidth": 4,
        "lineEnding": "lf",
        "lineWidth": 150
    },
    "organizeImports": {
        "enabled": true
    },
    "linter": {
        "enabled": true,
        "rules": {
            "recommended": true,
            "a11y": {
                "useKeyWithClickEvents": "off",
                "useKeyWithMouseEvents": "off"
            }
        }
    },
    "javascript": {
        "formatter": {
            "quoteStyle": "double",
            "semicolons": "always",
            "bracketSpacing": true,
            "lineWidth": 150,
            "bracketSameLine": false,
            "arrowParentheses": "asNeeded",
            "trailingCommas": "all",
            "quoteProperties": "asNeeded"
        }
    }
}