Webstorm cheat sheet

webstorm-cheat-sheet.md

A. Webstorm cheat sheet

https://www.jetbrains.com/webstorm/documentation/WebStorm_ReferenceCard.pdf

Set keymap

File > Settings > Keymap > Visual Studio

Fixes Undo / Redo Keys

Disable code reformatting

There does not semm to be a global setting for this.

File > Settings, Locate Editor > Code Style settings.

Find “Formatter Control” and tick 'Enable Formatter markers in comments'.

Now add // @formatter:off at the top of each JS file and edit like normal.

Via http://www.gamefromscratch.com/post/2015/02/01/Preventing-IntelliJ-code-auto-formatting-from-ruining-your-day.aspx

Multi cursor / multi region edit

A-j Add next occurence
A-S-j - Unselect next occurence

Folding

Use the context menu in the editor, or:

Code > Folding

https://www.jetbrains.com/webstorm/help/folding-and-expanding-code-blocks.html

C-NUM+ Expand current block
C-NUM- Collapse current block

C-S-NUM+  Expand all blocks
C-S-NUM-  Collapse all blocks

C-A-NUM+  Expand current block recursively
C-A-NUM-  Collapse current block recursively

Bookmarks (modified)

F11 Next
S-F11 Previous

C-F11 Toggle

Disable Inspections (analysis, suggestions and spell checker)

File > Settings > Editor > Inspections

Select a language in the list and klick the blue checkmark 1-2 times until unchecked. There is also an entry for spell checker in that list.

Reformat source code

C+A+l OR Code > Reformat Code

In the project tool window, right-click the file with the code you want to reformat and from the context menu, select Reformat Code.

File related shortcuts

C-S-c Copy path to file

C-F4 Close current file

Open recent file

C-e OR View > Recent Files

Settings

Fix scrolling

File > Settings > Editor > General 
  (in the right pane at 60%:)
    Scrolling
       untick "scrolling"

Enable mouse wheel zooming

File > Settings > Editor > Change font size with Ctrl+Mouse Wheel

Change font size

File > Settings > Editor > Colors & Fonts > Font, Size:

Before you can change this setting you must click "Save As..." and save the scheme under a custom name.

Change JS indent

File > Settings > Editor > CodeStyle > JavaScript
  (in the right pane on the 1st tab:)

Use live templates/snippets

To produce entire code constructs. WebStorm comes with a wide range of ready-to-use live templates, or snippets, which you can explore in the Settings dialog

C-j OR Code > Insert Live Template and surround templates

C-A-j OR Code > Surround with Live Template 

To surround with complete code constructs:

C-A-t OR Code > Surround With 

If you see that you are lacking something especially important for your development goals, extend this set of snippets with your own ones.

Settings > Editor > Live templates

B. Download / Install / Migrate

https://www.jetbrains.com/webstorm/download/

Migrate

To export IDE settings to a JAR archive

On the main menu, choose File | Export Settings

In the Export Settings dialog box that opens specify the settings to export by selecting the check boxes next to them. By default, all settings are selected.

In the Export settings to text box, specify the fully qualified name of the target archive. Type the path manually or click the Browse button browseButton.png and specify the target file in the dialog that opens .

To import settings from a JAR archive

On the main menu, choose File | Import Settings

In the Import File Location dialog box that opens select the desired archive.

In the Select Components to Import dialog box that opens specify the settings to be imported, and click OK. By default, all settings are selected.