Edit files as if concatenated as one -- Do any IDEs or text editors have this feature?

Question

Background: I am working with Angular (but my problem is not particular to any language or framework). In Angular, each component requires four separate files. So, we often find ourselves with 40+ files open. But, most of these files can be tiny, less than 20 lines each.

Many IDEs allow you to open your files in multiple windows. Each window can have a different panel, and each panel can have different tabs. This is great, but honestly, still isn't enough.

What I want: In addition to windows, panels, and tabs, I'd like to add another level of organization.

I speculate this has probably existed for decades, but I just don't know what it's called . At the very least, I speculate this has existed at least since Angular was a thing.

For example, here is a screenshot of VSCode with four files open across four panels. (Code taken from Angular dynamic component tutorial):

And here is a quick mockup showing what I'm looking for. Four files are open, but the three shortest ones are "concatenated" into one editor. Arrow-key down from the bottom of one file will bring you to the first line of the next file.

Notably, these files are not actually concatenated on-disk.

TLDR: What text editor can allow me to edit multiple files as if they were concatenated, as in the mockup above?

Answer 1

If the files stay as separate windows/tabs, the file editor would have to shrink each tab to a minimal height, and then tile them vertically. If any editor can do it, I suspect it would be emacs or vim. You might also be able to do it by opening separate editor windows and using a tiling window manager.

We can achieve a similar effect with some text editing magic. It would be something like:

• Add a header to each file consisting of a unique separator (eg # === magic separator === filename my_file.js === )
• Use cat to combine all the files into one file
• Edit this one file
• When done, use the separator to break them up and put the text back into the original files

You could easily write some scripts for combining and splitting so you can do it quickly. You can also set up a background script that automatically runs the splitter as you edit the combined file. However, the combined file would essentially be a new file, so you could not view changes on it with git, and VS Code's CodeLens/Inline blame wouldn't work.

One option would be to develop your codebase with the combined files checked in to VCS, and then only have the splitter script as part of your "build" step. So you would make your changes, run ./build.sh which splits the files into some temp directory, and then run your application from there.

Lastly, and I hate to be snide, but the fact is that this problem is best solved by avoiding poorly designed frameworks that do not consider developer ergonomics. Many other languages give the developer much freedom and many tools to organize their code as they wish, rather than imposing constraints like requiring many small components to be in separate files. Java for example also had a similar problem (dunno if more recent versions fixed it) - you can only have one class per file, which creates a huge mess if you like having many small files. C# does not have this limitation and as a result C# codebases can be much tidier than Java codebases.