How to navigate through file tree in VS Code using vscodevim?

Question

I am trying to improve my skill with using the vim extension on vscode, and I would like to ask if it is possible to navigate through the file tree with it.

Here is what I would want to do:

Jump from my window to file tree.
Move up/down
Open a specific file (eg. search index.jsx and open it)
Delete a file
Add a new file/folder in the tree
Open a file that has a specific class/function

If there is a better document for this, I would be glad to explore more :)

How are you trying to improve your vim skills, if you use vscode? I thought I need to use vim to improve vim skills. — Draco Ater
– Draco Ater, Commented Jul 15, 2021 at 11:26
I love using vim while programming, It is easy for me to navigate through my code and edit. It has many helpful functions that I cannot get in other editors and it is customizable. So, that's why I want to learn more about navigating through file trees. — Egidius
– Egidius, Commented Jul 15, 2021 at 11:37
I am confused. You say, you use VS Code. How is it connected to vim? — Draco Ater
– Draco Ater, Commented Jul 15, 2021 at 11:42
VScode / View / Command Palette.. is an essential entry. You can learn the editor features by typing Help: Welcome and find Learn section which helps solve most of your concerns. — leaf
– leaf, Commented Jul 15, 2021 at 11:53
@DracoAter There is a vim extension for vscode that is like an emulator and you have the same keybinds etc — Costa
– Costa, Commented Jul 15, 2021 at 13:47

Vlad Mikheenko · Accepted Answer · 2021-07-15 16:46:56Z

2

VSCodeVim provides only text editing and navigation commands like }, dd, p and so on. Moreover, None of the native Visual Studio Code ctrl (e.g. ctrl+f, ctrl+v) commands work. The only way to use VSCode commands is turn off vim extension: ctrl + P > Toggle Vim Mode.

answered Jul 15, 2021 at 16:46

Vlad Mikheenko

2201 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

ofthelit Over a year ago

This is not entirely correct. The vim extension allows you to disable specific shortcuts. They will be handled by VSCode instead.

Heliton Martins Dec 4, 2024 at 18:21

This is actually incorrect. VSCodeVim provides settings like vim.handleKeys and vim.useCtrlKeys to control that behavior.

ofthelit · Accepted Answer · 2024-08-07 12:52:08Z

1. Jump from my window to file tree.

Add into the Visual Studio Code settings.json some of the following configuration:

{
  "vim.leader": "<space>",
  "vim.normalModeKeyBindings": [
    {
      "before": ["<leader>", "p"],
      "commands": ["workbench.view.explorer"]
    },
    {
      "before": ["<leader>", "P"],
      "commands": ["workbench.files.action.showActiveFileInExplorer"]
    }
  ],

  "vim.handleKeys": {
    "<C-p>": false,
    "<C-c>": false,
    "<C-v>": false,
    "<C-x>": false,
    "<C-a>": false,
    "<C-w>": false,
    "<C-y>": false,
    "<C-f>": false
  },
  "vim.useSystemClipboard": true,
}

Space+p will focus the file tree.
Space+Shift+P will focus on the current file inside the tree.

2. Move up/down

Use the vim navigation keys: L or Enter will open the file.

3. Open a specific file (eg. search index.jsx and open it)

I suggest to use the built-in Ctrl+P feature from Visual Studio Code.

4. Delete a file

Use the delete key on your keyboard.

5. Add a new file/folder in the tree

Edit the VS Code keybindings.json or set your own in the vim config.

6. Open a file that has a specific class/function

Check out the documentation.

Collectives™ on Stack Overflow

How to navigate through file tree in VS Code using vscodevim?

2 Answers 2

2 Comments

1. Jump from my window to file tree.

2. Move up/down

3. Open a specific file (eg. search index.jsx and open it)

4. Delete a file

5. Add a new file/folder in the tree

6. Open a file that has a specific class/function

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1. Jump from my window to file tree.

2. Move up/down

3. Open a specific file (eg. search index.jsx and open it)

4. Delete a file

5. Add a new file/folder in the tree

6. Open a file that has a specific class/function

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related