[Question] Order by filetype



is it possible to order files in the sidebar by filetype?

I already know that the order often results from the operating system you use.
But I’ve to switch very often between an Windows and Mac operating system.

So it would be nice, if I can setup/modify the sort/order-behaviour of the atom-sidebar.


You can traverse the tree view’s DOM on atom load, and do something like this. Haven’t tested and probably doesn’t work right away, but it’s a start: (put in init.coffee)

{extname} = require 'path'
workspaceView = atom.views.getView atom.workspace

# function that does the actual sorting
sortTree = (dirElement) ->
  entriesElement = dirElement.querySelector '.entries'
  entries = entriesElement.children
  fileEntries = []
  for entry in entries
    if entry.classList.contains 'directory'
      sortTree entry
    fileEntries.push entry
  fileEntries.sort (a, b) ->
    extA = extname a.querySelector('.name').getAttribute 'data-path'
    extB = extname b.querySelector('.name').getAttribute 'data-path'
    if extA is extB
      pathA > pathB
      extA > extB
  for fileEntry in fileEntries
    entriesElement.removeChild fileEntry
    entriesElement.appendChild fileEntry

# register command to trigger sorting
atom.commands.add 'atom-workspace', 'tree-view:sort-by-ext', ->
  rootDirs = document.querySelectorAll '.tree-view-resizer .tree-view > .entry'
  for dir in rootDirs
    sortTree dir

# dispatch the command at startup
atom.commands.dispatch workspaceView, 'tree-view:sort-by-ext'

# dispatch the command on several tree view commands, like `tree-view:add-file` etc:
atom.commands.add 'atom-workspace', 'tree-view:add-file', ->
  atom.commands.dispatch workspaceView, 'tree-view:sort-by-ext'
# etc. for other tree view commands

EDIT Updated the code. It works now :slight_smile: So the only thing you need to do is catch every tree view command that should trigger a sorting update. (Hint: there are a lot)

EDIT 2 Updated again to sort alphabetically when the extensions are the same.


I think that there have been enough requests for custom sorting order in the tree view that someone should build a PR to add a sorting strategy which can then be extended, perhaps even through the services API.


Tried using this but get an error:

pathA is not defined

Any thoughts? I’m running Atom 1.3.1 on a Mac, no other code in my init.coffee file.


I haven’t used Atom in a while so I don’t know if the script will still work anyway, but it looks like pathA > pathB should actually be a > b. Hope this helps :smile:


Thanks, but unfortunately doesn’t seem to work. If you have 2 seconds to explore further, would be awesome. No biggie.


Came upon this today, changing all instances of PathA and PathB to a and b in olmokramers code works