Webstorm Tips
Features
Section titled “Features”Fulltext search
Section titled “Fulltext search”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.
2 screen utilization
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Remember to enable Eslint & Prettier
Section titled “Remember to enable Eslint & Prettier”In the Setting menu, remember to enable the Eslint and Prettier for your project.
Reveal file on a tree
Section titled “Reveal file on a tree”Click here to view current open file revealed on the Project File tree view.
Context Actions
Section titled “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
Section titled “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
Section titled “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
Section titled “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
Section titled “Leverage use Webstorm refactor instead of manually update the code”
Use Find Usages to search for function usages more easily
Section titled “Use Find Usages to search for function usages more easily”
Sum up
Section titled “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.