Iam using Webstorm for a project that uses coffeescript and Sass. In the navigation bar, I see coffeescript files along with the compiled js and map files. In the same way I see css files with the scss files. I want to be able to fold js and map files inside the corresponding coffee file for ease of navigation. I am not sure how to fix the settings for this. I want the same for scss and css files.
You cannot do this manually (i.e. any files you want at any time).
It's done automatically by File Watcher plugin. So .. if your *.coffee files are compiled in WebStorm by using File Watcher .. then it should be working/done automatically.
If you have File Watcher already set up -- delete intermediate files (.js/.map) and force run that file watcher.
Such grouping works if those extra files were generated after running File Watcher. IDE checks for new files and compares them with file watcher settings (Output paths to refresh field, I believe) -- based on that it creates such folding.
External file watcher (i.e. grunt-contrib-watch) is executed autonomous of IDE's File Watcher .. therefore such files will not be "grouped".
Related tickets (those few that I'm aware of) that ask about additional settings to be able to create such nesting/grouping manually:
UPDATE 2017/08/10:
As of 2016.3.x version such grouping/nesting is no longer relies on File Watchers -- it has special hard-coded rules for most common scenarios.
As of 2017.2 such rules are editable and available via Project View panel settings.