Quick tips about Navigation in Webstorm or other IDEs of Jetbrains

Nguyen Tien Dat
2 min readJun 14, 2021

I have been using Webstorm and PhpStorm for more than 1 year and I feel that Webstorm is the best IDE for the web developer (at least for me). I have reasons to say that because the Jetbrains IDEs are always useful, smart, and Jetbrains understands what the user and the customer need. So, we should use it smarter. I hope that you will achieve some good tips in this article.

In this article, I will use Create React App for demos because It’s popular and easy to implement. You can use anything you want as long as It’s can 😸

Go To Declaration

Navigate to the initial declaration of the instantiated class, called method, or field.

The default with Linux and Window is Ctr B or you can cursor in the position you need to move and right-click > Go to > Declaration and Usages

https://www.jetbrains.com/help/idea/mastering-keyboard-shortcuts.html

Move Statement Up/Down/Left/Right

It’s so helpful if you frequently work with HTML. Not only for HTML but also for Javascript or another language.

Switch file with Alt

Yeah, It's easy to use by type Alt + Left or Right Arrow to switch.

We can reduce a little of time by this movement.

Select file in Project View

So useful, many colleagues want to use this function but they don’t know the keyword to search.

Try doing this and you will like it from the first view.

There are a lot of other tips (finding, plugins…). I can introduce to you when I have the time and add more to this article.

Thanks!!!

--

--

Nguyen Tien Dat

I am experienced in designing websites based on ReactJS to create beautiful and friendly websites for the user.