Must Know WebStorm Keyboard Shortcuts (Tips or Tricks) to Boost Productivity
Published: 2024-01-11 13:57:28

---
title: Must Know WebStorm Keyboard Shortcuts (Tips or Tricks) to Boost Productivity
published: true
date: 2024-01-11 13:30:37 UTC
tags:
canonical_url: https://sehrishnaveed.hashnode.dev/must-know-webstorm-keyboard-shortcuts-tips-or-tricks-to-boost-productivity
---

One of the giant advantages of **WebStorm** is that it provides numerous keyboard shortcuts. Most of the developers arent even aware of these life savers. In this article, I am going to list shortcuts for both beginners and experienced developers.

In the article, I am using the [ReactJS project](https://github.com/facebook/react) by Facebook in the screenshots.

I wrote **macOS** commands in the description. Please see screenshots to check out the respective **Windows** platform command.  
Additionally, I am using [Presentation Assistant Plugin](https://www.jetbrains.com/idea/guide/tutorials/presenting/presentation-assistant/) to show the shortcuts being used in screenshots.

### **1. Print console.log Faster**

console.log is a frequently used statement for debugging application code. To write the command faster, there are different ways.

1- Type log and press **tab** key or **tab + /** key  
2. First type text to print, then type **.log** and press **tab**

**Example 1 - Print text using log**  
Type log + press **tab** => console.log(

**Example 2 - Print text using .log**  
Type 'Function called'.log + press **tab** => console.log('Function called')

**Example 3 - Print text + variable using .log**  
const language = 'javascript';  
Type 'Function called', language.log + press **tab** => console.log('Function called', language)

### **2. Comment Out Code**

Multi-line Comment - To comment out block of code, press **(cmd + shift + /)** and press the shortcut again to un-comment

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-webstorm-block-comment-1024x634.png)

To comment out a single line, select the code and press **(cmd + /)**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-webstorm-line-comment-1024x634.png)

### **3. Search File or Folder**

To search a file in the project, double press **shift** and a popover will appear. Additionally, there are tabs in pop-over to refine search criteria 👏

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding-search-file-everywhere-1024x806.png)

### **4. Search Text Everywhere**

To search any function, variable or text in the project, press **cmd + shift + F, and** a search popup will appear. You can type the search term in the pop-up and can see results in the pop-up window. Additionally, there are tabs in the pop-up to refine search criteria 👏

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-find-text-everywhere-1024x813.png)

### **5. Last Edited Location**

This is an awesome feature so when we are working in multiple files, we often want to navigate back to the last location. Just press **cmd + [** to go back to the previous edited location and press **cmd +]** to move forward.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-navigate-back-1024x813.png)

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-navigate-forward-1024x813.png)

### **6. Recently Modified Files**

If you need to see recently changed files, press **cmd + E** and you will see the changed files list in the pop-up window

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-recent-files-1024x669.png)

### **7. Jump to Line Number**

This feature is useful when something crashes and there is a line number in the exception. To directly jump to the line number in the file, press **cmd + L**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-jump-to-line-1024x694.png)

### **8. Multi-Cursor Editing**

If you want to edit on multiple places at the same time, press and hold **Option** key and **click cursor** on the places you need to edit. The cursor will start blinking on every place where you click. Make changes and press enter and we are done.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-multi-cursor-editing-1024x618.png)

### **9. Rename a Function or Variable**

To rename a function press **shift + F6** and type new name. This will change the function or variable name in all the places.

In case the function is used across multiple files, IDE will show a list of changes and a change-list window on hitting enter.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding-rename-1024x694.png)

### **10. Select Opened File in the Project Window**

In large code bases, we need to do a lot of scrolling to view files. To view an opened file in the project view,

1. Press **Option + F1**. IDE will scroll to the selected file and IDE will scroll to the opened file in the sidebar.

2. Using the mouse, click on the highlighted icon in the screenshot and IDE will scroll to the opened file in the sidebar.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-select-opened-file-1024x694.png)

### **11. Fold Code**

To fold a single function, place the cursor at the start of the function and press **cmd - (cmd + minus sign)**.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-fold-single-function-1024x671.png)

To fold all functions, press **cmd + A** to select file content and then press **cmd shift -**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-fold-all-functions-1024x642.png)

### **12. Expand Code**

To Expand/Unfold a single function, place the cursor at the start of the function and press **cmd + (cmd + plus sign)**.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-expand-all-functions-1024x723.png)

To expand all functions, press **cmd + A** to select file content and then press **cmd shift +**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-expand-single-function-1024x723.png)

### **13. View File Structure**

To see the complete list of functions in a file, press **cmd + F12**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-file-structure-1024x723.png)

### **14. View Function Declaration (Implementation)**

To see a function implementation, place the cursor on the function name and press **cmd + B**. To do it using the mouse, press and hold the **cmd** key and **click** the function name

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-function-implementation-1024x723.png)

### **15. Find Function Usages in the Codebase**

To view the places a function is used in the codebase, place cursor at the start of the function and press **Option + F7** OR **right-click** in the file and click **Find Usages**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-find-usages-1024x723.png)

### **16. Move Statement Up/Down**

To move statements, place the cursor in the statement and  
- press **cmd + shift + up**  **arrow** key to move the statement up.  
- press **cmd + shift + down arrow** key to move the statement down.

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-move-statement-up-1024x723.png)

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-move-statement-down-1024x723.png)

### **17. View File in Finder**

To open a file in new window, **right click** in file -> click **Open In** -> click **finder**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-open-in-finder-1024x723.png)

### **18. Move Statements in IF Condition or Function**

To move a code block in an IF statement or a function, press **option + cmd + T**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-code-refactor-1024x723.png)

### **19. Convert Promise Returning Function to async-await**

This short-cut is very useful for refactoring old JavaScript codebase using callbacks.

You can easily convert a function returning promise using callback to async-await format.  
Place cursor at the start of function and press **option + enter**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding-convert-to-async-1024x538.png)

### **20. Local History**

WebStorm maintains local history. If you need to see old code, you can use Webstorm's local history.  
To view the local history of a file, **Right click in file** -> click **Local history** -> click **Show History**

![](https://mastercodding.com/wp-content/uploads/2023/10/mastercodding.com-view-local-history-1024x723.png)


### **Summary**

This brings us to the end of the shortcuts list. I have listed shortcuts for tasks that are most common. Hope this helps to boost your productivity. Find below the list of shortcuts we explored in this article

1. Print console.log Faster  
2. Comment Out Code  
3. Search File or Folder  
4. Search Text Everywhere  
5. Last Edited Location  
6. Recently Modified Files  
7. Jump to Line Number  
8. Multi-Cursor Editing  
9. Rename a Function or Variable  
10. Select Opened File in Project Window  
11. Fold Code  
12. Expand Code  
13. View File Structure  
14. View Function Declaration (Implementation)  
15. Find Function Usages  
16. Move Statement Up/Down  
17. View File in Finder  
18. Move Statements in Condition or Function  
19. Convert Promise Returning Function to async-await  
20. Local History

If want to know about any other shortcut, drop a message in the comment section.

Please like and share the article if you find it helpful.

**Note:** _The inspiration for the article is taken directly from_ [_JetBrains Official Site_](https://www.jetbrains.com)_. You can see the complete list of shortcuts on_ [_tips page_](https://www.jetbrains.com/webstorm/guide/tips/)_._