Skip to main content

Webstorm Tips

Features​

In Webstorm, you can use Find text in files or Ctrl + Shift + F to search a text within a folder.

This gives you a floating modal of a result which you can browse and double-click to open one file from the result up. Besides, you can update the content right on the modal.

You can also choose to search with Regex, Match Case, File extensions to narrow the search.

note

Make sure to make directories you don't want to search as Excluded. the packages/functions/lib folder should always be excluded. By default, node_modules is excluded.

2 screen utilization​

If you are using a dual-monitor setup, you can find it useful that any modal, window by Webstorm can be dragged to any screen to leverage the multi-screen setup. When you want to compare code, file content, that would be of great help.

Ease file browsing​

With Webstorm, you can easily browse file and symbols with Ctrl + Click even if it has path name like: @functions/service/avadaService. On VS code, it would be hard to support this feature.

Besides, with Webstorm clicking on the docBlock file type will directly lead you to the Definition file thanks to Webstorm indexing feature:

Search anything​

You can use Shift (2 times) or Double Shift to open up the Search box, in here you can search file, symbol, classes or anything you want.

Git UI​

With Webstorm Git UI, you can view changes between files.

Besides, you need to merge you branch you will find that Webstorm will help you a lot with the Conflict Resolution modal.

You can see Webstorm post on the Git Merge to understand: https://www.jetbrains.com/help/webstorm/resolve-conflicts.html#CRLF_warning

Tips​

Remember to enable Eslint & Prettier​

In the Setting menu, remember to enable the Eslint and Prettier for your project.

Reveal file on a tree​

Click here to view current open file revealed on the Project File tree view.

Context Actions​

Context Action are recommended actions by the IDE such as:

  • Import missing file imports
  • Refactor, clean code advice
  • Add missing required props

Most of the time, it is to automatically import the missing import using Alt + Enter to show the Context Action Menu

Use Live template​

Live template is library of your own short cut for snippets. In my case, it can be like

Definitely I would rather type newControllerAction and Tabs more than using mouse to copy from other controller file.

Use Webstorm Run instead of Commmand Line​

Use Webstorm Run to run your command to save your Environment Variables settings, argument, Node Options, Node Version and even more right out of the box:

Add your command line to Webstorm​

You can use your favorite Shell in Webstorm, remember to use it.

Leverage use Webstorm refactor instead of manually update the code​

Use Find Usages to search for function usages more easily​

Sum up​

There would be a lot of tips and tricks with IDE, you can explore further on your own for your tailored development experience.