webstorm tutorial

note: its a window system version, may not useful in Mac OS

learning keyboards shortcuts

if you want to make webstorm to be a magic bar, you need to remember three things.

• first, reading 'keymap reference' in help>keymap reference
• second, remembering the short key ctrl shift a, and you can use command name to search command to instead of short keys
• third,to download the plugin "key promoter", which will prompt you short keys when you use mouse to execute some actions.

Is it enough? You need code more.

autocompletion skills

• skill 1: if you want to improve your autocompletion skill, you can use camel keys in 'document', for example:
  we type document.gebi to get document.getElementById, and type document.ceb to get document.createEventObject'.
• skill 2: if we want to change document.getElementById to document.getElementsByTagName. we can type gebtn at the
  begin of getElementById, and then we will see autocompletion tips, we choose getElementsByTagName item and click tab
  rather than enter, getElementsByTagName will completely override getElementById.
• skill 3: using alt /(alt + slash) to choose or autocomplete words which is base on exited word in the file.
• skill 4: download libraries to autocompletion. using ctrl+alt+s to open setting panel, then choose input box
  and type libraries to search,

use libraries.jpg

use libraries2.jpg

look at above the pictures, we download libraries from TypeScript community stubs and choose react to download. and then
get prompt when we type in react. it's awesome.

Formatting your code.

In window system, use ctrl+alt+l to format your code. Remember, you can to to file>sitting>code style to cinfig the
format rules.

code selection is a good thing.

in default, the hot key of "expend selection and shrink selection" is ctrl+w and ctrl+shift+w, but you can change this
configuration in 'setting>main menu>edit'. it will help you save your time if you using code selection expertly.

efficient reduce duplicated code

in your code, maybe will see following code:

var name = document.getElementById('id').nodeName
var value = document.getElementById('id').nodeValue

on the above, document.getElementById('id) occur twice, so you may want to simplified it. it is easy.
look at this gif:

ctrl+alt+v.gif