Android Studio/VSCodeでファイルをネスト化してファイルツリーをすっきりさせる

はじめに

普段のFlutter開発でfreezedパッケージをよく使っている。

その際に自動生成された.freezed.dartファイルでディレクトリの中がいっぱいになり見にくくなってくる。

Flutter開発に限らず自動生成ファイルといった開発に必要だが中身を見る必要があまりないファイルでディレクトリが見にくくなってしまうことは多いだろう。

今日はそんなときに便利なファイルのネスト化の設定手順をAndroid StudioとVSCodeの2つで紹介する。

Android Studioでの設定手順

まずはAndroid Studioでの設定を見ていこう。

例えば、以下のようなファイルツリーがあったとする。ご覧の通り、各モデル用のファイルの下に.freezed.dartファイルが置かれている。

まずは右上にある設定アイコンをクリックする。

出てくる選択肢一覧からFile Nesting...をクリック。

.dartという接尾辞のファイルを親ファイルとして、子ファイルとなるファイルの接尾辞を;(セミコロン)区切りで設定する。

これで、.freezed.dartファイルがネストされて表示され、ファイルツリーがすっきり見やすくなった！

VSCodeでの設定手順

VSCodeでは、エディタの基本設定用のJSONであるsettings.jsonに以下の設定を記述する。

settings.jsonは、command + shift + Pでコマンドパレットを開き、opensettingsと入力すればPreferences: Open Settings(JSON)と出てくるのでそれを選択する。

"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
    "*.dart": "$(capture).freezed.dart",
}

そうすると、VSCodeでもファイルのネストが反映された！

さらなるネスティングを目指して

Flutterプロジェクトでは.freezed.dartがネスト化対象の代表例だが、他にも.packagesだったり.metadata、pubspec.lockなどもその対象になりうるだろう。

そんなネスト対象の例をGistで紹介している方がいるので、ここでも紹介しておく。ぜひ参考にしてほしい。

Nest files in Flutter projects on VSCode, inspired from https://github.com/antfu/vscode-file-nesting-config

Nest files in Flutter projects on VSCode, inspired from https://github.com/antfu/vscode-file-nesting-config - settings.json

gist.github.com

参考

• Jetbrainの公式ドキュメント

  • https://www.jetbrains.com/help/idea/file-nesting-dialog.html

• VSCodeの公式ドキュメント

  • https://code.visualstudio.com/updates/v1_64#_explorer-file-nesting