Vs code is the most popular and used code editor out there. The reason behind its popularity is that it is free, cross-platform, and has little to no learning curve. In this blog, I'll share my personal vs-code customization. This customization is not just about colors and icons but also about making the editor itself more useful. Learning these customizations will give you a head start in getting to know your code editor better. Since you might be using this tool for the next 2-3 decades, it's a good idea to learn the basics. It will make your life a bit easier.
My problem with vs-code
My major problem with the vs-code is that it is SLOW. Even working on my dumb projects sometimes feels clunky, even though it is using more resources than some of the full-fledged Linux operating systems (because it is Electron based). Unfortunately, there's not much we can do about that. I've noticed that using heavy themes and icon packs makes it even slower. So, to make it run better, it's best to stick to a minimal theme and only install the essential extensions.
Editing any installed extension can be frustrating, and to me, UI itself is not very intuitive. Making changes to default settings is also difficult, and overall, customizing the editor to suit your specific needs can be a hassle.
Removing visual clutter 🎯
Sidebar
The "Open Editor", "Outline", "Timeline", and "Npm Scripts" tabs have never been necessary for me to use. So I unchecked all of them.
Editor
I think these two also have no use so to remove them press Ctrl+Shift+p to open Open Users Settings (JSON) and add these two lines to the JSON
1"editor.minimap.enabled": false,
2"breadcrumbs.enabled": false,VIM: The Heart âš¡
For those unfamiliar, VIM is a highly efficient text editor that operates entirely through keyboard commands, allowing you to navigate, edit, and manipulate text swiftly. In vs-code, you can also use VIM motion ( set of standard keybindings ) by installing the Vim extension.
With VIM mode enabled, you'll experience a seamless integration of VIM commands within VS Code. You can navigate your code, delete lines, copy, paste, and perform countless other actions without lifting your fingers off the keyboard.
Here are some essential VIM commands that can significantly boost your productivity:
- h, j, k, l: Navigate left, down, up, and right, respectively.
- yy: Copy the current line.
- dd: Delete the current line.
- p: Paste the copied or deleted text after the current line.
- P: Paste the copied or deleted text before the current line.
- u: Undo the last action.
- Ctrl+R: Redo the last undone action.
These are just a few examples of the numerous VIM commands available. Learning and mastering VIM can take time, but the payoff in terms of speed and efficiency is well worth the effort. The leader key does not work in the Vim extension out of the box, but you can easily configure this. In your Open Users Settings (JSON) file add these lines
1"vim.leader": "<space>", // leader key is mapped to space
2
3//Now you can customize your leader key
4"vim.normalModeKeyBindings": [
5 {
6 "before": ["leader", "h"],
7 "commands": ["editor.action.showHover"]
8 },
9 {
10 "before": ["leader", "c", "a"],
11 "commands": ["editor.action.quickFix"]
12 },
13....
14]Here is a quick VIM motion tutorial.
Navigation ðŸ§
Terminal Toggling
A shortcut for Toggle between terminal and editor is a must. To set a key to toggle between terminal and editor you can Ctrl+Shift+p to open Open Keyboard Shortcuts (JSON) and add this line to the JSON
1// You can use whatever key combination you choose.
2{
3 "key": "alt+j",
4 "command": "workbench.action.terminal.toggleTerminal",
5 "when": "terminal.active"
6},File Explorer
Toggling
By adding these two lines into the Open Keyboard Shortcuts (JSON) you can toggle between editor and file explorer
1// You can use whatever key combination you choose.
2{
3 "key": "alt+e",
4 "command": "workbench.action.toggleSidebarVisibility"
5},
6{
7 "key": "alt+e",
8 "command": "workbench.files.action.focusFilesExplorer",
9 "when": "editorTextFocus"
10},CRUD operation on files and Beyond
By adding the following lines you can add, rename, copy, paste, and delete certain files or folder
1// You can use whatever key combination you choose.
2{
3 "key": "a",
4 "command": "explorer.newFile",
5 "when": "filesExplorerFocus && !inputFocus"
6},
7{
8 "key": "r",
9 "command": "renameFile",
10 "when": "filesExplorerFocus && !inputFocus"
11},
12{
13 "key": "c",
14 "command": "filesExplorer.copy",
15 "when": "filesExplorerFocus && !inputFocus"
16},
17{
18 "key": "p",
19 "command": "filesExplorer.paste",
20 "when": "filesExplorerFocus && !inputFocus"
21},
22{
23 "key": "d",
24 "command": "deleteFile",
25 "when": "filesExplorerFocus && !inputFocus"
26}
Also, there are so many shortcuts and tools I use on a daily basis that cannot be covered in a single blog. Like using vs codes fuzzy finder to navigate through files, for project navigation, I use Project Manager extension, and so on. I hope this blog gives you a basic idea of how you can customize your vs code by changing user settings and keybindings. Also learning Vim motions was a game-changer for me so I highly recommend learning at least the basic motion of Vim.