Introducing powerful shortcut keys in Visual Studio Code

Hello.
I'm Mandai, in charge of Wild on the development team.

When developing, the speed at which you can work depends on how familiar the editor is to your hands, so I want to use shortcut keys as little as possible and get used to them so that my hands move automatically

Even so, there are some shortcuts that you only use occasionally, or that you use often but just can't get used to and your body rejects.
Also, as a memo to prevent the wasteful situation of thinking "Wow, this is convenient" but then forgetting it later, I would like to introduce some shortcuts that can be used in Visual Studio Code (hereinafter referred to as VSCode), which are known only to those in the know and are hard to find even if you search for them.

The key configuration may vary depending on the version used, but the shortcuts listed in this article were verified using version 1.17.2

Jump the cursor to the matching parenthesis

Ctrl + Shift + \

In the case of JS or PHP, it responds to "[", "{", "(", etc

In the case of HTML, it seems to react to pairs of "<" and ">" placed before and after tags

 

Chord folding at cursor position

Ctrl
+ Shift + [ Ctrl + Shift + ]

The top is collapsed and the bottom is expanded.
As you use it, it can get tedious to have to move the mouse cursor to the line number every time.

 

Code folding for the entire file

Ctrl + k -> Ctrl + 0

Ctrl , k and 0 in that order.

 

Expand all collapsed code folds

Ctrl + k -> Ctrl + j

Ctrl , k and j in that order.

 

Make selected JSON data easier to read by adding line breaks and indents (JSON pretty)

Alt + Ctrl + m

If parsing is not possible, a warning will be displayed, so it can also be used to check the structure of JSON data

I introduced this feature even though it's not a standard feature. It's so convenient...
Please install JSON Tools

 

Delete the entire line

Ctrl + Shift + k

In Eclipse, Ctrl + Shift was set up so I could delete using just my left hand.

 

Add a newline before the cursor line

Ctrl + Shift + Enter

If you're not sure, imagine pressing Home Enter

 

Move to the beginning/end of the file

Ctrl
+ Home Ctrl + End

You can also add Shift

 

Switching Editor Tabs

There are several ways to switch editor tabs using the keyboard, so I will introduce them here

Ctrl + Tab

Select from a list of open files

Ctrl
+ Page Up Ctrl + Page Down

Switch to the next editor tab

 

Comment out / Uncomment

Ctrl + /

Commenting out is a standard function, but for the following reasons, I always do it via shortcut keys unless there is a very good reason not to

• When you comment out using a shortcut, it will comment out with the proper indentation so as not to break the indentation
• The shortcut key combination for block comments is too unfortunate ( Ctrl + Shift + a ).
• The combination of selection and block commenting does not work as intended, and commenting multiple lines produces the intended result
• VSCode comments out extensions according to the programming language, which is convenient for people who switch between different languages

Well, the biggest advantage is that you don't have to think about unnecessary things.
The disadvantage is that code folding doesn't work for multi-line comments.

 

summary

When developing, the thing you spend the most time doing is probably moving your right hand back and forth between the mouse and keyboard (that's a bit of an exaggeration). If
you could reduce that time even a little, your development speed would increase and you would be able to do better work and be more productive.

a surprisingly popular article, " Alt -Obsessed Visual Studio Code Shortcuts Starting with Alt ," so please check it out too.

That's it.