File nesting dialog
Use this dialog to configure presentation of files with the same names but different suffixes.
Such bunches of files may appear in framework-specific projects, for example, if you use Angular.
![Angular application: a bunch of app files with various extensions Angular application: a bunch of app files with various extensions](https://resources.jetbrains.com/help/img/idea/2022.2/ws_file_nesting_example_angular_material.png)
Also consider compilation of TypeScript into JavaScript with source maps generated:
![A typescript file leftpad.ts with a compiled JavaScript file leftpad.js
and a generated source map file leftpad.js.map shown at the same level A typescript file leftpad.ts with a compiled JavaScript file leftpad.js
and a generated source map file leftpad.js.map shown at the same level](https://resources.jetbrains.com/help/img/idea/2022.2/ws_file_nesting_example_ts_transpilation_plain.png)
PhpStorm can present such file bunches as plain structures or show parent files as folders (nests) with their child files inside.
PhpStorm provides a set of predefined rules for file nesting. You can edit these rules as well as define your own custom ones. To configure file nesting, specify the suffixes of parent files and the suffixes of the child files.
Item | Shortcut | Description |
---|---|---|
Show files with the same names as nested |
| |
Alt+Insert | Add a new row and specify the "parent" file suffix and the matching "child" file suffix. List all patterns explicitly without using wildcards or regular expressions. | |
Alt+Delete | Remove the selected rule from the list. | |
Reset to Default | Discard all your custom patterns and reload the default rules. |