Need more speed? Be a faster web developer

Today let's try to optimize your daily project work! I present you a racing series, this time not of a computer game, but of keyboard shortcuts.As a novice programmer, I was amazed at my older colleagues who could spend several hours providing solutions without taking their hands off the keyboard. However, the break between clicking was only time for conceptual work, not wasting energy on searching with the mouse for the correct file, class, method or appropriate action on the interface of our IDE.What makes some people move through code faster than others? Keyboard shortcuts!If you are still using the project tree and mouse to work, then the following reading is for you.Have a good race !

Navigating through the project

An everyday activity in a programmer's work is finding. As an example, let's try to add something to the method we created earlier:

1. open the project tree
2. find folder
3. choose a file
4. open the appropriate class
5. scroll until you see the method mentioned

What if we can do it like this:

1. Using the keyboard shortcut, activate the search window and enter the name of the method
2. Select a method from the list, automatically moving to the appropriate line

A comparison of the two approaches is perfectly represented by the gif below.

Keymap

In the further part of this article I will present, in my opinion, the most important keyboard shortcuts. However, I have to mention, that in most of the IDEs available on the market we can easily find the whole keymap ready to print, which I encourage you to do.

WebStorm / PhpStorm

Help -> Keymap Reference

Visual Studio Code

Help -> Keyboard Shortcuts Reference

Find a method

Want to find a method quickly? Use this shortcut:

WebStorm / PhpStorm

Ctrl + Alt + Shift + N (⌥ + ⌘ + O on macOS)

Visual Studio Code

Ctrl + T (⌘ + T on macOS)

And then type the name of the method. After just a few characters, you will see a list of methods, along with information about which files they came from.

Locate file

You know the name of a file but don't know where it is? No problem, just use the combination:

WebStorm / PhpStorm

Ctrl + Shift + N (⇧ + ⌘ + O)

Visual Studio Code

Ctrl + P (⌘ + P on macOS)

In the list, choose the file you are interested in.

Go to line

If you came to code after a code review, you will certainly want to go back to the line that was discussed to make changes. You do this by going to the specific file (for example, using the method above) and pressing:

WebStorm / PhpStorm

Ctrl + G (⌘ + L)

Visual Studio Code

Ctrl + G (⌃ + G on macOS)

And by entering the line we need.

Localise class

Do you remember the class names in your code well? Use the shortcuts below to easily navigate through them:

WebStorm / PhpStorm

Ctrl + N (⌘ + O on macOS)

Visual Studio Code

Doesn't have one :(

And choose the class you want.

Summary

With these four methods you can, at a small cost, significantly speed up your work with the project. An experienced programmer is not only able to optimize his code, but it’s also able to optimize work, so that the most valuable time can be spent on creative coding :)Article written by Hubert