Watercooler
March 14, 2023
5
min read

15 Great VS Code Keyboard Shortcuts

Ashutosh Mishra

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.

1. Command Palette

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

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

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

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

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

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

  1. Command Palette: Cmd + Shift + P
  2. Search Files: Cmd + Shift + F
  3. Multiple Cursors: Cmd + Opt + ↓ / ↑
  4. Delete the line: Cmd + Shift + K
  5. Copy Line Up/Down: Opt + Shift + ↓ / ↑
  6. Preview Markdown: Cmd + Shift + V
  7. Toggle Sidebar: Cmd + B
  8. Rename Component: F2
  9. Select Current Line: Cmd + L
  10. Toggle Terminal: Cmd+ backtick(`)
  11. Format Document: Shift + Opt + F
  12. Split Editor: Cmd + \ 
  13. Search File: Cmd + P
  14. Select the current word: Cmd + D

READ MORE:

15 Great VS Code Keyboard Shortcuts

March 14, 2023
5
min read

Subscribe to DevDigest

Get a weekly, curated and easy to digest email with everything that matters in the developer world.

Learn more

From developers. For developers.