Vimifying VSCode

Enhance your coding with this dynamic combo

6 min readDec 16, 2019

I. Background

I’ve done several articles on why I choose vim as my code editor of choice. Having spent several years developing in vim I still window shop for IDEs that could replace it. Nothing has come close so far…until now. After trying VSCode incrementally alongside vim I now use VSCode more than I do vim. I haven’t completely abandoned vim since there are legitimate use cases for it and I’ll explain those later.

I get a lot of joy developing in vim. However, there would be pain points that would arise every now and then. There would be the visual artifacts that I would get from switching from different window panes in tmux. Or having to experiment with the config to get settings right with other libraries like prettier and YCM. Fixing bugs and looking for vim solutions can be a chore if you don’t have a solid setup.

Usually with vim you get all of the vim goodness but you still desire other features you see from different IDEs that you don’t get natively with vim. You end up installing plugins and lots of them. One problem you will face is that the plugin may not be fully featured and sometimes they are abandoned by the maintainers. I always came with the mindset that there will always be someone out there who will create a library that will match the feature you’re looking for. And although you may find one, it may lacking some. NERDTree is a great example. You get a sidebar directory of your project but copying directories and moving them around is not very efficient.

So you can turn vim into a ghetto IDE with plugins. It’s still beats full featured IDEs even with the small bugs, but what if we changed our mindset from transforming vim into our ideal IDE to transforming our IDE to a vimified IDE? We can!

The IDE has to meet some of important criteria:

Free — because vim is free
Maintained by a major corp. — Microsoft
Big community — It’s the most popular IDE used today (link)
Plugins — Hundreds

II. Vimifying VSCode

Let’s start vimifying VSCode with builtin vim features and then find plugins that are similar to our vim plugins.

Standard Remappings

reference: vscodevim

esc to jj

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Settings(JSON)" .

"vim.insertModeKeyBindings": [
        {
            "before": ["j", "j"],
            "after": ["<Esc>"]
        }
    ]

Open files in new tab

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open User Settings" . Set the "workbench.editor.enablePreview" property to false.

Now you can open files in a new tab just by pressing enter on the filename.

macs: change the renameFileto control option command and then change Terminal: Focus Terminal Tabs View to shift command

Maximize the terminal window

Open the keyboard shortcuts with ctrl-shift-p. Then do a search for View: Toggle Maximized Panel. Then change the setting to whatever you want ( I changed mine to ctrl-shift-l )

macs: set former bindings to: control option commandthen set to: control shift l

Focus the Problems panel (optional)

Open the keyboard shortcuts with ctrl-shift-p. Then do a search for View: Toggle Maximized Panel. Then change the setting to whatever you want ( I changed mine to ctrl-shift-k )

Focus the terminal

macs: Open keyboard shortcuts. Set any former binds to control option command . Set bind to: shift command u

Cycle through multiple terminals

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Keyboard Shortcuts". Search for “terminal focusNext” and set the key binding to: ctrl-tab.

macs: Make any former binds to: control option command then set to: control tab

Close a tab

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Keyboard Shortcuts". Search for “workbench.action.closeActiveEditor” and set the key binding to: ctrl-k x.

macs: you can leave this with default: command w

III. Mimicking the Best vim plugins

NERDTree: New file and folder in explorer

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Keyboard Shortcuts" . Set the "explorer.newFile" key binding to Ctrl + N F and “explorer.newFolder” to Ctrl + N D

EasyMotion: Set the leader search to “s”

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Settings (JSON)" . Set the code below inside of “vim.normalModeKeyBindingsNonRecursive”.

{
  "before": ["s"],
  "after": ["leader", "leader", "s"]
}

IV. Miscellaneous Settings

Center the cursor on screen

Open the Command Palette with ctrl-p to open your settings file. Search for settings ui Then search for cursor surrounding lines and change to 40 or higher.

Converting tab behavior to scroll options

Open the Command Palette with ctrl-p to open your settings file. Search for “keyboard shortcuts json” and open the keybindings.json file. Then add this to the bottom of the array:

{
        "key": "tab",
        "command": "selectNextQuickFix",
        "when": "editorFocus && quickFixWidgetVisible"
    },
        {
        "key": "shift+tab",
        "command": "selectPrevQuickFix",
        "when": "editorFocus && quickFixWidgetVisible"
    },
        {
        "key": "tab",
        "command": "selectNextSuggestion",
        "when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
    },
        {
        "key": "shift+tab",
        "command": "selectPrevSuggestion",
        "when": "editorTextFocus && suggestWidgetMultipleSuggestions && suggestWidgetVisible"
    }

Thanks to lanzani for this snippet!

Stop vscode from autocompleting when typing the period character

Open the Command Palette with ctrl-p to open your settings file. Search for “settings json”

“editor.acceptSuggestionOnCommitCharacter”: false

Remove Open Editors section in sidebar

Open the Command Palette with ctrl-p to open your settings file. Search for “open editors” and change the visible setting from 9 to 0.

Remap the Settings UI and Settings JSON

Open the Command Palette with ctrl-p to open your settings file. Search for “settings json” and change the Settings: Editor to json. Then Open Keyboard shortcuts from the command palette and search for Preferences:Open Settings(UI) and change to ctrl-,

Get Isaac Pak’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Then open Preferences: Open Keyboard Shortcuts(JSON) and add this to the end:

{
 “key”: “ctrl+shift+,”,
 “command”: “workbench.action.openSettings2”
}

Create a shortcut for opening and closing the sidebar

If you are using the vim extension then you will probably need this code. Open the Command Palette with ctrl-p and open the keyboard shortcuts json file. Add this line:

{
  "key": "ctrl+k ctrl+shift+j",
  "command": "workbench.action.toggleSidebarVisibility"
}

macs: change ctrl to cmd or just change by the keyboard shortcuts ui

Remap tabs cycle

Open the Command Palette with ctrl-p and open the keyboard shortcuts json file. Change these command keys to:

    {
        "key": "ctrl+j",
        "command": "workbench.action.previousEditorInGroup"
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.nextEditorInGroup"
    }

macs: change ctrl to cmd

Typecheck javascript files

Open the Command Palette with ctrl-p to open your settings file. Search for “implicit project config” and checkmark the Check JS box.

V. Settings for typescript (you can skip this if you don’t use typescript)

If using create-react-apps — typescript for development. Install the following packages local to your projects:

yarn add --dev typescript 
yarn add @types/node @types/react @types/react-dom @types/jest
yarn add --dev tslint
yarn add --dev tslint-config-prettier
yarn add --dev tslint-plugin-prettier
yarn add --dev tslint-react

Add this to your settings.json:

  "editor.formatOnSave": false,
  "[javascript]": {
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.formatOnSave": true
  },
  "prettier-eslint.tslintIntegration": true,
  "prettier-eslint.eslintIntegration": true,
  "prettier.jsxSingleQuote": false,
  "prettier.singleQuote": true,

Useful Shortcuts

close a file: ctrl-f4

VI. React Specific Configuration

To get emmet working inside of jsx do the following:

Open Settings(UI) > Workspace > Extensions > Emmet > Include Languages > Edit in settings.json// Add this code
{
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  }
}

VII. The Best of VSCode Extensions

AutoPrefixer

Check: Format on Save

settings: autoprefixer.ignoreFiles: ["**/**/*.js", "**/*.json"]

Auto Rename Tag

Code Spell Checker

Code Runner

Color Highlight

Color Picker

CSSComb

CSS Peek

Change the look-up definition in command palette=> winows keyboard shortcuts(UI) => command palette => ctrl-k k

Debugger for Chrome

ESLint

ES7 React/Redux/GraphQL/React-Native snippets

GitLens

Import-Cost

Intellisense for CSS class names in HTML

Live Server

npm Intellisense

Numbered Bookmarks

Allows you to bookmark a line of code and get back to that line with a shortcut.

Open the Command Palette with ctrl-p to open your settings file and enter “Preferences: Open Keyboard Shortcuts" . Set the “numberedBookmarks.toggleBookmark1” to ctrl-shift-; ; and D"numberedBookmarks.jumpToBookmark1" key binding to ctrl-shift-; a and

I only use Numbered Bookmarks for this simple use-case but you may want to take advantage of the many other options it has to offer.

Prettier — Code formatter

Rainbow brackets

SCSS Intellisense

sort-imports

vscode-styled-components

tslint

add this to tsconfig.json compilerOptions => “plugins”: [{“name”: “typescript-tslint-plugin”}]

Vim

vscode-icons

YAML

vscode can do that

if you watch frontend masters you can install this extension and disregard and duplicate extensions listed above

Remote — Containers

Allows you to create remote containers for docker

Apollo-GraphQl

Get graphql syntaqx highlighting