WebStorm Tips ひとめぐり

和田 卓人 (a.k.a id:t-wada or @t_wada)

Press key to advance.

Slides controls, press:

  • and to move around.
  • Ctrl/Command and + or - to zoom in and out if slides don’t fit.
  • T to change the theme.
  • H to toggle syntax highlight.



Welcome! You can quickly get familiar with the main features of the IDE by reading these tips. You may try out the features described in the tips while this dialog stays open on the screen. If you close the dialog, you can always get back to it from the Help | Tip of the Day main menu item.


To help you learn the purpose of each item in the main menu, its short description is shown in the status bar at the bottom of the application frame when you position the mouse pointer over it.


  • The Escape key in any tool window moves the focus to the editor.
  • Shift+Escape moves the focus to the editor and also hides the current (or last active) tool window.
  • The F12 key moves the focus from the editor to the last focused tool window.

複製 (Ctrl+D)

  • Ctrl+D in the editor duplicates the selected block
  • or the current line when no block is selected.

補完 (Ctrl+Space)

The CodeCompletion feature allows you to quickly complete different kinds of statements in the code. For example, you may start typing a class name and press Ctrl+Space to complete it. When multiple choices are available, they are shown in the lookup list.

補完に使うキー(Tab, Enter)の違い

When using Code Completion, you can accept the currently highlighted selection in the popup list with the Tab key. Unlike accepting with the Enter key, the selected name will overwrite the rest of the name to the right of the caret. This can be especially useful for replacing one method or variable name with another.

クイックフィクス (Alt+Enter)

When you press Alt+Enter to invoke a quick fix or intention action, press the right arrow key to reveal the list of additonal options. Depending on the context, you can choose to disable inspection, fix all problems, change inspection profile, etc.

Shift+F6 (Refactor | Rename…)

You may easily rename your classes, methods and variables with automatic correction of all places where they are used. To try it, position the editor caret at any symbol and press Shift+F6 (Refactor | Rename…). Type the new name in the dialog that appears and press Enter. You may browse all places where the variable is used and then press the Do Refactor button to finish the renaming operation.

Ctrl+Alt+V (Refactor | Introduce Variable…)

The Introduce Variable refactoring helps you to simplify complicated statements in your code. For example, in the code fragment below, you can select an expression in the code: and press Ctrl+Alt+V (Refactor | Introduce Variable…). This will result in the following:

Ctrl+Alt+F7 (Search | Show Usages in the main menu)

クラスや変数の利用状況を調べる。カーソルを合わせて Ctrl+Alt+F7 You can bring forward the list of all usages of a class, method or variable across the whole project, and quickly jump to the selected usage. To do that, place the caret at the symbol's name or at its usage in code and press Ctrl+Alt+F7 (Search | Show Usages in the main menu), scroll the list and click the desired usage.

Ctrl+Shift+A (Go To | Action on the main menu)

To quickly find a menu command or toolbar action, you do not need to look through the menus. Just press Ctrl+Shift+A (Go To | Action on the main menu) and start typing the name of the action. Choose the desired action from the suggestion list.

Ctrl+Shift+N (Go To | File…)

To open any class or file in the editor at the desired line, press Ctrl+Shift+N (Go To | File…), start typing the name, and choose one from the suggestion list. Then type colon and a line number. The selected file will open with the caret at the specified line.

  • コロンをつけると行番号も指定できる
  • 短縮名とスラッシュで深い階層も掘れる

You can jump directly to any deeply buried file, if you press Ctrl+Shift+N, and type just a couple of characters of the enclosing directories and file names: Use either slash or backslash as the delimiters.


パラメータを見る。メソッド呼び出しの括弧の中で Ctrl+P を押すと引数のリストを出す If the cursor is between the parentheses of a method call, pressing Ctrl+P brings up a list of valid parameters.


定義に飛ぶ To navigate to the declaration of a class, method or variable used somewhere in the code, position the caret at the usage and press Ctrl+B. You may also click the mouse on usages with the Ctrl key pressed to jump to declarations.

Ctrl+Q (View | Quick Documentation Lookup)

ドキュメンテーションを見る To quickly see the documentation for the class or method used at the editor's caret, press Ctrl+Q (View | Quick Documentation Lookup).

Ctrl+F12 (View | File Structure Popup)

現在編集中のファイルの構造を見る You can quickly navigate in the currently edited file with Ctrl+F12 (View | File Structure Popup). It shows the list of members of the current class. Select an element you want to navigate to and press the Enter key or the F4 key. To easily locate an item in the list, just start typing its name.



To open any particular method or field in the editor quickly, press Ctrl+Alt+Shift+N (Go To | Symbol…) and start typing its name. Choose the symbol from a drop-down list that appears.


前に編集していた地点に戻る 何回も押すことで過去の編集地点をたどれる

Ctrl+Shift+F7 (Search | Highlight Usages in File)

変数のハイライト Use Ctrl+Shift+F7 (Search | Highlight Usages in File) to quickly highlight usages of some variable in the current file. Use F3 and Shift+F3 keys to navigate through highlighted usages. Press Escape to remove the highlighting.

Ctrl+E (View | Recent Files…)

最近使ったファイル Ctrl+E (View | Recent Files…) brings a popup list of the recently visited files. Choose the desired file and press Enter to open it. Besides recent files, you can easily bring up the results of the usage searches that you have performed recently. To do that, use the same Ctrl+E shortcut with the Find tool window having the focus, and select the desired find usages result from the Recent Find Usages popup.

Ctrl+W (select word)

Ctrl+W (select word) in the editor selects a word at the caret and then selects expanding areas of the source code. For example, it may select a method name, then the expression that calls this method, then the whole statement, then the containing block, etc.

Alt+Up / Alt+Down







マウスを使わなくとも Alt+Shift+F10 で Run/Debug ドロップダウンを開ける

Alt+F1 (View | Select In…)

To quickly select the currently edited element (class, file, method or field) in any view (Project View, Structure View or other), press Alt+F1 (View | Select In…).


Ctrl+P, Ctrl+B, Ctrl+Q などは補完ポップアップ内でも使える

Goto XXX 系の振る舞い

CamelCase 検索できるよ

ファイル内テキスト検索 (Ctrl+F)

Ctrl+Space で補完が効く When you are finding text in the current file (Ctrl+F), you don't need to type the whole search string: Basic Code Completion is available in the search field. Start typing, press Ctrl+Space, and select the desired string from the suggestion list.

Show method separators

To show separator lines between methods in the editor, open File | Settings | Editor and check the "Show method separators" check box in the Appearance tab.

Ctrl+Back Quote (View | Quick Switch Scheme)


Ctrl+Alt+Shift+I (Go To | Inspection on the main menu)

To quickly find and run an inspection press Ctrl+Alt+Shift+I (Go To | Inspection on the main menu) and start typing the name of the inspection or its group. Choose the desired inspection from the suggestion list and then select a desired scope.

Changes Tool Window(Alt+9)

Changes Tool Window shows all deleted, modified, and unversioned files in a single view. Use Alt+9 keyboard shortcut to show or hide this tool window. From the Changes Tool Window you can perform all the necessary version control actions: commit changes, manage changelists, put resources under version control, examine differences and more.


Navigation bar is a quick alternative to the Project view. Use Alt+Home keyboard shortcut to show the Navigation Bar, and arrow keys to locate the necessary files or folders.

CSS セレクタのリファクタリング

It is possible to rename CSS selectors directly from HTML. Position the caret at the selector to be renamed and press Shift+F6 (Refactor | Rename…).


You can quickly review all styles currently applied to an HTML tag, by right-clicking the tag name and selecting Show Applied Styles For Tag from the popup menu.

CSS の色の選択と編集

JetBrains WebStorm simplifies working with colors in CSS files. The color properties are marked with the icons of the corresponding color in the left gutter area of the editor. Use these icons to view colors and change color values. When you point with your mouse cursor to the color icon, the popup window appears, showing the color and its code:


You can quickly view the image referenced at caret, by using the Quick Definition Lookup (Ctrl+Shift+I). The underlying image will be opened in a popup, instead of a separate editor tab.

変更をどけておく(git stash みたいなもの?)

If you don't want to commit some of your changes to the repository, you can set them aside for a while, by moving to a separate changelist, or by putting them to a shelf. Select such file in the Local tab of the Changes tool window, and on the context menu choose Move to another changelist, or Shelve Changes.


Ctrl+Click a tab in the editor to navigate to any part of the file path. Select the needed element in the drop-down, corresponding file path is opened in the external browser (in the Explorer, if Windows is your OS).


You can easily open an external file for editing, if you just drag it from the Explorer/Finder to the editor.

URL を持つチケットとのリンク

Did you know that JetBrains WebStorm lets you jump from your checkin comment to an issue in tracker? All you have to do is to define issue navigation patterns in the Settings | Version Control dialog:


Use Switcher to switch between open files and tool windows. Keeping Ctrl pressed, use Up and Down arrow keys, Tab or Shift+Tab, Alt for navigation; use Delete or BackSpace to close editor tab or hide a tool window.

Alt を押しながらマウスを動かすと矩形選択できる

You can easily make column selection by dragging your mouse pointer while keeping the Alt key pressed.