― HTML・JS・JSX が混在するロボFP開発環境での実践ログ ―
家計診断Proの開発が進むにつれ、コードがどうしても長文化し、「どこが閉じタグ？」「インデントがズレて保守しづらい…」と感じる場面が増えてきました。
そこで、VS Code の Prettier を使った自動整形を導入しようとしたのですが、
❌ しかし、整形が全く効かない！
設定で
- Editor: Format On Save ＝ ON
- Prettier 拡張機能 ＝ インストール済み
にも関わらず保存しても全く整わない…。
原因は意外なところにありました。
🔍 原因：ファイルが “ini として認識されていた”
VS Code 右下の言語モードを見ると…
「Ini」
（ini = 設定ファイル）
…そりゃ整形されません。
家計診断Proの編集ファイルは
HTML・JS・React（JSX）が1ファイルにまとまった構成でしたが、
拡張子がないまま「FHC1124a」という名前で保存されていたため、VS Code が ini と誤認した のが原因でした。
✅ 解決策（1）ファイルに拡張子を付ける
名前を付けて保存 → .html 拡張子をつける。
例：FHC1124a.html
これで VS Code がファイルを HTML と判定します。
✅ 解決策（2）言語モードを明示的に HTML へ変更
右下の「Ini」をクリック →HTML を選択。
これで Prettier が使えるファイル種別になりました。
✅ 解決策（3）Prettier を既定フォーマッタに設定
- VS Code の設定（歯車アイコン → Settings）
- 検索窓に「default formatter」
Editor: Default Formatter→
esbenp.prettier-vscode を選択
これで保存時に Prettier が動くようになります。
✨ 結果：コードが一瞬で美しく整列！
保存（Cmd+S）するだけで…
- インデントが揃う
- タグの並びも美しく統一
- 長文の HTML や JSX 部分も読みやすく整形
いままで苦しんでいた “ツギハギのコード地獄” から解放されました。
🔧 ロボFP開発の観点からの良いポイント
今回の整形により、
- PDF生成部分
- 相談者情報ブロック
- FP情報ブロック
- 画面ロジック & JSX部分
など、複数の技術が混在する大規模な1ファイル構成でも安定して管理しやすくなりました。
これは、無料で使えるFP補助ツールとして家計診断Proを拡げるうえでも非常に大事な基盤整備です。
🎯 まとめ
VS Code でコード整形が効かないときは、
- ファイル拡張子は正しいか？（今回は .html が正解）
- 言語モードが正しいか？（右下を確認）
- Prettier が既定フォーマッタになっているか？
この3つを確認すると解決するケースが多いです。
これで開発効率が一段アップしました。
次は「入力データ保存機能」と「カーソル移動バグの修正」に進んでいきます。
コメント