Integrate Neovim inside VSCode

Visual Studio Code has become the powerhouse of text editors ever since it has came into action and there are many developers who use VSCode as their primary text editor. Vim is known for its robustness and versatility when it comes to editing code. Vim users always want to have its keybindings present in every editor. Thankfully there is one way to integrate vim inside Visual Studio Code. Here we will be using Neovim in Vscode using an extension named VScode Neovim. It would be great if you can just look up my Neovim Configuration since this VSCode integration is a follow up part of the entire workspace.

Steps to merge Neovim inside Visual Studio Code

• Install extensions in Visual Studio Code
• Configure Settings and Plugins in Neovim Configuration

Install Extensions in Visual Studio Code

• Visual Studio Code provides two extensions of Neovim in their extension gallery. Some of the extensions of our Neovim configuration also work with VSCode without any additional configuration such as Nvim-surround. The initial step is to install Neovim and Which-key inside VSCode.
• Go to Extension Gallery and search for Neovim and Which-key and install them.

Neovim Configuration

• The next step is to save the path where your Neovim configuration is located. The command changes respective to your operating system. Open your settings.json file and save these commands

Linux

 // settings.json 

{
    "vscode-neovim.neovimExecutablePaths.linux" : "/usr/bin/nvim",
    "vscode-neovim.neovimInitVimPaths.linux" : "$HOME/.config/nvim/init.lua",
}

MacOS

// settings.json 

{
    "vscode-neovim.neovimExecutablePaths.darwin" : "/usr/local/bin/nvim",
    "vscode-neovim.neovimInitVimPaths.darwin" : "$HOME/.config/nvim/init.lua",
}

Windows

// settings.json 

{
// If this causes Neovim to crash inside VSCode, try removing the first line.
// It worked for me when I removed the executable path for Neovim
    "vscode-neovim.neovimExecutablePaths.win32" : "C:\Program Files\Neovim\bin\nvim-qt.exe",
    "vscode-neovim.neovimInitVimPaths.win32" : "C:\Users\your_username\AppData\Local\nvim\init.lua",
}

• Now we need to add some settings that work very smoothly with our visual studio code configuration.
• Create a new folder called vscode in your Neovim configuration, so that all the VSCode configuration can be implemented in a separate directory.
• Create a new file named settings.vim and add the following code.

# settings.vim


" Better Navigation
nnoremap <silent> <C-j> :call VSCodeNotify('workbench.action.navigateDown')<CR>
xnoremap <silent> <C-j> :call VSCodeNotify('workbench.action.navigateDown')<CR>
nnoremap <silent> <C-k> :call VSCodeNotify('workbench.action.navigateUp')<CR>
xnoremap <silent> <C-k> :call VSCodeNotify('workbench.action.navigateUp')<CR>
nnoremap <silent> <C-h> :call VSCodeNotify('workbench.action.navigateLeft')<CR>
xnoremap <silent> <C-h> :call VSCodeNotify('workbench.action.navigateLeft')<CR>
nnoremap <silent> <C-l> :call VSCodeNotify('workbench.action.navigateRight')<CR>
xnoremap <silent> <C-l> :call VSCodeNotify('workbench.action.navigateRight')<CR>

nnoremap <silent> <C-w>_ :<C-u>call VSCodeNotify('workbench.action.toggleEditorWidths')<CR>

nnoremap <silent> <Space> :call VSCodeNotify('whichkey.show')<CR>
xnoremap <silent> <Space> :call VSCodeNotify('whichkey.show')<CR>

• This configuration will add navigation between editors when multiple editor group are used in you development process. Add your custom settings in this file.
• Now add Easymotion plugin in your Neovim configuration to enhance navigation inside your editor. However, it is not mandatory to do.
• If you want more plugins to work inside VSCode then you can head over to this page which shows the list of available plugins of Neovim inside VSCode.

Main Configuration

• The final step is to update our main configuration with an if-else condition i.e, to implement these settings and plugins when vscode is present in your system.

-- init.lua

require "options"
require "keymaps"
require "lazy-config"

if vim.g.vscode then

    vim.cmd[[source $HOME/.config/nvim/vscode/settings.vim]]
-- Optional plugin
    vim.cmd[[source $HOME/.config/nvim/vscode/easymotion-config.vim]]

else

    require "alpha-config"
    require "autopairs-config"
    require "bufferline-config"
    require "git-config"
    require "hop-config"
    require "indentline-config"
    require "lualine-config"
    require "lsp-config"
    require "nvim-tree-config"
    require "telescope-config"
    require "toggleterm-config"
    require "treesitter-config"
    require "undotree-config"
    require "whichkey"

end

• For Windows users, the path to source the vim files would be
• C:\Users\your_username\AppData\Local\nvim
• Now we are all set to continue with our VSCode configuration.

VSCode Configuration

• Now we are left with configuring which-key inside VSCode, Here we will be adding our keybindings in settings.json file.
• Open VSCode -> ctrl + shift + i -> settings.json -> Add this code.

    "whichkey.delay": 0,
    "whichkey.sortOrder": "alphabetically",
    "whichkey.bindings": [
        {
        "key": ";",
        "name": "commands",
        "type": "command",
        "command": "workbench.action.showCommands"
        },   
        {
        "key": "k",
        "name": "Close active editor",
        "type": "command",
        "command": "workbench.action.closeActiveEditor"
        },
        {
        "key": "q",
        "name": "Kill Terminal",
        "type": "command",
        "command": "workbench.action.terminal.kill"
        },
        {
        "key": "t",
        "name": "Toggle Terminal",
        "type": "command",
        "command": "workbench.action.togglePanel"
        },
        {
        "key": "b",
        "name": "Buffers/Editors...",
        "type": "bindings",
        "bindings": [
            {
            "key": "b",
            "name": "Show all buffers/editors",
            "type": "command",
            "command": "workbench.action.showAllEditors"
            },
            {
            "key": "m",
            "name": "Close other editors",
            "type": "command",
            "command": "workbench.action.closeOtherEditors"
            },
            {
            "key": "u",
            "name": "Reopen closed editor",
            "type": "command",
            "command": "workbench.action.reopenClosedEditor"
            },
            {
            "key": "y",
            "name": "Copy buffer to clipboard",
            "type": "commands",
            "commands": [
                "editor.action.selectAll",
                "editor.action.clipboardCopyAction",
                "cancelSelection"
            ]
            }
        ]
        },
        {
        "key": "e",
        "name": "Toggle Explorer",
        "type": "command",
        "command": "workbench.action.toggleSidebarVisibility"
        },
        {
        "key": "f",
        "name": "Find & Replace...",
        "type": "bindings",
        "bindings": [
            {
            "key": "f",
            "name": "File",
            "type": "command",
            "command": "editor.action.startFindReplaceAction"
            },
            {
            "key": "s",
            "name": "Symbol",
            "type": "command",
            "command": "editor.action.rename",
            "when": "editorHasRenameProvider && editorTextFocus && !editorReadonly"
            },
            {
            "key": "p",
            "name": "Project",
            "type": "command",
            "command": "workbench.action.replaceInFiles"
            }
        ]
        },
        {
        "key": "h",
        "name": "Split Horizontal",
        "type": "command",
        "command": "workbench.action.splitEditorDown"
        },
        {
        "key": "s",
        "name": "Search...",
        "type": "bindings",
        "bindings": [
            {
            "key": "f",
            "name": "files",
            "type": "command",
            "command": "workbench.action.quickOpen"
            },
            {
            "key": "t",
            "name": "text",
            "type": "command",
            "command": "workbench.action.findInFiles"
            }
        ]
        },
        {
        "key": "v",
        "name": "Split Vertical",
        "type": "command",
        "command": "workbench.action.splitEditor"
        },
        {
        "key": "z",
        "name": "Toggle zen mode",
        "type": "command",
        "command": "workbench.action.toggleZenMode"
        }
    ],
    "editor.suggestSelection": "first",
    "files.exclude": {
        "**/.classpath": true,
        "**/.project": true,
        "**/.settings": true,
        "**/.factorypath": true
    },

• Easy-Motion plugin for VSCode

• Which key in VScode

Keybindings

Normal Mode

• ctrl + j :- Move to down editor group
• ctrl + k :-Move to up editor group
• ctrl + h :- Move to left editor group
• ctrl + l :- Move to right editor group

Which-key

• space + ; :- Show all commands
• space + k :- Close active editor
• space + q :- Kill terminal
• space + t :- Toggle terminal
• space + e :- Toggle file explorer
• space + h :- Split horizontal
• space + v :- Split vertical
• space + b + b :- Show all files opened
• space + b + m :- Close other editors
• space + b + u :- Reopen closed editors
• space + b + y :- Copy entire file
• space + f + f :- Find and replace text inside the file
• space + f + s :- Replace all occurances of current text
• space + f + p :- Find and replace text inside the entire project
• space + s + f :- Search for a specific file
• space + s + t :- Search for a text in all files
• space + z :- Toggle zen mode

Plugins that work with VSCode and Neovim are

• Which-key
• Nvim-surround
• EasyMotion