Organizing File Trees with File Nesting in Android Studio/VSCode
Introduction
In my daily Flutter development, I often use the freezed package.
The automatically generated .freezed.dart files clutter the directory, making it difficult to navigate.
This issue is not limited to Flutter development. Any development environment with auto-generated files can become cluttered with files that are necessary but not frequently viewed.
Today, I will introduce the steps to set up file nesting in Android Studio and VSCode to keep your file tree clean and organized.
Setting up in Android Studio
Let’s start with the setup in Android Studio.
For example, consider the following file tree. As you can see, the .freezed.dart files are placed under each model file.
First, click the settings icon in the top right corner.
From the list of options, click File Nesting....
Set the suffix of the parent file as .dart, and specify the suffix of the child files separated by a ; (semicolon).
Now, the .freezed.dart files are nested, and the file tree is clean and easier to read!
Setting up in VSCode
In VSCode, you need to add the following settings to the settings.json file, which is used for basic editor settings.
You can open settings.json by opening the command palette with command + shift + P, typing opensettings, and selecting Preferences: Open Settings(JSON).
"explorer.fileNesting.enabled": true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
"*.dart": "$(capture).freezed.dart",
}This will apply file nesting in VSCode as well!
Further Nesting
In a Flutter project, .freezed.dart is a representative example of a file that can be nested, but there are other files like .packages, .metadata, and pubspec.lock that can also be nested.
Here’s a Gist with more examples of files that can be nested, which I highly recommend checking out:
References
-
Official JetBrains documentation
-
Official VSCode documentation
