エディターの基本

エディターペインを最大化する

• エディターで、 Ctrl+Shift+F12 を押します。 WebStorm はアクティブなエディター以外のすべてのウィンドウを隠します。

  分割画面を最大化することもできます。 この場合、アクティブな画面が最大化され、他の画面は脇に移動されます。

ウィンドウからエディターにフォーカスを切り替える

• Escape を押す。 WebStorm はフォーカスを任意のウィンドウからアクティブなエディターに移動します。

コマンドラインターミナルからエディターに戻る

• Alt+F12 を押す。 WebStorm はターミナルウィンドウを閉じます。

• アクティブなエディターに戻ったときにターミナルウィンドウを開いたままにしておく必要がある場合は、 Ctrl+Tab を押します。

最後のアクティブウィンドウに移動する

• F12 を押す。

ナビゲーションにスイッチャーを使う

1. 開いているファイルとツールウィンドウをスイッチャーで切り替えるには、 Ctrl+Tab を押します。

2. スイッチャーポップアップを開いたままにするには、 Ctrl を押し続けます。

3. 要素間を移動するには Tab を押します。 選択したファイルをリストから削除してエディターで閉じるには、 Backspace を押します。

IDE の外観を変更する

スキーム、キーマップ、表示モードを切り替えることができます。

1. Ctrl+` を押す。

2. 切り替え メニューで、必要なオプションを選択し、 Enter を押します。 同じショートカット Ctrl+` を使用して、変更を元に戻します。

設定 | エディター | カラースキーム では、色覚多様性のある人向けの ハイコントラスト カラースキームを含む、カラースキーム設定を調整できます。 キーマップ設定を調整するには、 設定 | キーマップ に移動します。

ナビゲーションバーに移動

• Alt+Home を押す。

レンズモードを使用する

レンズモードを使用すると、スクロールせずにコードをプレビューできます。 エディターのスクロールバーにマウスオーバーすると、デフォルトで有効になります。 プレビューでは、警告やエラーを含むコードのハイライト表示が表示されるため、大きなファイルで作業する場合に役立ちます。

• レンズモードを無効にするには、エディターのスクロールバーを右クリックし、コンテキストメニューの スクロールバーのホバーにコードレンズを表示する チェックボックスをオフにします。

• または、 設定 ダイアログ (Ctrl+Alt+S) で エディター | 一般 | 外観 に移動し、 スクロールバーのホバーにコードレンズを表示する チェックボックスをオフにします。

タブを開くまたは閉じる

• 開いているタブをすべて閉じるには、メインメニューから ウィンドウ | エディタータブ | すべてのタブを閉じる を選択します。

• 非アクティブなタブをすべて閉じるには、 Alt を押してアクティブなタブの をクリックします。 この場合、アクティブなタブだけが開いたままになります。

• アクティブなタブと 固定されたタブを除くすべてのタブを閉じるには、任意のタブを右クリックして 他のタブを閉じる を選択します。

• アクティブなタブだけを閉じるには、 Ctrl+F4 を押します。 タブ上の任意の場所でマウスのホイールボタンをクリックして閉じることもできます。

• 閉じたタブを再度開くには、任意のタブを右クリックし、コンテキストメニューから 閉じたタブを再度開く を選択します。

• 新しいタブを開いて、開いているすべてのタブの右側に配置するには、 タブ設定で 新しいタブを末尾に開く を選択します。

パスまたはファイル名をコピー

1. タブを右クリックします。

2. 表示されたリストから パス / 参照をコピー… を選択します。

3. 表示されるリストから、 コピーオプションを選択します。

   

   WebStorm は項目をクリップボードにコピーし、必要な場所に (Ctrl+V) 貼り付けることができます。

タブを移動、削除、並べ替える

• タブ上の アイコンを移動または削除するには、 設定 ダイアログ (Ctrl+Alt+S) で エディター | 一般 | エディタータブ に移動し、 閉じるボタンの位置 フィールドで適切なオプションを選択します。

• エディタータブをエディターフレームの別の部分に配置するか、タブを非表示にするには、タブを右クリックして エディタータブの構成… を選択し、 エディタータブ 設定を開きます。 「外観 」セクションで、「タブの配置 」リストから適切なオプションを選択します。

• 非表示のエディタータブを表示するには、エディターで最後に表示されているタブの横にある をクリックします。

• エディタータブをアルファベット順にソートするには、タブを右クリックして エディタータブの構成… を選択して エディタータブ 設定を開きます。 タブの順序セクションで、 タブをアルファベット順に並べ替える を選択します。

タブの固定または固定解除

アクティブなエディターのタブを固定して、タブの制限に達したとき、または 他のタブを閉じる コマンドを使用したときに開いたままにすることができます。

• アクティブなタブを固定または固定解除するには、タブを右クリックして、コンテキストメニューから タブをピン留め または タブのピン留め解除 を選択します。

• ピン留めされたタブ以外のすべてのタブを閉じるには、任意のタブを右クリックして ピン留め以外をすべて閉じる を選択します。

• タブをピン留め アクションのキーボードショートカットを割り当てるには、 設定 ダイアログ（Ctrl+Alt+S ）で キーマップ に移動し、 アクティブなタブを固定 アクションを見つけて右クリックし、 キーボードショートカットの追加 を選択して、使用するキーの組み合わせを押します。

• 固定されたタブを左側に維持するには、 設定 ダイアログ (Ctrl+Alt+S) で 詳細設定 に移動し、 エディタータブ セクションを見つけて、 ピン留めしたタブを左に保持する オプションを選択します。

タブを切り離す

タブを切り離すと、そのタブは別のウィンドウで開き、そのウィンドウは切り離されたタブ用に予約されます。

メインフレームから別のタブを切り離そうとすると、そのタブは別のウィンドウで開きます。 切り離したタブは、左、右、下、上など、好きな場所に配置できます。 また、別のツールウィンドウをそのフレームにドラッグすることもできます。

• 必要なタブをメインウィンドウの外にドラッグします。 タブを再びメインウィンドウにドラッグするか、 ドック をクリックします。

• アクティブなタブを切り離すには、 Shift+F4 を押します。

• 同じアクションに Alt+mouse を使用することもできます。

タブを切り替える

• タブ間を移動するには、 Alt+Right または Alt+Left を押します。

  

• 最近表示したタブやファイルを切り替えることもできます。

  エディターで、 Ctrl+Tab を押し、 Ctrl を押したままにして、 スイッチャー ウィンドウを開いたままにします。 Tab を使用して、必要なタブまたはファイルを選択します。

開いたタブにショートカットを割り当てる

1. 設定 ダイアログ（Ctrl+Alt+S ）で キーマップ に移動します。

2. ディレクトリのリストで、 その他 をクリックしてショートカットを追加したいディレクトリを選択します。 ショートカットを割り当てられるタブの最大数は 9 です。

   

デフォルトのタブ制限を変更する

WebStorm はエディターで同時に開けるタブの数を制限します (デフォルトの制限は 10)。

1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 | エディタータブ に移動します。

2. 閉じるポリシー セクションで、好みに合わせて設定を調整し、 OK をクリックします。

プレビュータブでファイルを開く

プレビュータブでは、新しいタブで各ファイルを開かなくても、1 つのタブでファイルを 1 つずつ表示できます。 これは、タブの制限を超えずに複数のファイルを調べる必要がある場合に役立ちます。

1. プロジェクト ツールウィンドウ（Alt+1 ）で、 をクリックして プレビュータブの有効化 を選択します。

   設定 | 一般 | エディタータブ | オープンポリシー でプレビュータブを有効にすることもできます。

2. プロジェクト ツールウィンドウ（Alt+1 ）で、他のタブでまだ開かれていないファイルを選択します。

   ファイル名はプレビューモードを示すために斜体で書かれています。 他のファイルを選択すると、プレビュータブの前のファイルが置き換えられます。

   ファイルの編集を開始するか、ファイルのタブをダブルクリックしてプレビューモードを解除し、プレビュータブを通常のタブに変換します。

   

   プレビュータブが有効になっている場合、 シングルクリックでファイルを開く オプションは無視されることに注意してください。 ファイルをダブルクリックして、通常のタブで開きます。

あるいは、別のタブを開かずにポップアップでファイルをプレビューすることもできます。 プロジェクト ツールウィンドウで必要なファイルを選択し、 Space を押します。 詳細については、「プロジェクトツールウィンドウからファイルをプレビューする 」を参照してください。

複数のタブを表示する

画面に収まらないほど多くのタブを開いた場合は、タブを複数行に配置できます。

1. Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | エディタータブ を選択します。

2. タブを表示 セクションで、次のいずれかのオプションを選択します。

   • 1 行、タブが収まらない場合: すべてのタブを 1 行に配置し、タブが収まらない場合:

     • タブパネルをスクロール: タブ行の上にマウスを置き、表示されるスクロールバーまたはマウスホイールを使用してタブをスクロールします。 あるいは、右側のドロップダウンリスト () を使用して、ビューポートの外側にあるタブを開きます。

     • タブの縮小: 画面に収まるようにタブを縮小します。

   • 複数行: タブを数行に配置します。

   

   

   

タブのフォントサイズを変更する

1. 設定 ダイアログ（Ctrl+Alt+S ）で 外観 & 振る舞い | 外観 に移動します。

2. サイズ フィールドでフォントサイズを指定し、 OK をクリックして変更を保存します。

   フォントサイズはタブだけでなくツールウィンドウにも適用されることに注意してください。

ナビゲーションにパンくずリストを使用する

• エディター内のパンくずリストをクリックして、必要なコード要素に移動します。

• パンくずリストの場所を変更するには、エディターでパンくずリストを右クリックし、 外観 | パンくずリスト に移動して、新しい場所（エディターの上部または下部）を選択します。

  

• パンくずリストの設定を編集したり、他の言語のパンくずリストを有効または無効にしたり、外観を変更したりするには、 Ctrl+Alt+S を押して設定を開き、 エディター | 一般 | パンくずリスト を選択します。

  エディターでパンくずリストを非表示にするには、 パンくずリストを表示する オプションをクリアします。

• エディターで、目的のタブを右クリックし、エディターウィンドウを分割する方法を選択し、選択したファイル 右に分割、 分割して右に移動、 下に分割、 分割して下に移動 を移動します。

  WebStorm はエディターの分割ビューを作成し、選択に応じてファイルを配置します。

  

• 別の方法として、メインメニューの ウィンドウ | エディタータブ から同様のオプションを選択します。

  これらのアクションにキーボードショートカットを割り当てることもできます。 設定 | キーマップ に移動し、アクション 右に分割、 分割して右に移動、 下に分割、 分割して下に移動 のいずれかを見つけます。 右クリックして キーボードショートカットの追加 を選択し、使用するキーの組み合わせを押します。 詳細については、 キーボードショートカットを設定する を参照してください。

• エディターを分割するためにタブを垂直または水平にドラッグし、分割解除の際はタブを元に戻します。

  

• 右側の分割にあるエディターでファイルを開くことができます。

  プロジェクト ツールウィンドウでファイルを右クリックし、コンテキストメニューから 右に分割して開く を選択します (または Shift+Enter を押します)。 WebStorm は、エディターの右側の分割でファイルを開きます。

  

  2 つの分割があり、フォーカスが左側の分割にある場合、ファイルは既存の右側の分割で開かれます。 フォーカスが右分割にある場合、ファイルは次の右分割で開かれます。

• 分割画面間でファイルを移動できます。 エディターで必要なファイルタブを右クリックし、コンテキストメニューから エディターを反対のタブグループに移動 または 反対側で開く を選択します。

• 開いているツールウィンドウをすべて一度に閉じて、分割画面を拡大することができます。 キャレットをエディタータブに置き、 Ctrl+Shift+F12 を押すか、タブをダブルクリックします。 WebStorm は開いているツールウィンドウをすべて非表示にし、スペースを分割画面で共有します。

  

• ネストした分割の比率を揃えるオプションを使用すると、エディターを複数回均等に分割できます。

• 画面の分割を解除するには、コンテキストメニューから 分割解除 または 分割をすべて解除 を選択して、分割されたすべてのフレームの分割を解除します。

分割画面を移動する

1. キャレットを目的の分割フレーム内に配置します。

2. メインメニューで ウィンドウ | エディタータブ へ移動します。

3. オプションのリストから、次のオプションのいずれかを選択します：

   • エディターを上に伸縮

   • エディターを左に伸縮

   • エディターを下に伸縮

   • エディターを右に伸縮

   各オプションに ショートカットを割り当て 、キーボードを使用して分割フレームを引き伸ばすことができます。

   分割フレーム間を移動するには、 ウィンドウ | エディタータブ に移動します。 オプションのリストから、 次の分割へ移動 ⌥ ⇥ または 前の分割に移動 ⌥ ⇧ ⇥ をそれぞれ選択します。

フォントとフォントの合字を構成する

1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | フォント に移動します。

2. リストから目的のフォントを選択し、その サイズ および 行の高さ を指定します。 合字を有効にしたり、タイポグラフィ設定を構成したりすることもできます。

3. OK をクリックして変更を保存します。

エディターからフォントサイズを変更する

1. 設定 ダイアログ（Ctrl+Alt+S ）で、 エディター | 一般 （マウスコントロール セクション）に移動します。

2. Ctrl＋マウスホイールでフォントサイズを変更する オプションを選択してください。

3. エディターに戻り、 Ctrl を押したままにして、マウスホイールを使用してフォントサイズを調整します。

すべてのタブのフォントサイズを拡大または縮小する

• エディターで、 Alt+Shift+. を押してフォントサイズを全体的に大きくし、 Alt+Shift+Comma を押して小さくします。

  WebStorm はエディター下部にズームインジケーターを表示し、現在のフォントサイズと、元に戻せるデフォルトのサイズを示します。

• ズームインジケーターはデフォルトで有効になっています。 これを無効にするには、 設定 ダイアログ (Ctrl+Alt+S) を開き、 詳細設定 に移動し、 エディター セクションの ズームインジケーターの表示 オプションをクリアします。

コードフォーマットを設定する

1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | コードスタイル に移動します。

2. 言語のリストから適切な言語を選択し、タブとインデント、スペース、折り返しと中括弧、ハードマージンとソフトマージンなどの設定を構成します。

さまざまな言語およびフレームワークの配色設定を構成する

1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | カラースキーム に移動します。

2. カラースキームの切り替え ノードを開き、必要な言語またはフレームワークを選択します。 一般 オプションを選択して、コード、エディター、エラーと警告、ポップアップとヒント、検索結果などの一般的な項目の配色設定を構成することもできます。

コード補完オプションを設定する

• 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 | コード補完 に移動します。 ここでは、大文字と小文字を区別する補完、自動表示オプション、コードの並べ替えなどを構成できます。

キャレットの配置を構成する

• 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 に移動します。 仮想スペース セクションで、キャレット配置オプションを構成します。

  前の行の終わりと同じ位置にある次の行にキャレットを配置するには、 行末以降へのキャレット移動を許可する オプションを選択します。 このオプションをオフにすると、次の行のキャレットは実際の行の末尾に配置されます。

  タブ文字内へのキャレット移動を許可する オプションを選択すると、ファイルを同じ位置に保ちながらキャレットをファイル内で上下に移動できます。

保存時の末尾スペースの動作を設定する

• 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 に移動します。 その他 セクションで、末尾のスペースのオプションを構成します。

  例: 手動または自動でコードを保存し、 保存時に行末のスペースを除去する リストでどのオプションが選択されているかに関係なく、キャレット行の末尾のスペースを保持したい場合は、 キャレット行末尾の空白を保持する オプションを選択します。

エディター外観オプションを設定する

• 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 | 外観 に移動します。

  例として、ハードラップガイドやパラメーターヒントを表示するよう IDE を構成できます。

長い行の外観を管理する

1. 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 に移動します。

2. ソフトラップ セクションで、適切なオプションを指定します。

スマートキーを設定する

使用する言語に応じて、基本的なエディターアクションの動作を変更できます。

• 設定 ダイアログ（Ctrl+Alt+S ）で エディター | 一般 | スマートキー に移動します。