Webstorm tricks for node development

Jetbrains has provided some excellent docs on how to use Webstorm effectively. However, for basic simple things, I have found myself struggling with getting some pin-pointed tips for fast coding. So here is my contribution. Hope it helps.

Code Editing:

1. Find everywhere : Shift+Shift

Search everywhere

2. Multi-cursor selection for combined editing: bring the cursor to the text, press Alt+click

Multi-cursor selection

3. Refactor variable in whole file : select variable , control +T

Refactor a variable

OR use Search and click Select all occurrences by clicking Control + Command + G or clicking the button on right most of the search input field.

refactor a variable using search all occurences

4. Refactor a variable only for a scope: Fn + F6

5. Extended selection using keyboard: place the cursor at start of line and press Alt + Up Arrow . Shrink selection : Alt + Down arrow.

Extend selection

6. A whole list of shortcuts are described in Webstorm > Preference > Keymap

External Tools

1. Auto ESLint Fix: (applicable only if you use eslint for your project)

• Preferences > Tools > External Tools
• Click +` to add a new external tool
• Enter the values as shown below. Please note that the entry in Program field should be eslint if the program is installed globally. If installed locally, please change it to ./node_modules/.bin/eslint
• Click Apply > OK

• When ready to lint : Right Click at project > External Tools > ESLint Autofixer

2. Enable the JSLint and JSHint Plugins of webstorm for quick fixes and suggestions on code.

• Enable it from WebStorm >Preferences >Languages and Frameworks >JavaScript >Code Quality Tools >JSLint/JSHint.

Debugging Tools:

1. Run : Right click on a file and click Run <file>. This creates automatic Run profile.
2. Debug : Right click on a file and click Debug <file>. This creates automatic Debug profile. By default, this creates a Node Debug profile. But if the file is a test spec, you might have to Edit the Configuration to select Mocha or which ever test suite you are using.
3. Debug only one test from test suite: From the debug panel in the Debug window, click only the test which you want to run.

Call only one test case

You can also do the above by adding it.only to run just one test.

1. Add/Edit Debug profiles: Edit Configurations from Run menu, click ‘Edit Configurations’

Click + .

If running a node process, select Node and fill the elements that is needed for running the process.

If running mocha test, select Mocha and fill the elements required.

Webstorm NPM Tools Window:

If Node is already installed on the system, you will have npm tools window already enabled. This shows up in the left bottom corner of the window

Click npm to open up npm tools window and run the command directly from here.

Webstorm Version Control with Github.

If your code is already connected to Github, you can use the Version Control tool window automatically. View > Tools Window > Version Control. You can have shortcut in created in Tools Panels.

To see the difference in code from local to repository. Click the File you want to see the difference for and click on the icon on left for difference. Or right click on file and select ‘Show Diff’

References :

https://blog.jetbrains.com/webstorm/2015/06/10-webstorm-shortcuts-you-need-to-know/