Skip to content
Atom package to rename `index.js` files to their parent directory names
Branch: master
Clone or download
Latest commit be9a2cb Jan 12, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
img Add new images, update README Mar 25, 2016
lib fixed regex to match `index.` and optionally any other Nov 8, 2016
.gitignore Nice Index initial commit Feb 21, 2016
CHANGELOG.md Update CHANGELOG Jul 13, 2016
LICENSE.md Nice Index initial commit Feb 21, 2016
README.md Add note to README Jan 12, 2018
package.json Prepare 1.0.5 release Nov 12, 2016

README.md

Atom Nice Index

An Atom package that automatically renames index.* files to their parent directory name.

about/index.html  -> /about
Home/index.jsx    -> /Home
server/index.js   -> /server

NOTE: This project is seeking maintainers.

As the primary author, I no longer use Atom (switched to VS Code), and so it no longer makes sense for me to maintain this project. If anyone would like to inherit this project, please let me know!

Why?

It's common practice, in web development, to give your directories semantically-relevant names, but to give the primary file the name of index.js, index.html, index.css, etc.

Web servers like apache will, by default, automatically try and serve index.html or index.php files when you request a directory. So, http://www.google.com/ will attempt to serve http://www.google.com/index.html. This allows us to hide the file extension from the user, and provide nicer URLs.

In Node.js and ES2015 Javascript imports, this same convention was adopted. You can require or import a path like /components/Home, and it will attempt to find an index.* file within it.

The end result is that a lot of projects are packed with files like index.js, index.html, index.css, etc. Here's an example structure from a React app:

.
├── components
|   ├── Home
|   |   ├── index.jsx
|   |   └── index.css
|   ├── Header
|   |   ├── index.jsx
|   |   └── index.css
|   └── Footer
|   |   ├── index.jsx
|   |   └── index.css
├── server
|   └── index.js
└── index.html

In Atom, this means your files will look something like this:

Sample pane files

This is not good! All the filenames are the same. Atom tries to be helpful by showing the directory name after the filename, but when you have more than a couple of files open, that stuff all gets hidden.

There must be a better way...

Wouldn't it be nicer if, for all index.* files, we just showed the parent directory? Something like:

Better pane files

This way, we get the best of both worlds. We get semantically meaningful tab names in Atom while developing, and we can still reap all the benefits of using the index.* convention.

Acknowledgements

JP Richardson's atom-rename-tabs gave me the inspiration (and a starter template) for this codebase.

Install

apm install nice-index

or go to SettingsInstallSearch and search for nice-index.

Icons

Because we're hiding the file extensions (index.jsx vs index.css, for example), you'll probably want to ensure you use an Atom UI theme that has custom icons. I recommend Seti UI.

Known Issues

Because we're hijacking the tab-naming, there are a few small bugs I have not yet had the chance to fix. For example, when renaming a file, you'll need to close and reopen the file for it to display its new title.

Will happily accept PRs for this issue :)

License

MIT

You can’t perform that action at this time.