Overwhelmed by repeated filenames for routes, controllers. templates, etc in JavaScript

I'm starting to work seriously with Ember, but I think I would have the same problem in other structured frameworks.

When multiple files are opened in my editor, I waste a lot of time figuring out which file I must edit. The same filenames are repeated over and over. For example, I have index.js or edit.js almost in every route, subroute, controller, nested controller, for all the modules!

In my editor, the open files I see are:

 - index.js
 - edit.js
 - index.js
 - edit.js
 - index.js
 - edit.js
 - index.js
 - edit.js

Because the diacritic part of the name is in its path, not shown in the IDE

 - routes/clients/index.js
 - routes/clients/edit.js
 - routes/contacts/index.js
 - routes/contacts/edit.js
 - controllers/clients/index.js
 - controllers/clients/edit.js
 - controllers/contacts/index.js
 - controllers/contacts/edit.js

I usually work with Coda and BBEdit, for Mac. Fortunately, I use Perl for my backend, so the Perl filetype shows a different color and icon in the IDEs. I wonder how node.js developers can live. :-D

I also tried Sublime, Brakets, Atom, etc, Some of them put the open filenames on upper tabs, other put them in the margin, but I have no clue of what is open.

At least, BBEdit puts a mark in the main filetree to show if a file is open.

Maybe I should rename everything like client_controller_index.js, but it is long and complicates reusing things. Ember is very opinionated, the same than CLI automation and even dashes have a meaning.

Currently I am using the naming criteria learned in tutorials. Is it is not a good practice when things grow up?

Any recomendation on filenaming, structures or IDEs?

Thank you in advance.