DEV Community

loading...

Quick tips about Navigation in Webstorm or other IDEs of Jetbrains

Nguyen Tien Dat
I am experienced in designing websites based on ReactJS, NextJS to create beautiful and friendly websites for the user.
・2 min read

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

image.png

Move Statement Up/Down/Left/Right

ezgif.com-gif-maker (2).gif
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

ezgif.com-gif-maker (3).gif

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

ezgif.com-gif-maker (4).gif

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!!!

Discussion (0)