エディターの基本
WebStorm エディターは、コードの作成、読み取り、変更に使用する IDE の主要部分です。
エディターは次の領域で構成されています。
スクロールバーは現在のファイルのエラーと警告を表示します。
パンくずリストは、現在のファイルのコード内を移動できます。
ガターには、行番号とアノテーションが表示されます。
タブには、現在開いているファイルの名前が表示されます。
ナビゲーション
さまざまなショートカットを使用して、エディターウィンドウとさまざまなツールウィンドウを切り替えたり、エディターサイズを変更したり、フォーカスを切り替えたり、元のレイアウトに戻ることができます。
エディターペインを最大化する
エディターで、Ctrl+Shift+F12 を押します。WebStorm はアクティブなエディターを除くすべてのウィンドウを隠します。
ウィンドウからエディターにフォーカスを切り替える
Escape を押す。WebStorm はフォーカスを任意のウィンドウからアクティブなエディターに移動します。
コマンドラインターミナルからエディターに戻る
Alt+F12 を押す。WebStorm はターミナルウィンドウを閉じます。
アクティブなエディターに戻ったときにターミナルウィンドウを開いたままにしておく必要がある場合は、Ctrl+Tab を押します。
デフォルトのレイアウトに戻る
Shift+F12 を押します。
現在のレイアウトをデフォルトとして保存するには、メインメニューからを選択します。同じショートカット Shift+F12 を使用して、保存されたレイアウトを復元できます。
最後のアクティブウィンドウにジャンプする
F12 を押します。
ナビゲーションにスイッチャーを使う
開いているファイルとツールウィンドウをスイッチャーで切り替えるには、Ctrl+Tab を押します。
スイッチャーポップアップを開いたままにするには、Ctrl を押し続けます。
要素間を移動するには Tab を押します。選択したファイルをリストから削除してエディターで閉じるには、Backspace を押します。
IDE の外観を変更する
スキーム、キーマップ、または表示モードを切り替えることができます。
Ctrl+` を押します。
切り替えメニューで、必要なオプションを選択し、Enter を押します。同じショートカット Ctrl+` を使用して、変更を元に戻します。
また、ページの視力多様性者向けのハイコントラストカラースキームや、設定 / 環境設定ダイアログ Ctrl+Alt+S のページのキーマップ設定など、カラースキーム設定を見つけて調整することもできます。
ナビゲーションバーにジャンプ
Alt+Home を押します。
エディタータブ
エディタータブを閉じたり、隠したり、切り離したりできます。ファイルを編集用に開くたびに、その名前のタブがアクティブなエディタータブの横に追加されます。
エディタータブの設定を構成するには、設定 / 環境設定ダイアログ Ctrl+Alt+S のページを使用します。または、タブを右クリックして、オプションのリストからエディタータブの構成を選択します。
タブを開くまたは閉じる
開いているタブをすべて閉じるには、メインメニューからを選択します。
非アクティブなタブをすべて閉じるには、Alt を押してアクティブなタブの
をクリックします。この場合、アクティブなタブだけが開いたままになります。アクティブなタブと固定されたタブを除くすべての非アクティブなタブを閉じるには、任意のタブを右クリックして他のタブを閉じるを選択します。
アクティブなタブだけを閉じるには、Ctrl+F4 を押します。タブ上の任意の場所でマウスのホイールボタンをクリックして閉じることもできます。
閉じたタブを再度開くには、任意のタブを右クリックして、コンテキストメニューから閉じたタブを再度開くを選択します。
すでに開いているタブの最後に新しいタブを開くには、タブ設定で新しいタブを最後に追加するを選択します。
パスまたはファイル名をコピー
タブを右クリックします。
表示されたリストからコピーを選択します。
表示されるリストから、コピーオプションを選択します。
タブを移動、削除、または並べ替える
タブ上の
アイコンを移動または削除するには、設定 / 環境設定ダイアログ Ctrl+Alt+S でに移動し、閉じるボタンの位置フィールドで適切なオプションを選択します。エディタータブをエディターフレームの別の部分に配置したり、タブを非表示にしたりするには、タブを右クリックしてエディタータブの構成を選択し、エディタータブ設定を開きます。外観セクションのタブ配置リストで、適切なオプションを選択します。
エディタータブをアルファベット順にソートするには、タブを右クリックしてエディタータブの構成を選択してエディタータブ設定を開きます。タブ順セクションで、タブをアルファベット順でソートするを選択します。
タブの固定または固定解除
エディターでアクティブなタブを固定して、タブの制限に達したとき、または他のタブを閉じるコマンドを使用したときに開いたままになるようにすることができます。
アクティブなタブを固定または固定解除するには、タブを右クリックして、コンテキストメニューからタブをピン留めまたはタブのピン留め解除を選択します。
固定されているタブ以外のすべてのタブを閉じるには、任意のタブを右クリックしてピン留め以外をすべて閉じるを選択します。
タブをピン留めアクションにキーボードショートカットを割り当てるには、設定 / 環境設定ダイアログ Ctrl+Alt+S でに移動し、アクティブなタブを固定アクションを見つけて右クリックし、キーボードショートカットの追加を選択して、使用するキーの組み合わせを押します。
タブを切り離す
アクティブなタブを切り離すには、Shift+F4 を押します。
必要なタブをメインウィンドウの外側にドラッグし、タブを後ろにドラッグして取り付けます。
同じアクションに Alt+mouse を使用することもできます。
プロジェクトツールウィンドウで、デタッチしたいファイルを選択して Shift+Enter を押します。
タブを切り替える
タブ間を移動するには、Alt+Right または Alt+Left を押します。
最近表示したタブやファイルを切り替えることもできます。
エディターで、Ctrl+Tab を押します。スイッチャーウィンドウが開いたままになるように Ctrl を押し続けます。タブと他のファイルを切り替えるには Tab を使います。
開いたタブにショートカットを割り当てる
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
ディレクトリのリストで、ディレクトリをクリックし、タブのリストからショートカットを追加する必要があるものを選択します。ショートカットを割り当てることができるタブの制限は 9 です。
デフォルトのタブ制限を変更する
WebStorm は、エディターで同時に開くことができるタブの数を制限します（デフォルトのタブ制限は 10 です）。
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
タブの終了ルールセクションで、好みに合わせて設定を調整し、OK をクリックします。
プレビュータブでファイルを開く
プレビュータブでは、新しいタブで各ファイルを開かなくても、1 つのタブでファイルを 1 つずつ表示できます。これは、タブの制限を超えずに複数のファイルを調べる必要がある場合に役立ちます。
プロジェクトツールウィンドウ Alt+1 で、
をクリックし、プレビュータブの有効化を選択します。でプレビュータブを有効にすることもできます。
プロジェクトツールウィンドウで、他のタブでまだ開いていないファイルを選択します。
ファイルの名前は、プレビューモードを示すために斜体で表記されています。選択した他のファイルは、プレビュータブの前のファイルを置き換えます。
ファイルの編集を開始してプレビューモードを終了し、通常のタブに変更します。
プレビュータブが有効になっている場合、シングルクリックでファイルを開くオプションは無視されることに注意してください。ファイルをダブルクリックして、通常のタブで開きます。
または、別のタブを開かずにポップアップでファイルをプレビューします。プロジェクトツールウィンドウで必要なファイルを選択し、Space を押します。詳細については、プロジェクトツールウィンドウからファイルをプレビューするを参照してください。
スペースがなくなったらエディタータブを隠す
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
スペースがない場合はタブを非表示にするオプションを選択してください。追加のタブは、エディターの右上部分にあるリストに配置されます。
タブのフォントサイズを変更する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
サイズフィールドでフォントサイズを指定し、OK をクリックして変更を保存します。
フォントサイズはタブだけでなく、ツールウィンドウでも変わることに注意してください。
画面を分割
WebStorm は、メインメニューまたはコンテキストメニュー、エディター、またはプロジェクトツールウィンドウから呼び出してエディター画面を分割できるさまざまなアクションを提供します。
エディターで、目的のエディタータブを右クリックし、エディターウィンドウを分割する方法（右に分割または）を選択します。WebStorm はエディターの分割ビューを作成し、選択に従って配置します。
別の方法として、メインメニューからと分割して右に移動または分割して下に移動オプションを選択します。
エディターを分割するためにタブを垂直または水平にドラッグし、画面を分割解除するためにタブをドラッグして戻すことができます。
右の分割でエディターでファイルを開くことができます。
プロジェクトツールウィンドウで、ファイルを右クリックし、コンテキストメニューから右に分割して開くを選択します。WebStorm は、エディターの右側の分割でファイルを開きます。
2 つの分割があり、フォーカスが左側の分割にある場合、ファイルは既存の右側の分割で開かれます。フォーカスが右分割にある場合、ファイルは次の右分割で開かれます。
分割画面間でファイルを移動できます。エディターで必要なファイルタブを右クリックし、コンテキストメニューからエディターを反対のタブグループに移動または反対側で開くを選択します。
画面の分割を解除するには、コンテキストメニューから分割を解除または分割をすべて解除を選択して、分割されたすべてのフレームの分割を解除します。
分割画面を移動する
クイックポップアップ
| 説明 | アクション / アクセス | 知っておくと便利 |
|---|---|---|
| シンボルのクイック定義を表示する (タグ、クラス、メソッド / 関数、フィールドなどがあります。) | Ctrl+Shift+I | WebStorm は情報をポップアップで表示します。必要に応じて、 アイコンをクリックして検索ツールウィンドウをアイテムの定義とその用途と共に開きます。 |
| コード要素またはファイルのクイックドキュメントを表示します。 | Ctrl+Q | WebStorm は、適切な情報を含むポップアップを表示します。 Ctrl+Q を 2 回押すと、ドキュメントツールウィンドウでポップアップを開くことができます。（同じショートカットを押すと、ポップアップに戻ります）。 クラス Ctrl+N を探すときにクイックドキュメントポップアップを呼び出すと、リストに表示されているクラスのドキュメントを検索できます。ポップアップにフォーカスを切り替えるには、同じショートカットを押します。 |
| コンテキスト情報を表示します。 | Alt+Q | アクションには、現在のメソッドまたはクラス宣言が表示されていないときに表示されます。 |
| キャレットでエラーまたは警告の説明を表示します。 | Ctrl+F1 | コード分析マーカーをクリックすると、見つかったエラーのリストが表示されます。次または前のエラーに移動するには、F2 または Shift+F2 を使用してください。 |
| ツールチップのテキストをクリップボードにコピーします。 | Alt をホールドし（Linux では Ctrl+Alt を押したまま）、ツールチップをクリックする | このアクションを使用すると、たとえばスクリーンショットを作成する代わりに、ツールチップに表示される重要な情報をいくつか保存できます。 |
| コード要素のすべての使用箇所を表示します。 | Ctrl+Shift+F7 | ハイライト表示を制御するには、（キャレット移動のハイライト領域）のキャレットの要素のハイライトオプションを選択またはクリアします。 節電モード（）をオンにすると、使用箇所はハイライトされません。 |
アイコンをクリックし、開いたウィンドウで、好みに応じてフォントサイズを変更します。
をクリックするか、Shift+F1 を押します。便利なエディター構成
設定 / 環境設定ダイアログ Ctrl+Alt+S を使用して、エディターの動作をカスタマイズできます。
次の一般的な設定を確認してください。
コードフォーマットを設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
言語のリストから適切な言語を選択し、言語ページで、タブとインデント、スペース、折り返しと中括弧、ハードマージンとソフトマージンなどの設定を構成します。
フォント、サイズ、フォント合字を設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
エディターでフォントサイズを変更する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、（マウスコントロールセクション）に進みます。
Ctrl+ マウスホイールでフォントをサイズ変更するオプションを選択してください。
エディターに戻って Ctrl を押したままマウスホイールを使ってフォントサイズを調整します。
さまざまな言語およびフレームワーク用に配色設定を構成する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
カラースキームノードを開き、必要な言語またはフレームワークを選択してください。ノードのリストから一般オプションを選択して、コード、エディター、エラーと警告、ポップアップとヒント、検索結果などの一般的な項目の配色設定を構成することもできます。
コード補完オプションを設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。ここでは、大文字と小文字を区別する補完、自動表示オプション、コードの並べ替えなどを構成できます。
キャレット配置を設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。仮想スペースセクションでは、キャレット配置オプションを構成できます。
前の行の終わりと同じ位置にある次の行にキャレットを配置するには、行末以降へのキャレット移動を許可するオプションを選択します。このオプションをオフにすると、次の行のキャレットは実際の行の末尾に配置されます。
タブ文字内へのキャレット移動を許可するオプションを選択すると、ファイルを同じ位置に保ちながらキャレットをファイル内で上下に移動できます。
保存時の末尾スペースの動作を設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。その他セクションでは、後続スペースのオプションを構成できます。
例: コードを手動または自動で保存し、保存時に行末のスペースを除去するリストで選択されているオプションに関係なくキャレット行の末尾のスペースを保持したい場合は、キャレット行末尾の空白を保持するオプションを選択します。
エディターの外観オプションを設定する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
例: ハードラップガイドの表示やパラメーターヒントの表示を設定できます。
長い行の外観を管理する
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
行の折り返しセクションで、適切なオプションを指定します。
スマートキーを設定する
使用する言語に応じて、さまざまな基本的なエディターアクションの特定の動作を構成できます。
設定 / 環境設定ダイアログ Ctrl+Alt+S で、に移動します。
関連ページ：
ソースコードナビゲーション
さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからを選択するか、またはを押します。前に進むには、を選択するかを押します。Windows でこれらのショートカットを使用するには、ホットキーを無効にしていることを確認してください。最後に編集した場所に移動するには
エディタータブ
このページを使用して、エディタータブとタブヘッダーの外観を構成し、画面上でのそれらの位置を指定し、タブを閉じるポリシーを定義します。外観タブ配置リストを使用してエディタータブの位置を設定します。なしを選択した場合、タブは表示されず、新しいファイルは現在のエディターで開きます。タブを 1 行で表示するこのオプションを選択すると、タブヘッダーが 1 行に表示されます。スペースがない場合は非表示にしますこのチェックボックスがオンの場合、WebStorm は現在の WebStorm フレームに収まるタブ...
プロジェクトツールウィンドウ
プロジェクトツールウィンドウでは、様々な視点からプロジェクトを見て、新しいアイテム（ディレクトリ、ファイル、クラスなど）の作成、エディターでのファイルのオープン、必要なコードフラグメントへのナビゲートなど、様々なタスクを実行することができます。このツールウィンドウのほとんどの機能には、コンテンツペインのコンテキストメニューコマンドとして、関連するショートカットを介してアクセスします。また、ビューには、作成したスクラッチファイルと拡張スクリプトを管理できるスクラッチとコンソールフォルダーが含まれて...
キーボードショートカットを設定する
WebStorm 標準のキーボードショートカット PDF は、公式ショートカット一覧 PDF 日本語版から入手できます。ローカルに保存しておいて活用しましょう。WebStorm には定義済みのキーマップがいくつか含まれており、頻繁に使用するショートカットをカスタマイズできます。キーマップ構成を表示するには、設定 / 環境設定ダイアログを開き、キーマップを選択します。WebStorm は、環境に基づいて事前定義されたキーマップを自動的に提案します。使用している OS と一致することを確認するか、...
JavaScript ドキュメントの検索
WebStorm は、標準の JavaScript API、プロジェクトからのシンボルおよびその依存関係からの参照、および外部ライブラリで定義されているシンボルへの参照を示します。ドキュメントポップアップでシンボルのドキュメントを表示したり、メソッドパラメーターに関する情報を入手したり、それらへのリンクがある場合は外部サイトでドキュメントを開くことができます。プロジェクトシンボルまたはプロジェクト依存のシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。...
JavaScript ライブラリを構成する
WebStorm では、ライブラリは、WebStorm が編集するプロジェクトコードから取得する関数とメソッドに加えて、WebStorm の内部知識に関数とメソッドが追加されたファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリはデフォルトで書き込み保護されています。WebStorm は、コーディング支援（つまり、コード補完、構文ハイライト、ナビゲーション、ドキュメントの参照）を強化するためにのみライブラリを使用します。ライブラリはプロジェクトの依存関係を管理する方法ではあ...