Getting Started with Vim in Visual Studio Code
ฝัง
- เผยแพร่เมื่อ 27 ก.ค. 2024
- In this developer productivity video, I go over why you should use Vim commands in VS Code and help you get started with the Vim extension. I also go over my Vim coding workflow.
📖 Code - github.com/SuboptimalEng/dotf...
🐦 Twitter - / suboptimaleng
💻 GitHub - github.com/SuboptimalEng
🌎 Website - suboptimaleng.com
== [ Timestamps ] ==
00:00 Intro
00:47 Why Vim?
01:25 Vim Use Case
03:54 Normal Mode Philosophy
04:30 Vim Setup in VS Code
07:30 Outro
== [ Tags ] ==
#suboptimal #vscode #vim - วิทยาศาสตร์และเทคโนโลยี
Hello friends, I'm now on Twitter 🐦 twitter.com/SuboptimalEng
When you learn Vim you never want to edit code without it, it's so incredibly efficient and ergonomic
❌ Impossible
🔥 Vimpossible
@@SuboptimalEng haha never heard that one :)
Tantan... real??
@@Dorbellprod it's a me! Hi Dorbell!
Another simpler way to enable tabs:
Go to the normal keybinding as you show in the video and right click on it. Select the "Change When Expression" and remove the !editorReadonly option. Same for outdent and shift tab.
Won't that interfere with other things. Like reading a git change.
I've been wanting to improve my workflow for a while now and reduce the mouse and the arrow keys usage within VSCode. I've always known about vim but never tried to learn. There's for sure a lot of material online, one can easily get lost, but I think I have found the perfect channel for productivity and workflow tips, to get me jump started. I have already watched some of your vids and will do more, you explain in a clear way and showcase common use cases where ergonomics can be optimized, thanks for sharing :)
Appreciate the comment Hawk! Glad my style of videos helped you get started with Vim ☺️
Having switched from mac to pc, it takes a lot of effort to map all the keys and commands, especially with the home, end, page up and down keys. So having keybindings like Vim is quite "universal" and definitely helps.
do you know which theme he used?
@@Ikram-Hussainlooks like gruvbox
Your channel looks great for frontend developers. Productivity+Tailwind+Vue=🔥❤️
I’m slowly getting into TypeScript (and GraphQL) as well 😛
Great video. Good information with explanations at a nice pace.
Too many TH-cam “so-called tutorials” simply show stuff without adequate explanations.
Thanks, I’m glad you appreciate the “why vim” explanation!
Vim helped me to relieve my wrist pain alot.
&& it also follows atomic habits temptation bundling!!!
Sounds like setting up Vim is pretty straightforward, I'll need to try it. The defaults are just so ingrained though...
Do it for the ergonomics 👀
Just found this channel. So cool!
thanks for leaving your configuration in the description
How else can I up my stars on GitHub 😉
@@SuboptimalEng lol i forgot to do that ill go do it rn :)
Very good point about the ergonomics
Great video! Subscribed.
hello thank you so much for this it actually incresed my productivity
🦾
this is very helpful. thank you!
nice vid, also learned outro was a thing!
Hi, just found your channel today!
Really like your videos, subscribed.
More videos coming out 🔜
@@SuboptimalEng Awesome, looking forward to it!
Copy the JSON additions below.
To access settings.json:
CMD + Shift + P then type "Open User Settings (JSON)"
To access keybindings.json:
Open Keyboard Shortcuts editor and select the Open Keyboard Shortcuts (JSON) button on the right of the editor title bar.
or
CMD + Shift + P then type "Open Keyboard Shortcuts (JSON)"
settings.json:
"vim.insertModeKeyBindings": [
{
"before": ["k", "j"],
"after":[""]
}
],
~~~~~~~~~~~~~~~~~~~~~
keybindings.json:
{
"key": "tab",
"command": "tab",
"when": "editorTextFocus && !editorTabMovesFocus"
},
{
"key": "shift+tab",
"command": "outdent",
"when": "editorTextFocus && !editorTabMovesFocus"
}
Thanks for this!
5:35 "The only way you can enter vim mode is by pressing escape". I don't understand why you call it the vim mode rather than normal mode, but you can enter into normal mode from insert mode using ctrl + c (C_c) or even ctrl + [. I use these two all the time.
Most vim users use escape on caps lock. I use it and now I yell very hard and high when someone doesn't bind caps lock onto escape (my information source is my teacher, and stack overflow so don't take it for granted haha)
@@klimmesil9585 i bound escape to jk. No kidding, there's a tone of people who do this their own way. But, my comment was originally intended to clarify that "escape key is not the only way you enter into normal mode" - as the dude states otherwise in his video.
Yeah! I use have Caps lock bound to LCtrl, so I can just press "Caps + [" and I can enter normal mode
@@klimmesil9585 how did you set caps in vim.insertModeKeyBindings? I use caps instead of Esc in my regular config of vim but don't know how I should set it here
I don't know if this will work for everyone, but if you really want fluidity between normal and insert mode, the fastest thing is probably to remap (through iOS, Linux or Windows config files) the keys "Esc" to "Caps Lock" and vice versa (since most of us don't really use Caps Lock not even once a month but Esc is one of the most used keys if you use vim keystrokes)
I remapped Caps Lock to CTRL for that utility 🦾
@@SuboptimalEng Oh, I see, emacs style 👍 #respect
@@SuboptimalEng FWIW, I switched `Esc` and `CapLock`, `Win` and `Ctrl`, and things are working quite smoothly.
I was thinking the same but I can seem to right caps lock the right way to do it
I remapped mine to "jk"
It's not the case that Vim doesn't have the tab to indent feature, it's just that the keybinding is different. Visually select some text and Use the ">" or "
Oh interesting, I did not know that. Thanks for explaining!
That's very nice!
But how can we do 2 or 3 tabs? In that way after one tab selection disappears.
@@SisiraSomaratne There's a neat little trick for that. Say, you know how many tab overs you want to have. You can simply do n> or n< where n is the number of tab overs you want to. The other trick is, you can remap the key in your vimrc or init.vim so as to press "gv"(without quotes) as soon as you press > or
@@hemanthkotagiri8865 Oh! Again the Vim basic! Thanks.
It doesn’t work for me. However pressing shift before pressing < or > does the trick
I remapped ii to esc and thanks for that tip.
🔥
this got me going. thanks.
Thanks a lot for this video
Could you make a video on your vim setup? (more vim related content) I think its really good, as you have a better experience with vim.
I definitely plan to do more videos related to Vim and VSCode next year 💪
Thanks, we need another video please more on vim tutorial
Will do, in 2021!
great video, thanks mate
keep up the work small coding channel
Great vid, thanks
This was helpful for me, thank you. Personally, I prefer to not add tabs in normal mode because I prefer that only insert mode has the potential to augment the code.
I don't want to edit my code in normal mode but I do want to add/remove tabs on multiple lines when I'm on visual mode. The only way to do this is by enabling the option to use tabs in normal mode.
@@nihancj just do ">"
Liked and subscribed ❤
Thanks dude!!
vim is essential for keeping yourself in focus, while typing
Thanks for the vid! Super cool! Curious, what syntax theme are you using?
Thanks Noah! I usually switch between GitHub dark, Gruvbox, and Gruvbox material themes.
Great and THANKS!
what plugin do you use for the screencast while typing . i mean the key's showing the monitor when you type something
NIce video! Just to make it easy, you can toggle screencast mode in visual studio code rather than using another software for that. It's really good try it!
Thanks for the tip Yogit!
Loved it
In vscodevim, You know whenever you go to a line and hit ci' you delete whatever is inside the single quotes and you are left into insert mode. This works regardless of your cursor position on the row.
Well how can I do the same with parentheses or curly brackets because currently, this works only if my cursor it at the opening bracket or between both.
Example: a = (1234,123)
If I want to change inside the parentheses I would go to the line, f(ci( Whereas if it was surrounded by quotes it would work from any column on the row.
How can I do it with other text objects without remapping keys?
Thanks
Installed Vim today; let's see how much time before I learn it well enough. Gratitude.
You have started on a great journey 🎯
suboptimal is the right name. When you didnt use %. I died inside
😂
Great video. May I ask what key stroke overlay are you using?
Thanks! I’m using KeyCastr 🦾
Hey man, hoping you can help me. Do you know how I can quickly navigate the CTRL+SHIFT+F "search in files" mode with VSCodeVim? And also how to go back to the editor window from there? Thank you.
You can press CTRL+b to close the left file search section.
I still haven’t found a way to explore file search with Vim in VS Code unfortunately 🥲
@@SuboptimalEng Well, luckily I found a way to do it just an hour ago! Put this in your keybindings.json:
{
"key": "ctrl+j",
"command": "search.action.focusNextSearchResult",
"when": "hasSearchResult || inSearchEditor"
},
{
"key": "ctrl+k",
"command": "search.action.focusPreviousSearchResult",
"when": "hasSearchResult || inSearchEditor"
},
{
"key": "ctrl+e",
"command": "workbench.action.focusActiveEditorGroup",
"when": "!editorFocus"
}
Then you can use CTRL+J or K for going up and down the search results, and CTRL+E for focusing the editor again.
Have a nice weekend! 😊
@@yogxoth1959 OMG nice! (Pinned the comment for others.)
@@SuboptimalEng i used f and it works wonders. Those are the defaults from telescope plugin in nivm. So handy and doesnt clash with any default keynaps. The leader key open up a new section for keymaps!!
Edit: oh, in VSCode since there is no distinction between normal and insert mode this might be kind of a pain for escape characters actually :/
I like the subject here but the where did you find the "keybindings.json" and can you share your settings with us?
Cmd + Shift + P -> start typing keybindings and you should see it appear
My settings are on my Github under the Dotfiles repository 😇
Can you remap the "caps lock" key to escape instead of using "k", "j"? if so whats the string of the key?
Thanks for sharing that tabbing in normal mode fix! How did you even figure that out?
I noticed it stops tab from working with vscode snippets though, so disabling it :(
Thanks!
What is your issue with VS Code snippets? I put cmd j/k as keybindings to traverse VS Code suggestions.
@@SuboptimalEng ah, didn't realize I needed an additional keybinding. The issue was just that I could no longer tab through the snippets. Thanks for the quick response! I'll give it a shot.
Usually you remap in your OS [CAPS LOCK] to [TAB]: you use TAB so much that pretty soon the TAB key is broken, also CAPS LOCK is more comfortable as it's on the main key line.
Hi does anyone know how to get to the vim settings json or were those vim settings manually added there? Thanks!
I set my keybindings in VS Code to that of WebStorm (migrated from WS), plus installed a few extensions that boost coding and code navigation. Is Vim much better than all the most popular code-snippet extensions in the Marketplace?
Never tried the WebStorm keybindings so idk.
Would def recommend giving Vim keybindings a shot tho!
@@SuboptimalEng Thanks for your quick reply. Watching a few videos about Vim navigation right now to see if it can beat my current setup.
how did you do the multi-cursor thing at 0:27 ?
Do you have a way to use Cmd-D with vim installed?
Also, how did you make it so when keep pressing j or k it repeats? If I do that in my Mac it will move just once.
for key repeats, write this in terminal:
defaults write com.microsoft.VSCode ApplePressAndHoldEnabled -bool false
how is this extension any different from neovim extension , apart from not being an emulation ?
If I remap Tab I can't use it for intellisense. Is there a way to only remap Tab based on if intellisense is active or another solution to that issue?
You can also select intellisense suggestions with the enter key.
Comment for the algorithm
Thank you for this informative video! I'm trying to figure out how to change the "vim.insertModeKeyBindings" to use k,j. I'm new to using VSC and also VIM. Any help would be appreciated!
Having mapped k j to esc to enter normal mode from insert mode, then how do u type k j as characters in insert mode?
You can set a time limit so that if you type the characters together slowly, the command does not get run and instead the characters get written.
You can apply when conditions to bindings in the json. Read the docs i.e "when": "inputFocus && vim.mode == 'Normal'". I have bindings remapped and conditioned per mode i.e leader leader to enter visual line (V). Currently building new profile to fit new workflows trained on nvim :)
You can swap your caps-lock with escape in your preferred OS. It saves alo of distance
That’s a good choice as well!
Thanks!
Glad you found the video helpful!
i'm using a 60% keyboard and it compromises on the arrow keys, i can switch my alt command /? and ctrl key out with the up down left right arrow keys, with vim i don't need to sacrifice on that and best part is i can now access the ~ key, before i can only do `
Hey, would you mind telling us what VSCode theme that is
cool video
Thx you
Commet for the algo, thanks for the content!
3:10 I was really hoping you were going to type:
dat
Does exactly wat you did. Deletes the entire XML tag in 3 very simple key presses. It is a text object in Vim.
How do I navigate around my files? creating files and folders?
You should be able to traverse the project directory using vim commands `jkhl`
As for making files/folders - I still do it manually
@@SuboptimalEng How do you close the explorer? (it can be opened by pressing ctrl + shift + e) can you open the file as a split screen (when opening with jl)?
EDIT:
closing the explorer was ctrl + b
@@SuboptimalEng @S1DEV You can use advanced-new-file extension for VS Code to create files as well as folders just using your keyboard.
I can't find the vim settings inside the settings.json file
As for using Esc to enter visual, I think some default key binding should not change because one might connect to some remote machines, and access vim there and that would make work a hell ( because of muscle memory ). My 2 cents.
That’s an interesting point. It’s possible that in some cases, keeping it as ESC is better.
Anyone else unable to see colon commands as a status bar at the bottom using the vim extension in vscode?
I think the best approach to entering normal mode from insert mode is to remap CAPS LOCK to Escape and the other way around.
Yeah i do that with the help of karabiner :)
cool man
thanks
ummm bro can you have me, when i go to preferences setting (JSON) im not see vim or any key binding like that, how can i change key ?? :
It's like there is no vim setting, just theme setting and other setting not vim setting help me pls ;-;
What theme are you using? and how to set them up?
The theme is Gruvbox!
I made a video going over how to set it up called "Watch this before you install VS Code".
where i can open this setting.json for vim keybinding changes............... i tried but cannot find it
plz help
Run "cmd + shift + p" and start typing "settings". You should be able to select "Preferences: Open Settings (JSON)".
Note: I think it's "ctrl + shift + p" on windows.
Do you know how to change the text caret to steady block?
It’s a setting in VS Code.
I've set up VSCode like this but the only (pretty big) issue I've run into is with code folds. Whenever I fold my code in VSCode Vim, it becomes extremely difficult to scroll the screen past that fold. Ctrl+E, Ctrl+D, Ctrl+F, they all become powerless against a single code fold lol. It might seem small but it makes the whole experience so constantly awkward that I have to either not fold any of my code and jump across a bunch of lines all the time, or just not use VSCode Vim at all.
that's unfortunate 🥲
I also have this issue a bit, and I use code folding a lot. However I love using vscodevim and use three code fold keyboard commands extensively:
1) cmd + k, cmd + j - unfold all.
2) cmd + k, cmd + 2/3/4 - folds to level N. (most scoping inside for me is inside 2/3/4 levels.)
3) cmd + k, cmd + [ - fold at the current position.
(All three chords are done without letting up on the cmd key with the left hand, so they are extremely quick.)
So I fold to N scope usually when trying to scan through code. If I need to navigate down, I use [N]j/k, with quote-quote to go back if necessary. An _extremely_ quick jump down is 33,j or 44,j, with an optional z,z, which acts like ctrl+F without the need for the emac-like chording. Also, if you don't have it, I recommend setting relative line numbers to make navigation easier. But tastes differ!
@@ibgib I think you are onto something. I haven't though about this sort of quick-folding and unfolding since writing that comment months ago. These days when using VSCodeVim I just don't fold my code, but I think this technique of quickly folding for an overview and navigating with just cursor movements could be very helpful. I also like the idea of shift + l/h to quickly get the cursor to the bottom/top of the screen to start scrolling with the cursor. Thank you very much for the advice!
@@MiroredImage Shift High & Low! Some of my least-remembered commands. Interesting that Shift + L seems to scroll despite code folding which I'm sure will come in handy from now on. (H doesn't seem to do the trick.)
@@MiroredImage Oh I just had to respond one more thing...I had forgotten that I solved my scrolling with cmd + up/down arrow keys. Not HOME hardcore-vim blasphemy I'm sure, but I like to have different physical posture "modes" (helps like crop rotation, only it's muscle groups).
To reproduce this default scrolling behavior, I include the following binding (also of course its down dual):
```
{ "key": "cmd+up", "command": "editorScroll",
"when": "textInputFocus",
"args": {
"to": "up",
"value": 4,
"revealCursor": true,
"by": "line"
} },
```
(Maybe one day, YT will format code blocks! I wonder if it's today...)
there is a problem with vscode. while i coding react or jsx syntax, sometimes vim crashing. is there anyone encountering this issue?
Never had this problem before, can’t help you there unfortunately
I cannot open setting like you 😢 why do it not work? 😂 I only see “Preferences: Open Settings(UI)”
at 5:08, how did you open that top search bar
mac: cmd + shift + p
windows: ctrl + shift + p (i think)
like you got it bro
lucky me i learnt shift+v to select line exists from this video otherwise i use to just use visual mode
thank you for the video but i would never name my child Suboptimal Engineer .
Maybe Optimal Engineer then?
Dev A: Heyy, why are you moving your hand away from homerow!?
Dev B: I need the mouse for search in StackOverflow, copy-paste and on the other hand, I just need alt+tab
Dev A: Ohh
Dev A: So have ya heard about Vimium?
can you use fzf and ripgrep ?
VS Code has those two features built-in, though they are named differently. Go to file, and find all (I believe).
can you drop that tab command here. and also can you tell how to remap caps into esc ...
The tab command is in my GitHub Dotfiles repository.
To remap Cap to ESC, you will need to do so in the Mac Keyboard settings. It’s not something specific to VS Code. Def recommended because I’ve only ever pressed the Caps Lock key by accident 😇
Thank you very much. Would be great if you could provide somewhere to copy those text settings and copy them in out files.
Good to hear the video was helpful. I have these settings on my GitHub dotfiles repository.
@@SuboptimalEng That is great! Thanks a lot. I am a vi veteran and sometimes pop out of VSCode just to be eiting more "naturally" and also sometimes pepper my vanilla VSCode with :x and related stuff :) Thanks a lot
WHAT IS THE BUTTON TO OPEN THAT TOP SCREEN AND TYPE THE VIM
What top screen?
شكرا thanks
i use ;; to switch to ESC mode this is so faster i use vim-gtk3 and i use space with y to copy content from vim to clipboard and space p to paste from clipboard there are lot of nice thing you can do with vim ppl who want to custom keys search from map and remap keys in vim
what theme are you using?
Gruvbox dark
how are you displaying you keystrockes?
You can display keyboard clicks in VS Code by enabling it in your settings.json file.
@@SuboptimalEng btw I forgot to ask which theme u used in here 0:04
What is cmd in cmd + key in "key" in keybindings?
It’s the Mac command key.
@@SuboptimalEng what should I do it in Linux laptop? can I do super key here? And what suggestion extension do you recommend? i am trying to use tabnine. And, I want to add shortcut to close the suggestion pop up if I don't find good one. Esc works but it is too far. I want to map it to some key. What is the name to do that in keybindngs?
This plugin does make vscode noticeably slower
Oh interesting, I never noticed any performance issues with the Vim plugin.
I'm no expert, but I've heard (unconfirmed rumors) that the Neovim plugin is a little faster so maybe that would help your case.
You'll probably end up going full vim once you've dipped your toes in the water though, and then everything will be light speed
@@nodidog I do like vscode because of the integration with cmake. So it will be hard to switch.
@@lifeless9768 That makes sense, whatever works for you 👍 There is a good selection of cmake integration plugins out there that you may find useful though, cmake4vim, language servers for code completion etc.
why would you insert tabs in read only?
I think I'm just used to it at this point.
Hi!
I was delighted with your video and would like to know what color scheme was used in this example. Amazing.
Thanks Aline! I was using Gruvbox theme in the video.
while install vim i cannot close the tabs by crtl+w i try to change in keybinding but is not working
can u help true && thanks for the vdo really loved it i also added some of my own key binding with the help of this vdo || removed vim :D
I'd open keybindings settings in VSCode and search `command w` and see how it is set.
@@SuboptimalEng i userd
"vim.normalModeKeyBindingsNonRecursive": [
{
"before" : ["" , "w"],
"after" : [],
"commands" : [
"workbench.action.closeActiveEditor"
],
}
]
n thanks again :)
what theme are u using?
Gruvbox
Where do I find the settings file???
You can find them on my GitHub under the Dotfiles repository 👍🏾
why
command + shift + x
when you just move your mouse 1cm to the left....
Because using the mouse is suboptimal
@@SuboptimalEng no its not.
Its like:
Hey,
instead of moving your mouse 1cm, just Press CTRL + V + X + F2 + Tab + K + L
Why? because moving mouse is suboptimal, then you are not a good programmer
But bro where do I learn it from ?