Webstorm/Intellij Shortcuts

The proficient with IDE has high correlation with developer’s productivity.  One way to significantly improve it is to eliminate mouse usage and rely on shortcuts & keyboard.

In my opinion, the saved time (0.5-2 seconds) is not much but it avoids interruption in the “flow” of your thought.

Hence, I recommend all developers who work with JS (And IntelliJ/Webstorm🙂 ) to watch this video.

I summarize some of notable ones here (in Windows), categorized by their relation to make it much easier to “chunk” into your brain

Jumping between files (2:10)

  1. Ctrl + E = Open recent file
  2. Ctrl + Shift + N = Open file
  3. Alt + 1 = Jump to file navigation
  4. Esc = switch focus back
  5. F4 (on Project file navigation) = open the file and switch focus
  6. Shift 2 times = Find everywhere  (Use for finding menu item) ex.
    1. Show/hide navigation bar
    2. “Reopen project”
  7. Alt + Home = Open navigation bar

Class Navigation

  1. Alt + 7 = Jump to Structure
  2. Ctrl + F12 = Popup structure
  3. Ctrl + N = Navigate to class
  4. Ctrl + Shift + Alt + N = Navigate to symbol  (ex. Type “C.m” for method mxxx inside the class Cxxx)
  5. Ctrl + Alt + Left/Right = Navigate back and forth
  6. Ctrl + tab = Switcher
  7. Ctrl + B = Jump to declaration (better use Ctrl + Shift + I for the pop up of declaration)

Bookmark

  1. Ctrl + F11 = Set bookmark
  2. Shift + F11 = Open bookmark

Windows

  1. Ctrl + Shift + F12 = Hide all windows
  2. Ctrl + Shift + Left/Right = Resize the windows (doesn’t work on editor)

Selections & Editing & Jumping inside editor

  1. Selections
    1. Ctrl + W = extend selection
    2. Ctrl + Shift + W = shrink selection
  2. Navigation
    1. Alt + Up/Down = jump to previous/next class/interface/function declaration
  3. Editing
    1. Ctrl + Shift + Up/Down = move selected line(s) up/down
    2. Ctrl + D = duplicate line
    3. Ctrl + Y = delete line
    4. Ctrl + Shift + V = access clipboard
    5. Ctrl + / = comment/uncomment line
    6. Ctrl + Alt + T = Surround and add
    7. HTML
      1. Type “#myDiv>ul>li*10” and press Tab
    8. Ctrl + Shift + space = smart completion (for dynamic language like JS)
    9. Ctrl + Shift + Enter = Auto completion the line (put semicolon, bracket and go to the next line)
    10. Alt + Enter = Language injection
  4. Multiple Editing
    1. Alt + Shift + Click = Add more cursors
    2. Ctrl + Shift + Alt + J = Select all occurences
    3. Ctrl + Shift + Alt + T = Refactor
  5. Reformat the code
    1. Ctrl + Alt + L = reformat
  6. Live template
    1. One of the most powerful unused feature, See this for ideas.I’ll suggest setting this up for console.log/initialize your unit test/class/etc.
    2. Also, look for templates for your favorite library. For example, there is a live template for bootstrap which I really appreciate time-saving of typing those col-xxx-xxx for all sizes.

Want to go more?

  1. Plugin IdeaVim -> https://www.youtube.com/watch?v=UlREhZ-orlk
  2. Plugin AceJump -> https://www.youtube.com/watch?v=yK8eM50DsAY
  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: