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:

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: