20+ AMAZING VS Code Tips I Wish I Knew Earlier

Here are the top VS Code tips from Twitter!
Original Tweet - / 1721910833683275986
*Newsletter*
Newsletter 🗞 - www.jamesqquick.com/newsletter
*DISCORD*
Join the Learn Build Teach Discord Server 💬 - / discord
Follow me on Twitter 🐦 - / jamesqquick
Check out the Podcast - compressed.fm/
Courses - jamesqquick.com/courses
*QUESTIONS ABOUT MY SETUP*
Check out my Uses page for my VS Code setup, what recording equipment I use, etc. www.jamesqquick.com/uses
00:00 - Intro
01:00 - Save File
01:10 - Switching Tabs
01:30 - Close Files
01:50 - Add vs code to path
03:10 - Toggle Terminal and Sidebar
04:20 - Zen Mode
04:55 - Auto hide pane extension
05:35 - Opening Files
06:40 - Searching and Replace
07:55 - Working with Markdown Files
09:15 - Selecting Multiple Instance
10:10 - Multiple Cursors
11:10 - Go to Definition
11:35 - Automatic Imports
12:45 - Expand Selection
13:25 - Command Palette
14:20 - Move sidebar to the right

[@cesarfrick5725]

One I use quite often when doing code reviews is Control + G, which allows you to go directly to a specific line, just write the number and the cursor will jump there. Another one quite useful is Cmd + Shift + O, which allows you to navigate the definitions in your file, in the same way that the Command Pallete allows you to navigate the files

[@AllAboutThatBase1]

Two of my favorites that I'm surprised weren't covered: 1. Option + Up/Down Arrow - This lets you slide code around higher or lower within the file. It operates on the current line with no selection, or on a selected block of code. It also adjusts indentation automatically as the line/block moves in and out of other blocks. 2. Command + / (forward slash): Toggles comment mode for the current line or selected block.

[@aidenberzins]

Literally use both of these constantly.

[@quoccuong1733]

one comand i find myself using all the time working on a huge file is the ability to Go forward and Go backward. this allows you to jump back to the last line your cursor was on even if the line is in another file. Very usefull

[@waleedbinalim]

Great tips James. There are two more shortcuts to know as well 1. Command + Option + Left/Right Arrow (Allows you to navigate through tabs in order of direction) 2. Command + Option + T (Closes all other tabs apart from the one opened)

[@christopheanfry2425]

So nice!!! It’s been almost a year that I’m using the sidebar on the right and just love it as you said it doesn’t affect the position of the code when toggling the sidebar. Your cmd shift w which closes vs code there is also cmd q which works by the way for any Mac apps. I’ve learnt a few that I will definitely use. Thanks

[@rubendacostaesilva8442]

As soon as James mentioned it, I was about to write a comment about people who use it should be hospitalized in a mental institution, but then I remember that before I've started to code, I use to work a lot with Adobe software (still do...), specially Photohop and Illustrator, and their panels is located in the right side, so I decided to give it a try, and now I'm starting to believe that maybe I should check a psychiatrist...

[@christopheanfry2425]

@@rubendacostaesilva8442 🤣🤣🤣 I should probably too!!!

[@knorkeFutzi]

Very nice, thanks. Additional shortcuts I use often (Windows): Editor: F12 when cursor is on a symbol -> go to definition of symbol Editor: Alt + Up / Down -> move line up / down Editor: Ctrl + Up / Down -> move shown code up / down without moving cursor position Editor: Alt + Shift + Up / Down -> copy current line up / down Editor: Ctrl + G -> go to line no. ... and of course Ctrl + Space to init IntelliSense ... There is so much more 😎

[@alpaca_growing_kit]

I didn't know init intellisense existed, this saves me so much time.

[@JamesQQuick]

Yeah there are too many for any individual video. Love all those!

[@noelpena4567]

I have sidebar on the right. I use VS code (sidebar default on the left) and OG Visual Studios (sidebar default on the right) and I realized I like it on the right better.

[@bacharsaleh6984]

you have missed most useful ones: close all open brackets in a file (very useful to know what are the high level objects or functions): CMD + k + 0 close current open brackets (could be a function, object, or any block): CMD + k + ] also to jump to specific line in a file: CMD + P , then add :128 --> this will jump to line 128

[@LiveType]

100% this. I was a little shocked it wasn't included. This helps a ton with large unwieldy files. But I mean when you start getting to said massive file sizes, I think it's time to refactor. The time you spend scrolling adds up.

[@lalvar]

You can just press CMD + G and line number, it will save one more keystroke

[@JamesQQuick]

Thanks for sharing. Those are great!

[@igorr4682]

I like the bar on the right as I work with Visual Studio a lot as well. This keeps things the same when hopping between Editors.

[@RobData]

You have a couple of things you might want to tidy up: at 6:48 you mention searching in a file and repeatedly say CMD Shift F but show on the screen Cmd+F; that needs some clarification. Then an error:: you say to open the terminal you press Cmd plus tilde but the actual key you press and show isn't the tilde but the back-tick. The back-tick is the ` character but the tilde is the horizontal wave-like character ~

[@2ru2pacFan]

That expand selection one is amazing! Definitely need it!

[@JamesQQuick]

Yeah I thought so too!

[@codewithguillaume]

Dude, you are the DUDE !

[@JamesQQuick]

Merci mon ami!

[@saifahmedanik]

(I never knew) shortcut for windows Expand Selection shortcut for Windows ---> Shift + Alt + Right

[@MegaJohn144]

I switched to VS Code from Sublime Text because ST started acting crazy after I installed Python 3.12. I wanted a powerful editor with low overhead and offered debugging of Python code. VS Code is great. I used it to develop a whole website using Flask. I can't wait to try these new tips.

[@Lucas2RC]

Thanks for these great tips. I am rather new to VSCode and programming, so these do improve efficiency.

[@DontFollowZim]

I don't move my main sidebar to the right but I do fully utilize the right sidebar (lots of tools like Git and Todo trackers over there) so I can keep some things visible even if I need to keep two (or three with lower/terminal) panes up at a time

[@JamesQQuick]

Oh interesting. I didn't know you could separate other things to the right that arent't in the main sidebar

[@Stoney_Eagle]

Ever tried to mass replace regular functions to arrow functions with regex replace that works with all the possible ways of type defining (generic, input, return) and multi lined? I think it took me longer to make that regex than it would to go in and change the 100+ functions manually but boy was it ever satisfying when I clicked that button 😂

[@everyhandletaken]

That definitely sounds like something I would do lol

[@likandokayombo]

Thank you for this

[@JamesQQuick]

No problem 😊

[@lontus-racref]

Just FYI so you don't jump into pull requests trying to change documents on Windows, the shortcut is ALT+[Number].

[@JamesQQuick]

Great catch!

[@juanmacias5922]

Vim keybindings!

[@sawzarnilinhtay5551]

Which font du u use, sir??

[@kevinbellock6825]

can't believe I never knew how easy it was to add vs code to path from within vscode

[@JamesQQuick]

What a nice little feature right?

[@nevermindthelabel]

team sidebar on the right, and vim/which key plugins are great

[@JamesQQuick]

Nice! Have you used VIM for a long time?

[@marty2327]

So after you command click on a function to see its definition, is there a way to get back to the code you were looking at before you went the the function definition?

[@JamesQQuick]

Hmm, not sure the best way. I just ctrl+tab back to the previous tab

[@Aedaeum]

You can hit the back button on your mouse

[@raybaxter4683]

There's "Go previous" in the command palatte that you could bind to something.

[@Icemourne_]

As an ultra-wide user, I don't have any problems keeping the sidebar and terminal always open Tbh closing the sidebar would make my experience worse because the code would be way to the side also I have browser open on the second monitor

[@JamesQQuick]

haha I kinda struggle with that a bit. The code being too far away

[@jesper.ordrup]

Left / Right - give it days. After that youre ready to the next level - auto hide

[@bp-ob8ic]

Is there a shortcut to toggle column selection mode? Multiple cursors looks pretty cool, and might be actually better for most of my use cases. Great content as always, James. Thank you!

[@rubendacostaesilva8442]

Not by default, but you can customize it for yourself, if it's something that you use a lot of time.

[@JamesQQuick]

What do you mean by column selection mode?

[@bp-ob8ic]

@@JamesQQuickLast item on the selection menu.

[@raybaxter4683]

@@JamesQQuick This a something I use frequently. It is similar to multiple cursors, but it is strictly by column. Suppose your cursor is on line 5 column 5 and you have CSM on. If you hold down shift and down/right arrow to line 10 column 10, you've now six cursors. You can delete, or navigate within that selection to change all 6 selected areas simultaneously. This is very handy for columnar data, and sometimes for code. Example of the later would be is you'd aligned the = signs in a block of code and needed to shift multiple rows to the right because a new row had a longer left hand side.

[@user-hi9nz6dh5w]

You should also mention that almost all of these work in Visual Studio also. A few have slightly different keyboard commands.

[@JamesQQuick]

Nice! I don't use VS Code anymore so I didn't know, but that makes sense

[@HoNow222]

Side bar on the right is the best thing ever. Anyway your input curson has a weird animation, is that a plugin?

[@everyhandletaken]

No, that is standard in VS Code - 'Editor: Custom Blinking' within settings - I think he has this on 'expand' which I use too.

[@JamesQQuick]

Yep, this!

[@DonovanCYoung]

I use Sidebar left, code middle, terminal right

[@williammckeever4790]

Having the sidebar on the right makes so much more sense, unfortunately I could never get used to it and always go back. Think I'll give it another try as I have not used the editor for a while and that might help me get used to the new location. Just have to stick with it.

[@JamesQQuick]

Yeah I tried it too and it just never clicked

[@janmejaypurohit721]

How do we setup path suggestions in the terminal?

[@JamesQQuick]

That's a tool called Fig.io. It's really nice!

[@havetrustissue8975]

Command + B for sidebar toggle.

[@ronaldpaek]

Should we invest in learning vim motion for vs code?

[@JLarky]

Yes

[@JamesQQuick]

I think lots of people would say yes. I'd just say it's a big learning curve, but many people find it incredibly productive

[@ronaldpaek]

@@JamesQQuick did you learn vim motion or attempted to learn it? I knew all the vs shortcuts but I want to be more efficient >.< but I also don’t want to waste too much time either

[@JamesQQuick]

I haven't learned it myself, so I can's speak from personal experience@@ronaldpaek

[@moneyfr]

Could you do video on zellij ❤

[@JamesQQuick]

What is that?

[@moneyfr]

@@JamesQQuick it's like termux but with more function

[@MikeNeder]

I've actuality never seen that intellisense that you got going on in terminal.

[@alexanderkomanov4151]

🎉🎉🎉

[@moneyfr]

00:50 and I am on Linux 😂😂🎉

[@kenshinhimura3140]

Thank you

[@chhavimanichoubey9437]

Rage quit, giggling internally, because it might be true to some people, when they are stuck in coding problems.

[@raphael_santiago]

"shift+ctrl+command" I thought you said "command" should be "ctrl" on windows? So it's shift+ctrl+ctrl??

[@JamesQQuick]

Yeah that's one that's a bit different.

[@Dev-sf3pz]

I think you discover much off these the more you have the mentality of using the mouse as little as possible, then you are forced to find out what keyboard shortcut exists to accomplish that.

[@SquaredbyX]

How are you opening that search bar at the top lol. Step zero pls.

[@raybaxter4683]

Command-Shift-P

[@MiguelLopez-mu1ss]

Vscode is good for making github pr reviews with their extension... if vim keybindings are installed... it's almost 2024, nvim ftw

[@jabthejewboy]

Best vs code tip: switch to neovim

[@JamesQQuick]

Oh yeah? What do you love about it?

[@jabthejewboy]

@@JamesQQuick the plugin eco system, easy customization, the ability to use a simple scripting language to make any behavior you want, and the way your can flow through a document without even thinking about it once you get good at vim motions. Plus I feel that spending time in the terminal and learning how things in a system work at a lower level just makes you a better developer. Don’t get me wrong vs code is very good for some things, like an easy debugger interface, easy collaborative coding. I keep it installed for those things. But I feel that neovim is just the best tool out there purely for editing text files and the plugins make it just as good for most things as any ide accept for some edge cases.

[@shakirparke]

You're so handsome

[@Aedaeum]

The real ones have their sidebar on the right.

[@zebapy]

These all are like front of the page manual tips. I'd love some less popular ones.

[@StephenRayner]

Stopped watching when you wasted my time with cmd S -.-😊

[@JamesQQuick]

lol that was just the warm up

[@Mysteria9]

​@@JamesQQuick Do you really consider cmd+s an amazing shortcut you wish you knew earlier? 😉

[@JamesQQuick]

haha that was basically an accident. It was just listed on the twitter thread so I threw it in. I definitely regret starting with that one haha@@Mysteria9