DEV Community

Public Salad
Public Salad

Posted on

My favorite Vim Settings in Vscode so far!

Sublime Text 3 Days...

At my first job I was a Sublime text 3 enjoyer with the "Six" plugin extension to use vim keybindings, I thought Sublime Text 3 is more superior with Visual studio code because of its performance and at the time I don't like using Chromium based applications because chrome already eats up all of my ram.

After a while I started to learn ReactJS development with ST3 but could not find a good article/tutorial on how to setup ST3 for ReactJS Development. I saw my coworkers using Visual studio code with their fancy Intellisense & Formatting of code on save. So i thought, you only live once so why not try it.

I tried it, And I can say I am now a Visual Studio Code With VscodeVim enjoyer. I'll show you my favorite Visual Studio Code & Vim Settings to boost productivity!(Hopefully)

On to the Settings...

"Space" as my leader key

{
    "vim.leader": "<space>",
}
Enter fullscreen mode Exit fullscreen mode

Save, Close current file, Search, Remove Searched Highlights(nohl)

{
"vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [
                "leader",
                "w"
            ],
            "commands": [
                "workbench.action.files.save"
            ]
        },
        {
            "before": [
                "leader",
                "q"
            ],
            "commands": [
                ":q"
            ]
        },
        {
            "before": [
                "<leader>",
                "f"
            ],
            "after": [
                "/"
            ]
        },
        {
            "before": [
                "<leader>",
                "n"
            ],
            "commands": [
                ":nohl"
            ]
        },
]
}
Enter fullscreen mode Exit fullscreen mode

Enable Default Ctrl keys

{
    "vim.handleKeys": {
        "<C-v>": false,
        "<C-s>": false,
        "<C-y>": false,
        "<C-z>": false,
        "<C-p>": false,
        "<C-q>": false,
        "<C-n>": false,
        "<C-x>": false,
        "<C-b>": false,
        "<C-a>": false,
        "<C-f>": false,
    },
}
Enter fullscreen mode Exit fullscreen mode

Quickly go to Top/Bottom

{
"vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [
                "<leader>",
                "j"
            ],
            "after": [
                "G"
            ]
        },
        {
            "before": [
                "<leader>",
                "k"
            ],
            "after": [
                "g",
                "g"
            ]
        }
    ],
}
Enter fullscreen mode Exit fullscreen mode

Extras (I rarely use this because muscle memory of default vim combos)

{
    "vim.normalModeKeyBindings": [
        { // quick deletes a highlighted block
            "before": [
                "<leader>",
                "d"
            ],
            "after": [
                "d",
                "d"
            ]
        },
        { // Go to next file tab
            "before": [
                "<tab>"
            ],
            "commands": [
                "workbench.action.nextEditor"
            ]
        },
        { // Go to previous file tab
            "before": [
                "<S-tab>"
            ],
            "commands": [
                "workbench.action.previousEditor"
            ]
        }
    ],
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [
                "<leader>",
                "j"
            ],
            "after": [
                "G"
            ]
        },
        {
            "before": [
                "<leader>",
                "k"
            ],
            "after": [
                "g",
                "g"
            ]
        }
    ]
}
Enter fullscreen mode Exit fullscreen mode

That's all the shortcuts i usually use when I'm coding, Of course a couple of this shortcuts I discovered @ stackoverflow & reddit.

I also made a video showing more shortcuts & vscode settings that you can watch Here, if you prefer watching a youtube video!

That's about it. Hope you enjoyed the quick read!
Image description

Top comments (1)

Collapse
 
jessesousa profile image
Jesse Sousa

This helped me a lot. Thank you!