Add automatic code formatting with Git hooks and VS Code settings

Author: YosukeMiyata

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.codeActionsOnSave": {
+    "quickfix.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}

README.md

@@ -92,39 +92,46 @@ yarn build-storybook
 
 ## 🧹 コード品質
 
-### リント
+### 自動フォーマット
+
+このプロジェクトでは以下の方法でコード品質が自動的に管理されます：
+
+#### 1. Git Hooks（推奨）
+- コミット前に自動的にBiomeのチェックと修正が実行されます
+- 問題がある場合はコミットがブロックされます
+- `lint-staged`により、ステージされたファイルのみが処理されます
+
+#### 2. VS Code設定
+- ファイル保存時に自動フォーマットが適用されます
+- Biome拡張機能が推奨されます
+
+#### 3. 手動実行
 
 ```bash
 # リントチェック
 yarn lint
 
 # リント自動修正
 yarn lint:fix
-```
-
-### フォーマット
 
-```bash
 # コードフォーマット
 yarn format
-```
-
-### 総合チェック
 
-```bash
-# リント + フォーマットの総合チェック
+# 総合チェック（リント + フォーマット）
 yarn check
 
 # 総合チェック + 自動修正
-yarn clean
-```
+yarn check:fix
 
-### Git Hooks
+# 型チェック
+yarn type-check
+```
 
-このプロジェクトでは`simple-git-hooks`と`lint-staged`を使用して、コミット前に自動的にコード品質チェックが実行されます：
+### 開発時の注意点
 
-- コミット前に自動的にリントとフォーマットが実行される
-- 問題がある場合はコミットがブロックされる
+- コミット前に必ず`yarn check:fix`を実行することを推奨します
+- VS CodeでBiome拡張機能をインストールすると、リアルタイムでエラーが表示されます
+- プッシュ前にGitHub ActionsでBiomeチェックが実行されます
 
 ## 📁 プロジェクト構造
 

package.json

@@ -8,12 +8,12 @@
     "build": "next build",
     "export": "next build && next export",
     "start": "serve out",
-    "lint": "yarn run biome lint ./src",
-    "lint:fix": "yarn run biome lint ./src --write",
-    "lint:fix:css": "stylelint --fix \"**/*.{js,jsx,ts,tsx}\"",
-    "format": "yarn run biome format ./src --write",
-    "check": "yarn run biome check ./src",
-    "clean": "yarn run biome check ./src --write",
+    "lint": "biome lint ./src",
+    "lint:fix": "biome lint ./src --write",
+    "format": "biome format ./src --write",
+    "check": "biome check ./src",
+    "check:fix": "biome check --write --unsafe ./src",
+    "type-check": "tsc --noEmit",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -32,6 +32,12 @@
     "lint-staged": "^15.0.0",
     "typescript": "^5.0.0"
   },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": [
+      "biome check --write --unsafe ./src",
+      "biome format --write ./src"
+    ]
+  },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },