From 65c63b65676bf13109758fb7622c3a1f2093db8a Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 11:51:53 +0900 Subject: [PATCH 1/7] =?UTF-8?q?[#130]=20=F0=9F=9A=80=20init=20biome?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biome-config/README.md | 59 +++++++++++++++++++ packages/biome-config/biome.json | 25 ++++++++ packages/biome-config/package.json | 33 +++++++++++ pnpm-lock.yaml | 94 ++++++++++++++++++++++++++++++ 4 files changed, 211 insertions(+) create mode 100644 packages/biome-config/README.md create mode 100644 packages/biome-config/biome.json create mode 100644 packages/biome-config/package.json diff --git a/packages/biome-config/README.md b/packages/biome-config/README.md new file mode 100644 index 0000000..8b39a38 --- /dev/null +++ b/packages/biome-config/README.md @@ -0,0 +1,59 @@ +# @naverpay/biome-config + +네이버페이 스타일 가이드에 맞게 Biome formatter 설정을 커스텀하여 제공합니다. + +> eslint 를 대체 하기에는 eslint 플러그인이 너무 방대하여, `@naverpay/biome-config`는 formatting 역할을 하는 prettier 만 대체하도록 설계되어 있습니다. + +## 설치 방법 + +```bash +npm install @naverpay/biome-config @biomejs/biome -D +``` + +## 사용 방법 + +biome.json 파일을 생성하고 `@naverpay/biome-config` 패키지를 추가합니다. + +```json +{ + "extends": ["@naverpay/biome-config"] +} +``` + +## CLI + +package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다. + +```jsonc +// package.json +{ + "scripts": { + "format": "biome format .", + "format:fix": "biome format --write ." + }, +} +``` + +> [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다. + +## Integrating with IDE + +- code-style에서는 **Formatting을 위해 Biome**를, **Code-quality를 위해 ESLint**를 사용하고 있습니다. +- IDE에서 autofix 하기 위해 아래 설정이 필요합니다. + +### VSCode + +1. [Biome Extension](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)을 설치합니다. +2. IDE에서 Command Palette(CMD/CTRL + Shift + P)를 열고 `settings.json`을 입력하여 설정파일을 오픈합니다. +3. 아래 설정을 추가하면 파일 저장시 Biome config에 맞게 autofix 할 수 있습니다. + +```json +{ + "editor.defaultFormatter": "biomejs.biome", + "editor.formatOnSave": true +} +``` + +### WebStorm + +Settings > Languages & Frameworks > JavaScript > Prettier 에서 Prettier를 비활성화하고, [Biome Plugin](https://plugins.jetbrains.com/plugin/22761-biome)을 설치하여 사용할 수 있습니다. diff --git a/packages/biome-config/biome.json b/packages/biome-config/biome.json new file mode 100644 index 0000000..97ad32c --- /dev/null +++ b/packages/biome-config/biome.json @@ -0,0 +1,25 @@ +{ + "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json", + "formatter": { + "enabled": true, + "indentStyle": "space", + "indentWidth": 4, + "lineWidth": 120, + "lineEnding": "lf" + }, + "javascript": { + "formatter": { + "quoteStyle": "single", + "semicolons": "asNeeded", + "trailingCommas": "all", + "bracketSpacing": false, + "bracketSameLine": false, + "arrowParentheses": "always" + } + }, + "json": { + "formatter": { + "trailingCommas": "none" + } + } +} diff --git a/packages/biome-config/package.json b/packages/biome-config/package.json new file mode 100644 index 0000000..afd8b27 --- /dev/null +++ b/packages/biome-config/package.json @@ -0,0 +1,33 @@ +{ + "name": "@naverpay/biome-config", + "version": "1.0.0", + "description": "Biome configuration for NaverPay projects", + "keywords": [ + "biome", + "config", + "formatter", + "linter", + "naverpay" + ], + "repository": { + "type": "git", + "url": "https://github.com/NaverPayDev/code-style.git", + "directory": "packages/biome-config" + }, + "license": "MIT", + "author": "NaverPay Frontend", + "type": "module", + "exports": { + ".": "./biome.json" + }, + "main": "biome.json", + "files": [ + "biome.json" + ], + "devDependencies": { + "@biomejs/biome": "^2.0.6" + }, + "peerDependencies": { + "@biomejs/biome": "^2.0.6" + } +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6372612..01618ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,12 @@ importers: specifier: ^6.3.5 version: 6.3.5(sass-embedded@1.85.1)(terser@5.36.0) + packages/biome-config: + dependencies: + '@biomejs/biome': + specifier: ^2.0.6 + version: 2.2.6 + packages/editorconfig: {} packages/eslint-config: @@ -836,6 +842,59 @@ packages: '@bcoe/v8-coverage@0.2.3': resolution: {integrity: sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==} + '@biomejs/biome@2.2.6': + resolution: {integrity: sha512-yKTCNGhek0rL5OEW1jbLeZX8LHaM8yk7+3JRGv08my+gkpmtb5dDE+54r2ZjZx0ediFEn1pYBOJSmOdDP9xtFw==} + engines: {node: '>=14.21.3'} + hasBin: true + + '@biomejs/cli-darwin-arm64@2.2.6': + resolution: {integrity: sha512-UZPmn3M45CjTYulgcrFJFZv7YmK3pTxTJDrFYlNElT2FNnkkX4fsxjExTSMeWKQYoZjvekpH5cvrYZZlWu3yfA==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [darwin] + + '@biomejs/cli-darwin-x64@2.2.6': + resolution: {integrity: sha512-HOUIquhHVgh/jvxyClpwlpl/oeMqntlteL89YqjuFDiZ091P0vhHccwz+8muu3nTyHWM5FQslt+4Jdcd67+xWQ==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [darwin] + + '@biomejs/cli-linux-arm64-musl@2.2.6': + resolution: {integrity: sha512-TjCenQq3N6g1C+5UT3jE1bIiJb5MWQvulpUngTIpFsL4StVAUXucWD0SL9MCW89Tm6awWfeXBbZBAhJwjyFbRQ==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-arm64@2.2.6': + resolution: {integrity: sha512-BpGtuMJGN+o8pQjvYsUKZ+4JEErxdSmcRD/JG3mXoWc6zrcA7OkuyGFN1mDggO0Q1n7qXxo/PcupHk8gzijt5g==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [linux] + + '@biomejs/cli-linux-x64-musl@2.2.6': + resolution: {integrity: sha512-1ZcBux8zVM3JhWN2ZCPaYf0+ogxXG316uaoXJdgoPZcdK/rmRcRY7PqHdAos2ExzvjIdvhQp72UcveI98hgOog==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-linux-x64@2.2.6': + resolution: {integrity: sha512-1HaM/dpI/1Z68zp8ZdT6EiBq+/O/z97a2AiHMl+VAdv5/ELckFt9EvRb8hDHpk8hUMoz03gXkC7VPXOVtU7faA==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [linux] + + '@biomejs/cli-win32-arm64@2.2.6': + resolution: {integrity: sha512-h3A88G8PGM1ryTeZyLlSdfC/gz3e95EJw9BZmA6Po412DRqwqPBa2Y9U+4ZSGUAXCsnSQE00jLV8Pyrh0d+jQw==} + engines: {node: '>=14.21.3'} + cpu: [arm64] + os: [win32] + + '@biomejs/cli-win32-x64@2.2.6': + resolution: {integrity: sha512-yx0CqeOhPjYQ5ZXgPfu8QYkgBhVJyvWe36as7jRuPrKPO5ylVDfwVtPQ+K/mooNTADW0IhxOZm3aPu16dP8yNQ==} + engines: {node: '>=14.21.3'} + cpu: [x64] + os: [win32] + '@bufbuild/protobuf@2.2.3': resolution: {integrity: sha512-tFQoXHJdkEOSwj5tRIZSPNUuXK3RaR7T1nUrPgbYX1pUbvqqaaZAsfo+NXBPsz5rZMSKVFrgK1WL8Q/MSLvprg==} @@ -5713,6 +5772,41 @@ snapshots: '@bcoe/v8-coverage@0.2.3': {} + '@biomejs/biome@2.2.6': + optionalDependencies: + '@biomejs/cli-darwin-arm64': 2.2.6 + '@biomejs/cli-darwin-x64': 2.2.6 + '@biomejs/cli-linux-arm64': 2.2.6 + '@biomejs/cli-linux-arm64-musl': 2.2.6 + '@biomejs/cli-linux-x64': 2.2.6 + '@biomejs/cli-linux-x64-musl': 2.2.6 + '@biomejs/cli-win32-arm64': 2.2.6 + '@biomejs/cli-win32-x64': 2.2.6 + + '@biomejs/cli-darwin-arm64@2.2.6': + optional: true + + '@biomejs/cli-darwin-x64@2.2.6': + optional: true + + '@biomejs/cli-linux-arm64-musl@2.2.6': + optional: true + + '@biomejs/cli-linux-arm64@2.2.6': + optional: true + + '@biomejs/cli-linux-x64-musl@2.2.6': + optional: true + + '@biomejs/cli-linux-x64@2.2.6': + optional: true + + '@biomejs/cli-win32-arm64@2.2.6': + optional: true + + '@biomejs/cli-win32-x64@2.2.6': + optional: true + '@bufbuild/protobuf@2.2.3': {} '@changesets/apply-release-plan@7.0.0': From 665f122cfdba008e1ad76978143cb9ef84ebe28b Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 11:54:31 +0900 Subject: [PATCH 2/7] =?UTF-8?q?[#130]=20=EB=AA=85=EC=8B=9C=EC=A0=81?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EC=98=B5=EC=85=98=20=ED=82=A4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biome-config/biome.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/biome-config/biome.json b/packages/biome-config/biome.json index 97ad32c..d4443ee 100644 --- a/packages/biome-config/biome.json +++ b/packages/biome-config/biome.json @@ -7,6 +7,12 @@ "lineWidth": 120, "lineEnding": "lf" }, + "linter": { + "enabled": false + }, + "assist": { + "enabled": true + }, "javascript": { "formatter": { "quoteStyle": "single", From 41b1d0aee1e061078087edfd1dfc1c0694e7243e Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 11:55:39 +0900 Subject: [PATCH 3/7] =?UTF-8?q?[#130]=20=F0=9F=90=9B=20update=20lock=20fil?= =?UTF-8?q?e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pnpm-lock.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 01618ad..3084ec7 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -49,7 +49,7 @@ importers: version: 6.3.5(sass-embedded@1.85.1)(terser@5.36.0) packages/biome-config: - dependencies: + devDependencies: '@biomejs/biome': specifier: ^2.0.6 version: 2.2.6 From 50519ea0ced242f92e27b8cef7b01f9ea32bb660 Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 11:56:37 +0900 Subject: [PATCH 4/7] [#130] chore: set package version to 0.0.0 for initial internal testing --- packages/biome-config/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/biome-config/package.json b/packages/biome-config/package.json index afd8b27..3431109 100644 --- a/packages/biome-config/package.json +++ b/packages/biome-config/package.json @@ -1,6 +1,6 @@ { "name": "@naverpay/biome-config", - "version": "1.0.0", + "version": "0.0.0", "description": "Biome configuration for NaverPay projects", "keywords": [ "biome", From fb178df0b8f97778d5ca985a0dbb19ab70b49f52 Mon Sep 17 00:00:00 2001 From: yceffort_naver <158988311+yceffort-naver@users.noreply.github.com> Date: Tue, 14 Oct 2025 11:56:52 +0900 Subject: [PATCH 5/7] Create silver-eagles-kneel.md --- .changeset/silver-eagles-kneel.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/silver-eagles-kneel.md diff --git a/.changeset/silver-eagles-kneel.md b/.changeset/silver-eagles-kneel.md new file mode 100644 index 0000000..1af9c71 --- /dev/null +++ b/.changeset/silver-eagles-kneel.md @@ -0,0 +1,7 @@ +--- +"@naverpay/biome-config": patch +--- + +🚀 biome formatting + +PR: [🚀 biome formatting](https://github.com/NaverPayDev/code-style/pull/131) From a7b08a1190965b1264908b4d849308f741f6390e Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 14:03:09 +0900 Subject: [PATCH 6/7] =?UTF-8?q?[#130]=20=F0=9F=94=A5organizeImports=20?= =?UTF-8?q?=EB=8A=94=20=EB=81=84=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biome-config/biome.json | 7 ++++++- packages/eslint-config/node/rules/import.js | 1 + packages/eslint-config/react/rules/import.js | 1 + 3 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/biome-config/biome.json b/packages/biome-config/biome.json index d4443ee..460c5ae 100644 --- a/packages/biome-config/biome.json +++ b/packages/biome-config/biome.json @@ -11,7 +11,12 @@ "enabled": false }, "assist": { - "enabled": true + "enabled": true, + "actions": { + "source": { + "organizeImports": "off" + } + } }, "javascript": { "formatter": { diff --git a/packages/eslint-config/node/rules/import.js b/packages/eslint-config/node/rules/import.js index 27ecb1b..9be24f3 100644 --- a/packages/eslint-config/node/rules/import.js +++ b/packages/eslint-config/node/rules/import.js @@ -9,6 +9,7 @@ export default { /** * Enforce a convention in the order of require() / import statements * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md + * @deprecated biome organizeImports 로 대체 예정 https://biomejs.dev/assist/actions/organize-imports/ */ 'import/order': importOrder(), diff --git a/packages/eslint-config/react/rules/import.js b/packages/eslint-config/react/rules/import.js index dde038c..42a5da2 100644 --- a/packages/eslint-config/react/rules/import.js +++ b/packages/eslint-config/react/rules/import.js @@ -10,6 +10,7 @@ export default { /** * Enforce a convention in the order of require() / import statements * @see https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md + * @deprecated biome organizeImports 로 대체 예정 https://biomejs.dev/assist/actions/organize-imports/ */ 'import/order': importOrder(), From 2a113cb945db75c6b53906e13ae4c17a08ecc98f Mon Sep 17 00:00:00 2001 From: yceffort Date: Tue, 14 Oct 2025 14:08:49 +0900 Subject: [PATCH 7/7] =?UTF-8?q?[#130]=20=F0=9F=93=91=20README=20=EB=B3=B4?= =?UTF-8?q?=EA=B0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/biome-config/README.md | 37 +++++++++++++++++++++++++++++---- 1 file changed, 33 insertions(+), 4 deletions(-) diff --git a/packages/biome-config/README.md b/packages/biome-config/README.md index 8b39a38..a72de76 100644 --- a/packages/biome-config/README.md +++ b/packages/biome-config/README.md @@ -16,10 +16,17 @@ biome.json 파일을 생성하고 `@naverpay/biome-config` 패키지를 추가 ```json { - "extends": ["@naverpay/biome-config"] + "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json", + "extends": ["@naverpay/biome-config"], + "files": { + "includes": ["**", "!scripts/**", "!apps/web/public/**", "!apps/web/src/assets/lottie/applyCharge.json"] + } } + ``` +> ignore 설정이 없기 때문에, `includes`의 `!`로 무시하고 싶은 파일을 설정해주세요. + ## CLI package.json에 스크립트를 추가하여 format 검사를 할 수 있습니다. @@ -28,14 +35,33 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니 // package.json { "scripts": { - "format": "biome format .", - "format:fix": "biome format --write ." + "format": "biome check .", + "format:fix": "biome check --write ." }, } ``` > [lefthook](https://github.com/evilmartians/lefthook)을 사용해서 commit 또는 push 전에 스타일 확인을 자동화할 것을 권장합니다. +## 차이점 + +- [biome 에서 제공하는 assist](https://biomejs.dev/assist/javascript/actions/) 가 기본으로 활성화 되어 있습니다. 따라서 prettier 를 대체한다면 jsx elements 의 순서가 정렬되거나, js 객체의 키가 정렬될 수 있습니다. 해당 옵션을 원치 않는다면 반드시 꺼주세요. + - [organizeImports](https://biomejs.dev/assist/actions/organize-imports/) 규칙은 eslint 의 `import/order` 와 충돌하여 기본적으로 꺼져있습니다. 다음 major 버전 때 biome 로 대체될 예정입니다. + +```jsonc +// biome.json +{ + "$schema": "https://biomejs.dev/schemas/2.2.6/schema.json", + "assist": { + "actions": { + "source": { + "organizeImports": "off" + } + } + } +} +``` + ## Integrating with IDE - code-style에서는 **Formatting을 위해 Biome**를, **Code-quality를 위해 ESLint**를 사용하고 있습니다. @@ -50,7 +76,10 @@ package.json에 스크립트를 추가하여 format 검사를 할 수 있습니 ```json { "editor.defaultFormatter": "biomejs.biome", - "editor.formatOnSave": true + "editor.formatOnSave": true, + "editor.codeActionsOnSave": { + "source.fixAll.biome": "explicit" + } } ```