Visual Studio Code has become one of the most popular code editors out there and for good reasons. The number of features and extensibility VS Code offers keeps getting better with time.
VS code offers all the best features required to make development work fun and hassle-free.
Top reasons why developers love VS code editor
- Multiple language support
- Nifty shortcuts
- Ever growing library of 24000+ extensions
- Plethora of themes to customize your workspace to your heart’s content
If you are new to VS code and want to know the most useful shortcuts to take full advantage of this awesome code editor, you have arrived at the right place. This blog will take you through the most useful VS Code shortcut keys, features and the best extensions to boost your productivity and transform you into a VS code Ninja!
VS Code Shortcuts for Beginners
Zen mode
Zen mode is a distraction-free view, allowing you to focus completely on your code and hide all the toolbars and buttons. You can activate ZEN mode with:
Windows: ctrl +K Z MAC: Cmd + K Z or by going to View > Appearance > Toggle Zen Mode.
Command Palette
The Command Palette will probably turn out to be the most used feature of VS Code for you if you are new to the editor. It presents to you every functionality, shortcut and configuration options in the form of a searchable list.
Let’s say you want to format your code and don’t remember the shortcut. Or you might want to simply change some settings, disable all extensions and you don’t want to go through the hassle of finding out where that option exists. Simply start typing what you want VS Code to do in the command palette and it will come up with all sorts of suggested commands to help you out.
You can access the command palette by the following key combination:
Windows: Ctrl + Shift + P Mac: Cmd + Shift + P
Search files
If you ever want to search for a piece of text in all your current project files, VS Code allows you to do that by either clicking the Search icon on the sidebar or by using the following keyboard shortcut:
Windows: Ctrl + Shift + F Mac: Cmd + Shift + F
Delete previous word
You can save a lot of time and avoid accidental deletion caused by the usual way of holding down Backspace. Just delete the previous word using:
Windows: Ctrl + Backspace Mac: Cmd + Backspace
Join line
Sometimes, a statement written in a single line turns out to be a lot more readable than multi-line statements. Code formatting can produce a lot of multi-line statements that you might want to revert back to a single line. Using the join lines shortcut, you can do that easily.
Windows / Linux: This action is not bound to any key by default. You can open keyboard shortcuts through the command palette and bind editor.action.joinLines to any key combination of your choice.
Select text word by word
Instead of using click and drag to select text, you can go for various keyboard shortcuts that enhance both speed and precision. One such shortcut allows you to expand your selection word by word. Use the following key combination to achieve that:
Windows: Ctrl + Shift + Left/Right Arrow Mac: Cmd+ Shift + Left/Right Arrow
Move line up/down
Want to move a certain piece of code to a different place in the current file? Skip the usual Cut-Paste and simply move the current line or selection up/down by using this shortcut:
Windows: Alt + Up/Down Arrow Mac: Opt+ Up/Down Arrow
Add multiple cursors
Multiple cursors in VS code are great time savers when you want to make the same edits at multiple places. You can add cursors above/below the current line by the following shortcut keys:
Windows: Ctrl + Alt + Up/Down arrow Mac: opt + Cmd + up or opt + Cmd + down
In case you want to add cursors at different places manually, you can use Alt + Left Click.
Comment lines
Commenting out old code to test some newly written lines of code? VS Code can make the whole process much simpler by allowing you to turn multiple lines into comments at once.
Use the following shortcut to comment the current line or multiple lines if they are selected:
Windows: Ctrl + K Ctrl + C Mac: Cmd+ K Cmd + C
Remove commenting from current or multiple selected lines by using:
Windows: Ctrl + K Ctrl + U Mac: Cmd+ K Cmd + U
You can toggle comments using:
Windows: Ctrl + / Mac: Cmd+ /
Select all results of a find operation
You can quickly select all occurrences of a find operation using this shortcut. It automatically adds multiple cursors at each occurrence. You can easily replace the text as well as start writing at each occurrence simultaneously. Pretty useful when you have to make similar edits at multiple places!
Windows: Alt + Enter Mac: opt + Enter
Toggle sidebar
Need more screen space? You can quickly expand/collapse the sidebar when not in use with this shortcut.
Windows / Linux: Ctrl + b Mac: Cmd+ b
Side by side editing / Split view
VS Code allows you to use split view while editing your files. So that you can have multiple files open at the same time on the screen. Split view is useful when comparing or editing two or more related files.
Windows /Linux: Ctrl+\ Mac: Cmd+\ or Cmd then select a file from the File Explorer.
Auto save
Forgetting to save your changes might lead you torun old code while testing. While VS Code keeps your changes in memory so thatyou can manually save them later, if you want you can enable auto saving ofyour work by following the steps given below.
- Open settings.json with Ctrl +, (Mac: Cmd + ,)
- Set "files.autoSave": "afterDelay"
- Alternatively, you can also toggle Auto Save from by navigating to File > Auto Save.
Windows: Ctrl + Shift + K Mac: Cmd + Shift + K
Copy line up / down
Whenever you want to add multiple similar lines in a file (could be multiple variable declarations, JSON key-value pairs etc.), It is almost always easier to write it once and then copy it over. You can make that even quicker by just using this shortcut and quickly copy the current line to the top or bottom.
Windows / Linux: shift+ alt + down or shift + alt + up
Mac: opt + shift+ up or opt + shift + down
Switch between views
We have already discussed what split view is and how to enable it. Once you have multiple files open in split view and you need to switch between them you can use.
Windows / Linux: Ctrl+1,Ctrl+2, Ctrl+3 Mac: cmd+1, cmd+2, cmd+3
Note: the number represents the position of the split view window you want to switch to.
Copy line up / down
Whenever you want to add multiple similar lines in a file (could be multiple variable declarations, JSON key-value pairs etc.), It is almost always easier to write it once and then copy it over. You can make that even quicker by just using this shortcut and quickly copy the current line to the top or bottom.
Windows / Linux: shift+ alt + down or shift + alt + up
Mac: opt + shift+ up or opt + shift + down
Shrink / Expand selection
Shrink / Expand the current selection through blocks of code. Useful when you need to quickly and precisely select text within a particular code block.
Windows /Linux: shift + alt + left or shift + alt + right
Mac: Ctrl+ shift+ Cmd + left or Ctrl + shift + Cmd + right
Navigate to a specific line
You must have seen line numbers being mentioned in error messages. Now, instead of scrolling all the way to the line number to fix the error, all you have to do is tell VS Code what line number you want to navigate to and save yourself the manual effort of scrolling. Handy, right? Simply use this shortcut and enter the line number you need in the command palette that pops up:
Windows / Linux: Ctrl+ g Mac: Ctrl + g or Cmd+ p
Trim trailing whitespace
Trailing whitespaces may look harmless but they may become a reason for bugs in certain environments. That’s why it is always a best practice to not keep them lying around in your code, irrespective of the language. You can trim trailing whitespace from the current line by using this shortcut.
Windows /Linux: Ctrl + k Ctrl + x Mac: Cmd+ k Cmd + x
Undo cursor position
Return the cursor to its previous position in the file. Useful when navigating to distant sections of code and then having to return back.
Windows / Linux: Ctrl + u Mac: Cmd+ u
Select current line
Select the current line quickly without having to use the mouse or touchpad.
Windows /Linux: Ctrl + l Mac: Cmd + l
Codefolding
Working with lengthy files and multiple blocks of code? Folding the blocks not currently in focus can help you focus and save you from distraction or accidental edits.
Windows /Linux: ctrl + shift + [ and ctrl + shift +] Mac: alt + Cmd + [ and alt+ Cmd +]
Open markdown preview
Markdown (.md) files are widely used for documentation and readmes. It has its own simple syntax to format and display text in a variety of ways. You can easily render and display Markdown files with proper formatting in VS Code too.
Just use the following key combination when you have a Markdown (.md) file open:
Windows /Linux: ctrl + shift + v Mac: shift + Cmd + v
Side by side Markdown edit and preview
Editing your own README.md for your project repo? Simply open the Markdown file in split preview. Here you will be able to make edits and view them instantly in the preview.
Windows /Linux: ctrl + k v Mac: Cmd+ k v
