Spacemacs/Space-Vim Config for VSCode

> The space way

> Leader key

Using space key as the leader is a very popular way of editing, navigation and commanding. There is never an easy way to get used to new shortcuts, but trust me, you would definitely like it once you use it.

> Sticky key

Think about how you invoke commands in VSCode before. When you want to call the command-palette, you need to put your left hand’s two fingers on Ctrl + Shift key or Command + Shift key and press p. And note that it’s a key chord combination when you actually press these keys.

This looks so stupid when you compare it with just Space Space in Vim’s normal or visual mode. And by saying Space Space, it’s a sticky key bindings which means you just type space key twice in sequence. And you can just set your hands as the default typing position shown in this picture.

> Prefix key

Well, now you probably get the point of using space key. But there is more of it.

Since sticky keys are just key sequences, you can cluster a lot of similar commands to a prefix like space f(file related commands). For example, space f f go to the explorer, space f ssave file and space f Ssave all. In this case, you won’t mess up with these keys because they have the same prefix space f.

> The hybrid editing mode

> Insert mode

Spacemacs has a hybrid mode that takes the normal and visual modes’ key bindings from Vim while still using the general Emacs key bindings in insert mode. To be honest, it’s super smart way of editing.

The Unix key bindings (C-a->home, C-e->end, C-b->back, C-f->forward, C-n->next line, C-p->last line) work in almost every Mac application. You probably never find out they work out of box in your Mac or Linux, but many of your guys don’t know about it.

So, why the hell people want to use Unix key bindings in their machines?

There are many reasons:

1. Your Mac does not has the home, end key like a full keyboard.
2. It’s a much faster way for navigation once you get used to it
3. Be more consistent about the key bindings. They work in terminal, intellij IDEA, even Wechat. So why not use it everywhere.

> Normal & visual mode

As for the normal and visual mode, They are pretty much the same. But they can do much more now in space way.

Note: The leader key is space

Key	Description
leader space	show commands
leader b b	quick open (see your opened files)
leader f f	go the explorer
leader f s	save file
leader f S	save all
leader =	beautify file
leader w [lhjk]	navigate window
leader w v	split vertically
C-g (Optional)	ESC

> To use it

1. Add the following configuration in your VSCode’s User Setting (You can find out how to get to the User Setting over here).

{
  // Vim setting
  "vim.useSystemClipboard": true,
  "vim.easymotion": false,
  "vim.easymotionMarkerFontFamily": "Operator Mono Lig, Ubuntu Mono, Menlo, Monaco, 'Courier New', monospace",
  "vim.easymotionMarkerFontSize": "14",
  "vim.handleKeys": {
    "<C-n>": false,
    "<C-p>": false,
    "<C-a>": false,
    "<C-e>": false
  },
  "vim.leader": "<space>",
  "vim.insertModeKeyBindings": [
    {
      "before": ["<C-f>"],
      "after": ["<right>"]
    },
    {
      "before": ["<C-b>"],
      "after": ["<left>"]
    },
    {
      "before": ["<C-e>"],
      "commands": [
        {
          "command": "cursorEnd",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-a>"],
      "commands": [
        {
          "command": "cursorHome",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-d>"],
      "commands": [
        {
          "command": "deleteRight",
          "when": "editorTextFocus && !editorReadonly"
        }
      ]
    }
  ],
  "vim.normalModeKeyBindingsNonRecursive": [
    {
      "before": ["g", "r"],
      "commands": [
        {
          "command": "editor.action.referenceSearch.trigger",
          "when": "editorHasReferenceProvider && editorTextFocus && !inReferenceSearchEditor && !isInEmbeddedEditor"
        }
      ]
    },
    {
      "before": ["<C-a>"],
      "commands": [
        {
          "command": "cursorHome",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-e>"],
      "commands": [
        {
          "command": "cursorEnd",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-k>"],
      "after": ["D"]
    },
    {
      "before": ["<leader>", "<space>"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.showCommands",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "'"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.terminal.toggleTerminal",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "1"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusFirstEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "2"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusSecondEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "3"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusThirdEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "t", "t"],
      "after": [],
      "commands": [
        {
          "command": "editor.debug.action.toggleBreakpoint",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "d", "d"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.debug.start",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "r", "r"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.debug.run",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "b"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<CR>"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "d"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeActiveEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "n"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.nextEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.previousEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "e", "l"],
      "after": [],
      "commands": [
        {
          "command": "workbench.actions.view.problems",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "e"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openGlobalSettings",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.openFile",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "r"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openRecent",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.save",
          "args": []
        }
      ]
    },
    // save file
    {
      "before": ["<leader>", "f", "S"],
      "commands": [
        {
          "command": "workbench.action.files.saveAll"
        }
      ]
    },
    {
      "before": ["<leader>", "f", "t"],
      "after": [],
      "commands": [
        {
          "command": "workbench.view.explorer",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "y"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.copyPathOfActiveFile",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "g", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.view.scm",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "j", "="],
      "after": [],
      "commands": [
        {
          "command": "editor.action.formatDocument",
          "args": []
        }
      ]
    },
    // beautify files
    {
      "before": ["<leader>", "="],
      "commands": [
        {
          "command": "editor.action.formatDocument"
        }
      ]
    },
    {
      "before": ["<leader>", "p", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "p", "l"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.openFolder",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "p", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openRecent",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "r"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.reloadWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "q"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "e"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.rename",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "j"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.gotoSymbol",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.findInFiles",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "P"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.findInFilesWithSelectedText",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "F"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleFullScreen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "m"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleMenuBar",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.selectTheme",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "t"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleActivityBarVisibility",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "v"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.smartSelect.grow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "V"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.smartSelect.shrink",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "w", "w"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusNextGroup",
          "args": []
        }
      ]
    },
    // navigation
    {
      "before": ["leader", "w", "l"],
      "commands": [
        {
          "command": "extension.vim_navigateRight",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "h"],
      "commands": [
        {
          "command": "extension.vim_navigateLeft",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "j"],
      "commands": [
        {
          "command": "extension.vim_navigateDown",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "k"],
      "commands": [
        {
          "command": "extension.vim_navigateUp",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "v"],
      "commands": [
        {
          "command": "workbench.action.splitEditor",
          "key": "cmd+\\"
        }
      ]
    },
    {
      "before": ["<leader>", "w", "W"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusPreviousGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "w", "m"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.maximizeEditor",
          "args": []
        }
      ]
    }
  ],
  "vim.visualModeKeyBindingsNonRecursive": [
    {
      "before": ["g", "r"],
      "commands": [
        {
          "command": "editor.action.referenceSearch.trigger",
          "when": "editorHasReferenceProvider && editorTextFocus && !inReferenceSearchEditor && !isInEmbeddedEditor"
        }
      ]
    },
    {
      "before": ["<backspace>"],
      "commands": [
        {
          "command": "deleteLeft",
          "when": "editorTextFocus && !editorReadonly"
        }
      ]
    },
    {
      "before": ["<C-a>"],
      "commands": [
        {
          "command": "cursorHome",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-e>"],
      "commands": [
        {
          "command": "cursorEnd",
          "when": "editorTextFocus"
        }
      ]
    },
    {
      "before": ["<C-k>"],
      "after": ["D"]
    },
    {
      "before": ["<leader>", "<space>"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.showCommands",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "'"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.terminal.toggleTerminal",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "1"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusFirstEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "2"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusSecondEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "3"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusThirdEditorGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "b"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<CR>"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "d"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeActiveEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "n"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.nextEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "b", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.previousEditor",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "e", "l"],
      "after": [],
      "commands": [
        {
          "command": "workbench.actions.view.problems",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "e"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openGlobalSettings",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.openFile",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "r"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openRecent",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.save",
          "args": []
        }
      ]
    },
    // save file
    {
      "before": ["<leader>", "f", "S"],
      "commands": [
        {
          "command": "workbench.action.files.saveAll"
        }
      ]
    },
    {
      "before": ["<leader>", "f", "t"],
      "after": [],
      "commands": [
        {
          "command": "workbench.view.explorer",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "f", "y"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.copyPathOfActiveFile",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "g", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.view.scm",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "j", "="],
      "after": [],
      "commands": [
        {
          "command": "editor.action.formatDocument",
          "args": []
        }
      ]
    },
    // beautify files
    {
      "before": ["<leader>", "="],
      "commands": [
        {
          "command": "editor.action.formatDocument"
        }
      ]
    },
    {
      "before": ["<leader>", "p", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.quickOpen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "p", "l"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.files.openFolder",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "p", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.openRecent",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "f"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "r"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.reloadWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "q", "q"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.closeWindow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "e"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.rename",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "j"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.gotoSymbol",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "p"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.findInFiles",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "s", "P"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.findInFilesWithSelectedText",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "F"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleFullScreen",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "m"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleMenuBar",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "s"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.selectTheme",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "T", "t"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.toggleActivityBarVisibility",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "v"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.smartSelect.grow",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "V"],
      "after": [],
      "commands": [
        {
          "command": "editor.action.smartSelect.shrink",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "w", "w"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusNextGroup",
          "args": []
        }
      ]
    },
    // navigation
    {
      "before": ["leader", "w", "l"],
      "commands": [
        {
          "command": "extension.vim_navigateRight",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "h"],
      "commands": [
        {
          "command": "extension.vim_navigateLeft",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "j"],
      "commands": [
        {
          "command": "extension.vim_navigateDown",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "k"],
      "commands": [
        {
          "command": "extension.vim_navigateUp",
          "when": "vim.active && vim.use<C-w> && !editorTextFocus"
        }
      ]
    },
    {
      "before": ["leader", "w", "v"],
      "commands": [
        {
          "command": "workbench.action.splitEditor",
          "key": "cmd+\\"
        }
      ]
    },
    {
      "before": ["<leader>", "w", "W"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.focusPreviousGroup",
          "args": []
        }
      ]
    },
    {
      "before": ["<leader>", "w", "m"],
      "after": [],
      "commands": [
        {
          "command": "workbench.action.maximizeEditor",
          "args": []
        }
      ]
    }
  ]
}

2. Add the following to your VSCode’s keybindings.json.

Note: You can find your keybindings.json here.

[
  // unbind "C-k .", needed to bind C-k as kill line
  {
    "command": "-extension.clipToHtml",
    "key": "ctrl+k .",
    "when": "editorTextFocus"
  },
  // (Optional) bind <C-g> as <ESC>
  {
    "key": "ctrl-g",
    "command": "extension.vim_escape",
    "when": "editorTextFocus && vim.active && !inDebugRepl"
  },
  {
    "command": "-workbench.action.gotoLine",
    "key": "ctrl+g"
  },
  {
    "command": "workbench.action.closeQuickOpen",
    "key": "ctrl-g",
    "when": "inQuickOpen"
  },
  {
    "command": "workbench.action.exitZenMode",
    "key": "ctrl-g ctrl-g",
    "when": "inZenMode"
  }
]