okaryo.log

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

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

    #Android Studio#VSCode#エディタ#IDE

はじめに

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

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

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

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

Android Studioでの設定手順

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

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

Android Studio FileTree Example

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

Android Studio FileNestingSelection

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

Android Studio FileNestingField

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

Android Studio Result

これで、.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でもファイルのネストが反映された!

VSCode Result

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

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

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

参考


関連記事
最新記事
プロモーション

This site uses Google Analytics.