Vscode: Support VIM style navigation in trees like the explorer

[ppowalla]

• VSCode Version: 1.4
• OS Version: Windows 10

I like Visual Studio Code and am thinking about replacing VIM. But one thing is still missing that is very important for me: navigating in the explorer with NERDTree keybindings. Is there a plan to make the keybindings in the explorer configurable? This would be great!

Thanks!

[dbaeumer]

Assuming he is talking about short cuts to navigate the tree.

[ppowalla]

Well, not exactly short cuts. I would like to change the default keybindings in the tree like I can do in the editor window. So to move down I would like to use "j" and for up "k". Simply making those commands available in the keybindings-file.

[newres]

Something like a "inExplorerMode" to add to the when clause when defining keybindings would be helpful to implement this, similarly to what exists for the debug mode (inDebugMode).

[bpasero]

https://github.com/Microsoft/vscode/issues/4557

[bpasero]

@johnfn can you confirm that this is only about navigating in the explorer? My understanding is that for VIM the arrow keys map 1 to 1 like this:

• i : arrow up
• k : arrow down
• j: arrow left
• l: arrow right

How about other keybindings I see on http://usevim.com/2012/07/18/nerdtree/ (e.g. open a file, open a file to the side?)

And further more the most important question: Would VIM users expect this across any tree or only in the explorer?

[dsifford]

@bpasero I'd like it to be across all "trees".. In atom, I had the command palate and autocomplete menu navigation mapped to <C-h>, <C-j>, <C-k>, <C-l> when they were within scope and that worked nicely for me.

[bpasero]

@dsifford I see, what does <C-h> mean compared to just typing h?

[dsifford]

@bpasero Sorry, that was me trying to sound like a smartypants.

The control key was necessary within the scope of the command palate or the autocomplete list because I still needed to be able to use h,j,k,l for normal typing.

And I suppose for the sake of correctness, I should state that all I really needed to map for both the command palate and the autocomplete list was ctrl-j and ctrl-k for up/down movement.

The only context that needed left/right movement that I can recall in atom was the file tree.

(Hope that answers your question!)

[johnfn]

@bpasero Yeah, not only would we like to rebind navigation in a tree, but also at the very least we'd like to be able to trigger the same action as a click. "open selected file in current tab" and "open selected file in any tab passed in as an argument" would be ideal!

[bpasero]

@dsifford I see, thanks

@johnfn for that please take a look at https://github.com/Microsoft/vscode/issues/4557#issuecomment-276960041 for the new commands I added for our future release. they inlcude commands for opening and opening side by side.

All in all it is a bit ugly that for each tree we have to introduce commands. That is, my solution in #4557 is only about the explorer ("open editors" and "files explorer").

[bpasero]

@dsifford @johnfn would you expect more powerful commands in the tree, e.g. being able to type "2j" to execute the "j" command 2 times on the tree, or is it really just about 1 keybinding to do 1 action in the tree?

[johnfn]

With regards to 2j, couldn't we just run the command 2 times?

The commands in your comment look fine to me.

[bpasero]

@johnfn my understanding is that for motions commands are not enough. you need a way from your extension to detect that a motion is started within the tree and then be able to override what happens when j is pressed to execute the navigateXY command multiple times.

Again, are motions in trees typical for VIM users?

[bpasero]

Current thinking is to introduce commands (that the VI extension can override as needed) for tree and list navigation that is used by any tree and list throughout the Code UI where it applies.

The commands are:

|Command|Keybinding|Arguments|
|---|---|---|
|list.focusUp|Up Arrow|number (of elements to go up)|
|list.focusDown|Down Arrow|number (of elements to go down)|
|list.focusFirst|Home|no|
|list.focusLast|End|no|
|list.focusPageDown|Page Down|no|
|list.focusPageUp|Page Up|no|
|list.collapse|Left Arrow|no|
|list.expand|Right Arrow|no|
|list.clear|Escape|no|
|list.select|Enter|no|
|list.toggleExpand|Space|no|

@dsifford @johnfn Feedback welcome.

[bpasero]

I adopted the commands in all tree and lists throughout the workbench 👍

[lucastheisen]

I have really grown accustomed to split open (s in nerdtree). Also, switching between the editor and the tree (Ctrl+w, but I remap it to tab), change directory (cd), and create/rename/delete (m) are really handy. Any chance we can get commands for them as well?

[ppowalla]

Hi guys,

the configurable explorer is very nice :)

Still I am missing a few things to configure:

• focus parent node of current selected element (p in NerdTree)
• when I am in the left most editor group I would like use the same keybinding to move to the explorer as I would use to navigate from a right editor group to the one next to it on the left side (in my case ctrl-h). Maybe there is already a context I could use to figure out if I am in the left most editor group?
• focus left/right editor (tab) possible via shortcut?

Thanks anyway for bringing in the functionality into the explorer window!

Bye

[bpasero]

Each individual thing missing in VIM should be reported as individual issue (best on the VIM repository and then linked to an issue here) and then we can look into each individual issue individually.

[ppowalla]

@bpasero: I do not think my mentioned points are VIM related:

focus parent node of current selected element (p in NerdTree) => there is no way (or at least I have not found it) to execute such a command like "select parent node", so this is something missing in general.

focus left/right editor (tab) possible via shortcut? => I have not found any command that makes it possible to cycle through editors (tabs) to the right/left side.

when I am in the left most editor group I would like use the same keybinding to move to the explorer as I would use to navigate from a right editor group to the one next to it on the left side (in my case ctrl-h). Maybe there is already a context I could use to figure out if I am in the left most editor group? => I think this is is something difficult to achieve, but I would like to have a context telling me what is the current editor that is focused, like "editorXFocus" where "X" would be the index (0, 1, 2, ...)

Bye

[ppowalla]

I have found the correct command to cycle through the editors "nextEditor"/"previousEditor".

[lucastheisen]

@bpasero , I also think my requests are not VIM _related_ so much as _VIM NerdTREE inspired_. They would be additional commands needed in your tree. Specifically:

Command | Keybinding | Arguments | Explanation
------------ | ------------- | ------------ | ----------
Split open | ctrls| no | Opens the selected item in a new split editor
Modify | ctrlm| ? | Provides the ability to copy/rename/delete the selected item
Change directory | ctrlc+d| no | Changes the directory such that the root of the explorer is what was selected

Once these were added, then I could ask the VIM guys to support a basic vim like mapping to them...

[ppowalla]

@lucastheisen: for the "modify" shortcut you could also use the command combinations:

"m a" => add a file
"m f" => add folder
"m m" => move file
"m d" => delete file

those shortcuts are also working in NERDTree with the difference, that NERDTree shows a menu on pressing the first "m" and then allows further selection via the second letter. But I think that the inbetween menu is not necessary and thus these shortcuts should also be fine.

To make more comfortable for you, you could also map:

"ctrl+m a" => add a file
"ctrl+m f" => add folder
"ctrl+m m" => move file
"ctrl+m d" => delete file

For the "change directory" feature: I think the concept of the explorer in VSC is different from a standard file tree. It is more project based where you can open exactly one folder and show everything below it. Therefore I am not sure if such a mapping would make sense. Still decision is on their side :)

[lucastheisen]

@ppowalla, thank you... Any idea on the _split open_... that's actually my favorite feature... (that and using tab in command mode to switch between editors _including_ the tree)...

[kaiwood]

@lucastheisen:

{ "key": "ctrl+enter",            "command": "explorer.openToSide",
                                     "when": "explorerViewletFocus && explorerViewletVisible" },

[dsifford]

@bpasero Chiming back here with some thoughts after having some time to kick the tires....

Preface: I'm a NERDTree user, so I've got those commands baked into my muscle memory.

General Comment

Great improvement over what was previously available. Really awesome job. 👍 I feel like I have everything I need to be able to navigate completion menus and the command palette so all good with respect to those two things.

What I'm still missing for the explorer

• The ability to jump to the first child and last child of the current tree. I was under the impression that list.focusPageUp and list.focusPageDown would do that, but instead functions almost exactly like list.focusUp and list.focusDown (if the entire list is visible, which for me is a majority of the time).
• The ability to jump to the parent directory of the current tree (jump to root is already covered with list.focusUp).
• The ability to programmatically find a file or directory in the current tree. Plugins like VSCodeVim might use this to add /<search-down-pattern><CR> and ?<search-up-pattern><CR> to jump to files/directories matching a pattern.
• The ability to open a selected file in "preview mode". In other words, hit a key to open the file but still leave focus in the explorer. If another file is opened in preview mode, open it in the place of the last previewed file.
• Quickly show/hide hidden files. (not very important for me, but putting this here for the sake of completeness) Edit: This might actually already exist. If it does, disregard.

Some of the above things were already mentioned by @ppowalla and I agree that they aren't really in the same scope as VSCodeVim because I'm not sure the API even exists currently to do these things.

Anyway, that's all for now. Thanks again for your hard work @bpasero! 😄

[bpasero]

@dsifford good list, I suggest to convert these items into individual feature requests each. That also improves the chance that someone might chime in to provide a PR.

Some feedback:

• I think we can easily introduce new commands to navigate to first/last child
• list.collapse when pressed on a file brings you to the direct parent (will not work for folders though unless the folder is collapsed)
• searching within the explorer has many duplicates already and is non trivial
• allowing to open a file without loosing focus and in preview mode should also be possible via a new command. however the notion of preview or not is a explorer specific thing and not list/tree specific. maybe we could have a generic command list.selectKeepFocus (a bit ugly)
• this also seems like a specific explorer command, not a generic tree command

[dsifford]

@bpasero

I think we can easily introduce new commands to navigate to first/last child

I'll open an issue now for this.

list.collapse when pressed on a file brings you to the direct parent (will not work for folders though unless the folder is collapsed)

Aha! This is good enough for me. Consider that one covered! Thanks for the tip.

allowing to open a file without loosing focus and in preview mode should also be possible via a new command. however the notion of preview or not is a explorer specific thing and not list/tree specific. maybe we could have a generic command list.selectKeepFocus (a bit ugly)

Got it. I can open an issue for this one too if you'd like.

this also seems like a specific explorer command, not a generic tree command

That one is super low on my priority list, so we can let that simmer for now until someone else decides it's something they've gotta have.