ember.js: Quest: Document Solutions to "Titlebar Problem"
RFC 143 included discussion around properly configuring text editors so that it’s easy for developers to distinguish filenames within a typical Ember app, even though those names necessarily have some repetition. The canonical example is that files like these:
src/components/date-picker/component.js
src/components/list-paginator/component.js
should be readily distinguishable despite sharing a common ending.
This quest issue exists so that people can chime in on what (if anything) is required to make all the popular editors do this nicely.
Editors
- Atom
- Brackets
- Chocolat
- Chrome Dev Tools
- Emacs
- JetBrains
- Sublime text
- Vim
- Visual Studio Code
Please suggest others as long as you actually use them to work on Ember apps.
Solutions
Atom (@locks)
No configuration required:
Brackets (@locks)
No configuration required:
Emacs
The out-of-the-box behavior since Emacs 24.4 for the two example files is that they appear as component.js<date-picker> and component.js<list-paginator>. So no configuration is required.
To see all the options for customizing this behavior, see M-x customize-group uniquify.
Visual Studio Code (taken from @tomdale comment on RFC 143)
No configuration required:
## JetBrains family (PHPStorm, WebStorm, IntelliJ, RubyMine)
For the JetBrains family of IDEs make sure to uncheck the “Small labels in editor tabs” setting under Preferences > Appearance & Behavior > Appearance:
This will add the parent directory to the tab label (as soon as there is ambiguity):
Tested with PHPStorm 2016, but should probably apply to the whole familiy of IDEs (WebStorm, IntelliJ, RubyMine etc.)
Sublime Text (@locks)
No configuration required:
Chocolat (@locks)
No configuration required:
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 1
- Comments: 22 (13 by maintainers)
While there a few existing vim plugins to modify the way tabs are displayed, I didn’t see any that could easily be configured to match the examples from the other editors here but I also didn’t look very deeply into them so it does probably exist 😛 .
Anyway, it’s straightforward to modify your tabline settings in vim to get something nice like the others here so I threw together a plugin that does it for you that people can use (or copy code from and make into their own special snowflake tabs).
I’m not sure I would consider it solved in an editor that only did it when there is a name conflict among the files open. I think it would be nice to be able to always show the parent directory.
Here’s what it looks like in the chrome sources tab:
For the JetBrains family of IDEs make sure to uncheck the “Small labels in editor tabs” setting under
Preferences > Appearance & Behavior > Appearance:This will add the parent directory to the tab label (as soon as there is ambiguity):
Tested with PHPStorm 2016, but should probably apply to the whole familiy of IDEs (WebStorm, IntelliJ, RubyMine etc.)
@rtm
typeis not meaningless when distinguishing between a component, a model, and a route that share a commonname.I work with Sublime Text 3 on Mac OS X and it shows the folder name in both sidebar and tabs if two files with the same filename are open.
You might consider adding the IntelliJ IDE Editor suite to this list (WebStorm, PyCharm, RubyMine, etc). I know some full stack engineers, even work with a few, who prefer to use these IDEs.Addressed by @simonihmig.
Whereas most of these techniques do solve the basic problem, it remains the case that substantial title bar real estate is being wasted by the meaningless and semantically vacuous “component” part of the title.