Visual Studio Code (VS Code) is a free, open-source code editor launched by Microsoft. Resulting from its light-weight design, highly effective options, and in depth customization choices, VS Code shortly turned the preferred code editor amongst builders. VS Code also has a rich collection of extensions, help for a variety of programming languages, IntelliSense code completion, debugging capabilities, and built-in Git management.
Please observe that these shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it may very well be resulting from adjustments in shortcuts in your editor or file format or typically resulting from extensions put in.
Key Takeaways
Mastering VS Code can considerably improve your developer expertise. This text discusses tips on how to use VS Code keyboard shortcuts to simply navigate, edit, and handle your code base.
- Fast Navigation: Use Ctrl + P (Home windows/Linux) or Command + P (macOS) to immediately discover and open recordsdata, streamlining your workflow.
- Entry Settings: Customise your VS Code settings simply with Ctrl + , (Home windows/Linux) or Command + , (macOS).
- Environment friendly Modifying: Choose all occurrences of a phrase or phrase with Ctrl + Shift + L (Home windows/Linux) or Command + Shift + L (macOS) for fast international edits.
- Duplicate Traces: Shortly duplicate strains of code utilizing Shift + Alt + ↓ (Home windows/Linux) or Shift + Choice + ↓ (macOS).
- Built-in Terminal: Toggle the terminal throughout the editor utilizing Ctrl + J (Home windows/Linux) or Command + J (macOS) to streamline command-line duties.
- Command Palette: Entry the command palette with Ctrl + Shift + P (Home windows/Linux) or Command + Shift + P (macOS) for fast command execution.
- Go to Definition: Bounce to definitions of variables, features, and lessons with F12, enhancing code navigation.
- Customized Shortcuts: Personalize your workflow by customizing shortcuts with Ctrl + Ok, Ctrl + S (Home windows/Linux) or Command + Ok, Command + S (macOS).
- Format Code: Use Ctrl + Shift + F (Home windows/Linux) or Choice + Shift + F (macOS) to format your code for higher readability.
- Rename Symbols: Safely rename variables, features, and lessons throughout your codebase with F2.
Simple VS Code Navigation Shortcuts
This part presents all of the Visual Studio Code shortcuts that assist you to navigate completely different components of the editor. In case you are new to VS Code, comply with this guide to get a complete understanding.
1. Open a File
When your initiatives develop, navigating via the file explorer to discover a particular file will be troublesome. So, it’s positively helpful to be taught this keyboard shortcut to open recordsdata simply in your mission.
- Home windows/Linux: Ctrl + P
- macOS: Command + P
2. Fast Swap Between Information
This VS Code hotkey means that you can shortly cycle via their lately opened recordsdata.
- Home windows/Linux: Ctrl + Tab
- macOS: Command + Tab
3. Open Settings
Visual Studio Code comes with many features and customizing options to fit your needs. This keyboard shortcut makes it easier to open those settings whenever necessary.
- Windows/Linux: Ctrl + ,
- macOS: Command + ,
You often need more space for the open files you’re working on. So, this keyboard shortcut is handy to show or hide the sidebar whenever necessary.
- Windows/Linux: Ctrl + B
- macOS: Command + B
5. Navigate Tabs
This VS Code switch tab shortcut is pretty useful when you have many tabs open and need to move between them. It shows you a list of the opened tabs, allowing you to switch tabs and select which one to open.
- Windows/Linux: Ctrl + Shift + Tab
- macOS: Control + Shift + Tab
6. Navigate Tab Groups
As developers, we all face situations where we need to open and update multiple files at once. Well, VS Code has the perfect solution for that. VS Code allows you to create a split editor by grouping your tabs into groups, and each editor group takes up part of the screen.
This keyboard shortcut makes navigating between groups in the split editor easier and faster. It also allows you to create a new group if the editor group you select in the shortcut is higher than the number of groups currently open.
- Windows/Linux: Ctrl + 1 or 2 or 3
- macOS: Command + 1 or 2 or 3
7. Open the Terminal
During your development, you’ll most likely be using the terminal a lot. Visual Studio Code lets you open a terminal window inside the editor. This saves you from moving between the editor and the terminal and lets you focus completely on the editor and the code.
- Windows/Linux: Ctrl + J
- macOS: Command + J
8. Split Terminal
You can use this VSCode hotkey to split the VS Code terminal. This lets you perform multiple terminal tasks, such as application execution and log monitoring, without switching between terminal windows.
- Windows/Linux: Ctrl + Shift + 5
- macOS: Command +
9. Open the Command Palette
With this VS Code hotkey, you can easily open the command palette. The command palette allows you to search through the commands you can use and execute them.
- Windows/Linux: Ctrl + Shift + P
- macOS: Command + Shift + P
Quick Selections
During development, you’ll most probably need to make selections in your code, whether for copying, cutting, or other purposes.
Instead of doing so with your machine’s mouse, doing it with the keyboard saves you time. These VS Code hotkeys give attention to making picks shortly.
10. Choose Present Line
Numerous occasions, you’ll want to choose the complete present line your cursor is at. This keyboard shortcut makes it quite simple.
- Home windows/Linux: Ctrl + L
- macOS: Command + L
Similar Occurrences
We often face situations where we need to rename a variable or simply change a certain repeated text or phrase throughout the current file. These 2 VSCode hotkeys can be used in a similar situation. The first requires you to already have the word or phrases selected, while the other doesn’t.
11. Current Selection
With this keyboard shortcut, you only need to select one occurrence of the text you’re looking for. Then, by pressing the keys of the shortcut, you’ll select all its occurrences in the current file.
- Windows/Linux: Ctrl + Shift + L
- macOS: Command + Shift + L
12. Current Word
This keyboard shortcut allows you to do the same as the previous one but without having anything selected. You only need to place the cursor on the word and press the shortcut keys.
- Windows/Linux: Ctrl + F2
- macOS: Command + F2
Note: On macOS, press fn at the same time as F2.
13. Select Until the End of the Word
When selecting a certain part of the code, you can easily move and expand the selection with this shortcut. You can use the right or left arrows to go in the direction you want.
- Windows/Linux: Shift + Alt + → or ←
- macOS: Shift + Option + → or ←
14. Duplicate Code
ctrl + c and ctrl + v is the universal keyboard shortcut to copy and paste. However, Visual Studio Code has a keyboard shortcut to duplicate code with just a single key.
You can use this keyboard shortcut to duplicate a selected line. You just need to keep the cursor in the line you need to duplicate.
- Windows/Linux: Shift + Alt + ↓
- macOS: Shift + Option + ↓
A number of Choices
These visible studio code suggestions will assist you choose throughout a number of strains to make essential modifications or additions. This protects you from repeating your self and saves you the extra time you’d spend doing the identical operation throughout a number of strains.
15. Choose a Column or Field of Code by Dragging the Mouse
This keyboard shortcut means that you can choose a number of strains directly.
- Home windows/Linux: Shift + Alt + drag mouse throughout the strains
- macOS: Shift + Choice + drag mouse throughout the strains
16. Select a Column or Box of Code with Arrow Keys
You can do the same as above, but without using your mouse. Instead of dragging a mouse, you use the keyboard arrow keys.
- Windows/Linux: Ctrl + Shift + Alt + → or ← or ↓ or ↑
- macOS: Command + Shift + Option + → or ← or ↓ or ↑
How to Use Find Results
Search functionality is a fundamental feature in all code editors. Even the simplest editors allow you to search with certain words, like function or variable names, phrases, or blocks of code, either in the currently selected file or across multiple files. Here are the keyboard shortcuts to simplify searching with VS Code.
17. Navigate Results
You can use this keyboard shortcut to move between find results in the active file.
Note: On macOS, press fn at the same time as F3.
18. Select Multiple Results
You can use this shortcut to navigate through and select multiple occurrences of the search results within the active file.
- Windows/Linux: Ctrl + D
- macOS: Command + D
19. Select All Results
If you’re using the find feature to make certain modifications to all the find results, this keyboard shortcut allows you to select all the find results.
- Windows/Linux: Alt + Enter
- macOS: Option + Enter
Code Navigation
As each file or project grows, it becomes harder to find certain parts of the code. Finding errors or going to the code at a certain line can be hard when doing it manually.
These visual studio code tips will save you the hassle and allow you to invest your time in what you actually want to do.
20. Go to Line
Finding code at a certain line is especially helpful when you get a compile or runtime error that specifies what line of code caused it. This keyboard shortcut eliminates the need to actually find the line yourself.
- Windows/Linux: Ctrl + G
- macOS: Control + G
21. Go to Matching Bracket
You’ll often find yourself needing to find the matching closing bracket of a block. This is especially true when the files grow with time. This keyboard shortcut allows you to easily find the closing matching bracket of the current block. HTML tags allow you to move to the end of the current tag.
- Windows/Linux: Ctrl + Shift +
- macOS: Command + Shift +
22. Fold/Unfold Block
When reading a file with a lot of lines or data, it’s easier to fold (hide) an entire block that you’re not currently focusing on so you can focus on something else. This keyboard shortcut allows you to fold or unfold a block. Click anywhere in the block and then hit the following keys.
- Windows/Linux: Ctrl + Shift + [ or ]
- macOS: Command + Option + [ or ]
23. Fold/Unfold Blocks and Sub-Blocks
What if the block incorporates sub-blocks? Utilizing the above command will fold the mum or dad, however when the mum or dad is unfolded, the sub-blocks will stay unchanged. If you’ll want to fold and unfold a block and its sub-blocks, you are able to do it with this keyboard shortcut.
- Home windows/Linux: Ctrl + Ok + [or ]
- macOS: Command + Ok + [ or ]
24. Navigate Errors and Warnings
Discovering errors and warnings in your code is crucial. Generally, some errors are usually not straightforward to seek out — resembling when a line doesn’t finish because it ought to. This keyboard shortcut saves you the effort of scrolling or completely wanting via the road to seek out the precise drawback. It means that you can transfer to the subsequent error or warning.
Be aware: On macOS, press fn concurrently F8.
Shifting the Cursor
In plenty of circumstances, you may must have a number of cursors, every at a special place within the file. These keyboard shortcuts assist to make it simpler to maneuver round with a number of cursors.
Insert Extra Cursors
There are two methods to insert an extra cursor into the file: both at a selected place or above/under the present line the cursor is at.
25. At Place
This keyboard shortcut means that you can insert an extra cursor at any level within the file.
- Home windows/Linux: Alt + mouse click on on the place
- macOS: Choice + mouse click on on the place
26. Above or Below
The second way you can insert a cursor is to insert it above or below each of the current cursor positions.
- Windows/Linux: Ctrl + Alt + ↓ or ↑
- macOS: Command + Option + ↓ or ↑
27. Undo Cursor Insert
This keyboard shortcut allows you to undo the last cursor insert. This is very helpful when you’ve inserted multiple cursors, as it allows you to keep the others in place and just removes the last inserted one.
- Windows/Linux: Ctrl + U
- macOS: Command + U
28. Insert the Cursor at the End of a Highlighted Selection
Another keyboard shortcut that makes your development faster is to insert the cursor at the end of a highlighted selection.
- Windows/Linux: Shift + Alt + I
- macOS: Shift + Option + I
Faster Coding
In this section, we’ll go through VS Code shortcuts that will make certain operations related to your code easier and quicker.
29. Move Lines and Blocks
A lot of times, you might need to move a line from one position to another. Instead of copying or cutting and pasting the line into another position, this shortcut offers a faster solution. Just place the cursor on the line.
- Windows/Linux: Alt + ↓ or ↑
- macOS: Option + ↓ or ↑
This will also move a whole paragraph of text that the cursor is active in. If you want to move a block of code, simply highlight that code before pressing the shortcut above.
30. Indent/Outdent Lines
As you copy lines from one place or file to another, or as you make changes to the code, the code will often end up wrongly indented. This shortcut allows you to easily indent or outdent lines as necessary. Select multiple lines to move them all together.
- Windows/Linux: Ctrl + [ or ]
- macOS: Command + [ or ]
In a lot of cases, you might need to comment or uncomment a line. This can be easily done with this shortcut. This works for both line and block comments.
Click on the line you want to comment out. (If you highlight a code block, this command will comment out each line individually.)
Unlike the above shortcut, the following shortcut will comment out the code you highlight as a single comment.
- Windows/Linux: Shift + Alt + A
- macOS: Shift + Option + A
33. File Formatting
This shortcut allows you to format documents entirely.
- Windows/Linux: Ctrl + Shift + F
- macOS: Option + Shift + F
34. Selection Formatting
This shortcut allows you to format just the selected set of lines in a file.
- Windows/Linux: Ctrl + K, then Ctrl + F
- macOS: Command + K, then Command + F
35. Quick Fix
In a lot of cases when there’s an error, VS Code can resolve it if it’s a common or simple mistake. For example, if a semicolon is missing. This shortcut allows you to apply the quick fix to any error or warning if the quick fix is available for it.
- Windows/Linux: Ctrl + .
- macOS: Command + .
36. Renaming
Renaming a variable, function, or class that’s used multiple times can be prone to errors if done manually. You might miss a usage of it in the current or a different file. This shortcut gives you a safe way to rename any symbol.
Note: On macOS, press fn at the same time as F2.
37. Trim White Spaces
Why manually trim white spaces from the end of a line when you can just do it with this shortcut?
- Windows/Linux: Ctrl + K , then X separately.
- macOS: Command + K , then X separately.
38. Change Programming Language
By default, Visual Studio Code detects the current programming language of the file you’re working on. Usually, it’s done by checking the extension of the file.
However, sometimes it doesn’t correctly detect the language if the file extension isn’t supported. So, if you need to change the programming language of a file, you can use this shortcut.
- Windows/Linux: Ctrl + K, then M
- macOS: Command + K, then M
39. Run Code
One cool VS Code feature is the option to run code right in the editor. This depends on the language, framework, or the kind of task you need to run. For example, you can set up debugging for Javascript projects. Nevertheless, if in case you have a debugger or activity runner configured, you need to use this shortcut to run code in Visible Studio Code.
Be aware: On macOS, press fn concurrently F5.
Higher Coding
Understanding your code is the important thing to sustaining a high-quality code base. Usually, we resort to googling a operate to see its definition or signature. Nevertheless, this may find yourself losing our time, or it won’t apply to the code we’ve created.
Consequently, VS Code has launched a set of shortcuts that can assist you produce higher code.
40. Go to Definition
This shortcut takes us to the file or line the place the a part of the code is initially outlined.
- Home windows/Linux/macOS: F12
Be aware: On macOS, press fn concurrently F12.
41. Peek Definition
This shortcut permits us to open definitions and documentation in the identical place we’re checking the definition. This makes it simpler to see the definition with out transferring to a different file or line.
- Home windows/Linux: Alt + F12
- macOS: Choice + F12
Be aware: On macOS, press fn concurrently F12.
42. Toggle Strategies
We frequently use VS Code or other extensions like GitHub Copilot to get code ideas. This shortcut permits us to toggle the ideas to see or cover them.
- Home windows/Linux: Ctrl + I
- macOS: Command + I
43. Present a Operate’s Signature
This is quite common with most, if not all, builders. We are inclined to neglect features’ signatures, even after they’re features that we use so much. With this shortcut, you’ll be able to simply see parameter hints for the operate. With the parameter hints, you’ll be able to examine what parameters you’ll want to go to the operate.
- Home windows/Linux: Ctrl + Shift + Spacebar
- macOS: Command + Shift + Spacebar
44. Zen Mode
Though that is unrelated to understanding the code and definitions, this shortcut is helpful in case you should be fully targeted in your code. With this shortcut, you’ll be able to allow Zen mode, which is able to change the show to be fully targeted on the at the moment open file.
- Home windows/Linux: Ctrl + Ok, then Z
- macOS: Command + Ok, then Z
Press the identical keyboard shortcut to return to the conventional editor view.
45. Shut All Editors
In case you are achieved with growth or really feel too many recordsdata are open, you’ll be able to shut them suddenly utilizing the shortcut under.
- Home windows/Linux: Ctrl + Ok + W
- macOS:
Command+Ok+W
Conclusion
VS Code is without doubt one of the greatest code/textual content editors for builders in the intervening time. It supplies plenty of out-of-the-box options in addition to an extension market that permits builders to simply contribute and supply extensions for the neighborhood.
Keyboard shortcuts make growth in VS Code even simpler and assist you to give attention to constructing good-quality initiatives in much less time.
On this article, we’ve coated some helpful Visible Studio Code shortcuts which can be assured to make your growth quicker. Aside from what we mentioned, VS Code comes with many extra shortcuts for fast actions. Listed below are hyperlinks for testing the entire set of default keyboard shortcuts to your OS:
FAQs About VS Code Shortcuts
How do I see all shortcuts in VS Code?
In VS Code, you’ll be able to entry the Keyboard Shortcuts view by urgent:
- Home windows/Linux: Ctrl + Ok adopted by Ctrl + S
- macOS: Command + Ok adopted by Command + S
Alternatively, you’ll be able to click on the gear icon (⚙️) within the backside left nook of the VS Code window and choose “Keyboard Shortcuts.” This view shows a listing of all default shortcuts, and you may seek for particular instructions, filter by classes, and even customise or reset shortcuts to your preferences.
What does Ctrl P do in VS Code?
In VS Code, urgent Ctrl + P (or Command + P on macOS) opens the “Fast Open” function. This function means that you can shortly seek for and open recordsdata, in addition to navigate to symbols and different gadgets inside your mission.
Whenever you press Ctrl + P, a small enter field seems on the prime of the editor. You can begin typing the title of the file or merchandise you need to open or navigate to. As you sort, VS Code will show matching ends in real-time. You should use the arrow keys to pick from the listing of outcomes after which press Enter to open the chosen file or merchandise.
What does Ctrl Shift L do in VS Code?
In VS Code, urgent Ctrl + Shift + L (or Command + Shift + L on macOS) is a keyboard shortcut used to pick all occurrences of the at the moment chosen phrase or textual content throughout the energetic file. This function is named “Choose All Occurrences.”
This may be significantly useful once you need to shortly discover and edit all situations of a variable, operate, or another textual content inside a file. It permits for environment friendly and constant adjustments throughout a number of occurrences with out manually deciding on every one.
What does F12 do in VS Code?
In VS Code, urgent the F12 secret is a keyboard shortcut used to set off the “Go to Definition” motion. Whenever you place your cursor on a variable, operate, class, or technique and press F12, VS Code will navigate you to the situation the place that image is outlined or declared.
This function is extremely helpful for shortly understanding code, exploring libraries or frameworks, and navigating giant codebases. It means that you can leap to the definition of a logo with out manually looking out via your mission’s recordsdata.
What does Ctrl Shift P do in VS Code?
In VS Code, urgent Ctrl + Shift + P (or Command + Shift + P on macOS) opens the “Command Palette.” The Command Palette is a robust function that means that you can seek for and execute varied instructions and actions inside VS Code.
The Command Palette is a fast and environment friendly solution to entry and execute varied options, settings, and extensions inside VS Code with out having to memorize all of the out there shortcuts. You should use it to open recordsdata, swap between open recordsdata, configure settings, set up extensions, and carry out many different duties.
How can I customise keyboard shortcuts in VS Code?
To customise keyboard shortcuts in VS Code, comply with these steps:
- Press Ctrl + Ok adopted by Ctrl + S on Home windows/Linux or Command + Ok adopted by Command + S on macOS to open the Keyboard Shortcuts view.
- There, you’ll be able to seek for the command you need to customise.
- As soon as you discover the command, right-click on it and choose “Change Keybinding” or click on on the pencil icon subsequent to the command.
- Enter the brand new key mixture you need to assign to the command and press Enter.
You can even edit the keybindings.json file straight for extra superior customization. This file will be accessed by clicking on the hyperlink keybindings.json on the prime proper nook of the Keyboard Shortcuts view. Right here, you’ll be able to manually add, take away, or modify keybindings utilizing JSON format.
