🚀 biome formatting

.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)

packages/biome-config/README.md

@@ -0,0 +1,88 @@
+# @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
+{
+  "$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 검사를 할 수 있습니다.
+
+```jsonc
+// package.json
+{
+    "scripts": {
+        "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**를 사용하고 있습니다.
+- 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,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.biome": "explicit"
+    }
+}
+```
+
+### WebStorm
+
+Settings > Languages & Frameworks > JavaScript > Prettier 에서 Prettier를 비활성화하고, [Biome Plugin](https://plugins.jetbrains.com/plugin/22761-biome)을 설치하여 사용할 수 있습니다.

packages/biome-config/biome.json

@@ -0,0 +1,36 @@
+{
+    "$schema": "https://biomejs.dev/schemas/2.0.6/schema.json",
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 4,
+        "lineWidth": 120,
+        "lineEnding": "lf"
+    },
+    "linter": {
+        "enabled": false
+    },
+    "assist": {
+        "enabled": true,
+        "actions": {
+            "source": {
+                "organizeImports": "off"
+            }
+        }
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "single",
+            "semicolons": "asNeeded",
+            "trailingCommas": "all",
+            "bracketSpacing": false,
+            "bracketSameLine": false,
+            "arrowParentheses": "always"
+        }
+    },
+    "json": {
+        "formatter": {
+            "trailingCommas": "none"
+        }
+    }
+}

packages/biome-config/package.json

@@ -0,0 +1,33 @@
+{
+    "name": "@naverpay/biome-config",
+    "version": "0.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"
+    }
+}

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(),
 

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(),