VS Code Shortcuts
Visual Studio Code is a leading code editor that has been widely adopted by software developers worldwide. Developed by Microsoft, this IDE supports cross-platform coding on Linux, Mac, and Windows, making it an excellent choice for modern-day developers. However, with so many features and options, it can be challenging to keep up with all the latest tricks and techniques to use the editor efficiently.
In this regard, we have compiled a list of six keyboard shortcuts and handy tricks that can help you maximise your productivity and make the most of Visual Studio Code. So, let's jump in and explore the top Visual Studio Code tips to help you code more efficiently.
VS Code Keyboard Shortcuts for Windows
1. Command Palette
.gif)
Command Palette is the go-to place to find all the functionality and shortcuts you have in VS Code. It gives you access to all the operations you have and needs to work productively. To open the Command Palette, you have to type [Ctrl + Shift + P].
2. Search Files
.gif)
VS Code allows you to search for a particular text inside your current files and also in all the files in the current directory. Type [Ctrl + F] to search in the current file and [Ctrl + Shift + F] to search in all files.
3. Multiple Cursors
.gif)
Multiple Cursors allow you to make edits in multiple lines simultaneously. It is very useful on occasions when you to similar changes across lines.
To create multiple cursors, type [Ctrl + Alt + Up/Down(keyboard button)].
4. Delete the Line
.gif)
Delete the Line allows you to delete a whole line at once instead of deleting it letter by letter or word by word. To delete a line in VS Code, you have to go to the line you wish to delete and type [Ctrl + Shift + K].
5. Copy Line Up/Down
.gif)
This shortcut allows you to copy a line, up or down in VS Code. Go to the line you want to copy and type Shift + Alt + Up/Down(keyboard button) to create a copy of the current line up or down the current line.
6. Preview Markdown
.gif)
VS Code not only allows you to write in Markdown but also allows you to preview the file. To do so, open the Markdown preview window by typing [Ctrl + Shift + V].
7. Toggle Sidebar
The VS Code sidebar that is located on the left-hand side is one of the most important part of the UI. It's home to lots of features like File structure, Search, Extension Marketplace and others.
However, it can also be a distraction while coding and it'll also take part of your coding screen. In such cases, you can easily toggle the sidebar by pressing Ctrl + B.
8. Rename Component
If your project is big and component is matured, changing the name of the component can be really hard now. Because you have to also update the name at places where it is referred.
Rename Component is a really powerful feature of VS Code that helps you here. Just move your cursor to where you have declared your component and type F2.
Now VS Code will change the component name and also update its subsequent references to reflect the updated name.
9. Select Current Line
Often times, you need to select and copy a whole line to paste it somewhere in the project either in the current file or another file. Creating a copy of the current line just one line above or below is easier, you have to just type Shift + Alt + Up/Down.
But what about when the location you want to paste the current line at is not an immediate neighbour? In such case, type Ctrl + L to select the line and copy paste it wherever you want.
10. Switch Tabs
Any serious project is incomplete without multiple file tabs opened in VS Code. Switching these tabs manually by clicking on them can be tiring and also result in productivity loss often times.
Instead, use Ctrl + Pg Up and Ctrl + Pg Down for quicker and effective switching of the tabs.
11. Search File
When working on a large project, jumping from one file to another is quite common and you don't want to scan through long list of directories and files to find the file you are looking for.
VS Code has a file search option to solve this problem. Type Ctrl + P and type the name of the file you are searching for.
12. Toggle Terminal
When you are working on a development project, many times you have multiple active terminals, one for running the dev server. Another for installing dependencies and so on.
However, Terminal takes up space on the screen and you don’t want it to appear on the screen when you are coding. In this situation, you can toggle the terminal by typing Ctrl + `(backtick).
13. Format Document
Format Document is a feature that enables you to automatically adjust the indentation and formatting of your code according to the preconfigured rules within the editor. It helps in improving the readability and maintainability of the code.
Type Ctrl + Shift + F to format the code of your current file.
14. Split Editor
Split Editor is a special feature of VS Code that allows you to view multiple files on one screen. It's really useful when you are comparing two different files or when you want to refer a file while making changes to another file.
Press Ctrl + \ to split the current file into another editor.
15. Select the current word
VS Code also allows you to copy the current word your cursor is located at. To do so, press Ctrl + D. This shortcut is really useful when you want to copy paste a certain word from the code.
VS Code Shortcut Commands for Mac
- Command Palette: Cmd + Shift + P
- Search Files: Cmd + Shift + F
- Multiple Cursors: Cmd + Opt + ↓ / ↑
- Delete the line: Cmd + Shift + K
- Copy Line Up/Down: Opt + Shift + ↓ / ↑
- Preview Markdown: Cmd + Shift + V
- Toggle Sidebar: Cmd + B
- Rename Component: F2
- Select Current Line: Cmd + L
- Switch Tabs: Cmd + Opt + Left / Right Arrow
- Search File: Cmd + P
- Toggle Terminal: Cmd+ backtick(`)
- Format Document: Shift + Opt + F
- Split Editor: Cmd + \
- Select the current word: Cmd + D
READ MORE:
