ソースコードの作成と編集
コード作業時、WebStorm は作業をストレスなく進められるようサポートします。 追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。
エディター内のナビゲーションについては、 エディターの基本 を参照してください。
アクションの検索
使用したいアクションのショートカットを覚えていない場合は、 Ctrl+Shift+A を押して名前でアクションを見つけてください。
同じダイアログを使用してクラス、ファイル、シンボルを見つけることができます。 詳細は、 名前でターゲットを検索（どこでも検索） を参照してください。
ファイルの読み取り専用属性の切り替え
ファイルが読み取り専用の場合、 ステータスバー 、エディタータブ、 プロジェクトツールウィンドウ で、閉じた鍵のアイコン 
がマークされます。 ファイルが書き込み可能である場合、ステータスバーに開いたロックアイコン 
が表示されます。
エディターでファイルを開くか、 プロジェクト ツールウィンドウでファイルを選択します。
次のいずれかを実行します：
または に進みます。
ステータスバーのロックアイコンをクリックします。
バージョン管理システムで読み取り専用ステータスが設定されている場合は、WebStorm のバージョン管理統合機能の利用をおすすめします。 詳細は、 バージョン管理 を参照してください。
文字の入れ替え
エディターで、交換する文字にキャレットを配置します。
に進みます。
このアクションのデフォルトのショートカットはありません。 カスタムショートカットを割り当てることができます。
フローティングツールバー
フローティングツールバーには、コード編集のためのさまざまなアクションが含まれています。 選択したコード箇所にマウスポインターを合わせると表示されます
: インテンションのアクションを表示
：AI アクション（AI Assistant が有効な場合のみ）リファクタリング: 現在のコンテキストで使用可能な リファクタリングのリストを表示します。
: 現在のファイルで選択されたシンボルの 使用箇所を表示。
: コードの整形
: 選択範囲をタグで囲む 、アクションは HTML コンテキストで使用できます。
: 選択したコードフラグメントをエディター内で直接評価する 、アクションはデバッグセッション中にのみ使用できます。
: 選択内容をウォッチに追加する 、アクションはデバッグセッション中にのみ使用できます。
をクリックして、 フローティングツールバーをカスタマイズするか、 非表示にします。
ツールバーを隠す
ツールバーで、
をクリックし、リストから ツールバーを表示しない を選択します。
ツールバーを有効にする
Ctrl+Alt+S を押して設定を開き、 を選択します。
エディター セクションで、 コード編集のフローティングツールバーを非表示にする オプションを無効にします。
変更を適用し、ダイアログを閉じます。
ツールバーをカスタマイズする
Ctrl+Alt+S を押して設定を開き、 を選択します。
または、ツールバーの
をクリックし、 ツールバーのカスタマイズ を選択します。フローティングコードツールバー でアクションを追加または削除します。
詳細は、 メニューとツールバー を参照してください。
変更を適用し、ダイアログを閉じます。
コード行
WebStorm はコード行を操作するための便利なショートカットをいくつか提供しています。
現在の行の後に行を追加するには、 Shift+Enter を押します。 WebStorm はキャレットを次の行に移動します。
現在の行の前に行を追加するには、 Ctrl+Alt+Enter を押します。 WebStorm はキャレットを前の行に移動します。
行を複製するには、 Ctrl+D を押します。
ファイル全体またはコード選択で行をアルファベット順に並べ替えるには、 または に移動します。 これらのアクションは、プロパティファイル、データセット、テキストファイル、ログファイルなどを操作する場合に役立つ場合があります。 これらのアクションにショートカットを割り当てる必要がある場合、詳細については キーボードショートカットを設定する を参照してください。
行を削除するには、必要な行にキャレットを置き、 Ctrl+Y を押します。
行を結合するには、他の行を結合したい行にキャレットを置き、 Ctrl+Shift+J を押します。 必要な要素がすべて結合されるまでキーを押し続けます。
文字列リテラル、フィールドまたは変数の宣言、文を結合することもできます。 WebStorm はコードスタイル設定をチェックし、不要なスペースや余分な文字を削除します。
文字列リテラルを 2 つの部分に分割するには、 Enter を押します。
WebStorm は文字列を分割して正しい構文を提供します。 文字列を '\n' で区切る インテンションを使用して文字列リテラルを分割することもできます。 Alt+Enter を押すか、
をクリックしてこのインテンションを選択します。WebStorm は、文字列リテラルを操作するための便利なインテンションアクションのセットも提供しており、文字列をテンプレート文字列へ置換したり、ネストされた呼び出しを パイプ式 に置換したりできます。 利用可能なアクションを表示するには、文字列リテラル内にキャレットを置き、 Alt+Enter を押すか、
をクリックします。
コード行をコメント化するには、キャレットを適切な行に配置し、 Ctrl+/ を押します。 同じ行で Ctrl+/ をもう一度押して、コメントを解除します。
行を上下に移動するには、それぞれ Alt+Shift+Up または Alt+Shift+Down を押します。
XML または HTML タグ属性を左または右に移動（スワップ）するには、キャレットを配置するか、キャレットを選択して左に Ctrl+Alt+Shift+Left 、右に Ctrl+Alt+Shift+Right を押します。
コードをコピーして貼り付ける
標準のショートカットを使用して Ctrl+C をコピーし、選択したコードフラグメントを Ctrl+V に貼り付けることができます。 何も選択されていない場合、WebStorm はキャレットがある行全体を自動的にコピーします。
デフォルトでは、エディターで何かを貼り付けたとき、WebStorm は「スマート」貼り付けを実行します。たとえば、複数の行をコメントに貼り付けると、貼り付ける行に適切なマーカーが自動で追加されます。 プレーンテキストのみ貼り付ける必要がある場合は、 Ctrl+Alt+Shift+V を押してください。
コードを選択せずに行をコピー (Ctrl+C) またはカット (Ctrl+X) すると、貼り付けアクションにより、クリップボードの内容がキャレットではなく現在の行の上に追加されます。
コピーしたコードをキャレットに貼り付ける場合は、 詳細設定で キャレット位置に貼り付ける オプションを選択します。
キャレットを線またはシンボルに置き、右クリックしてコンテキストメニューを開き、 を選択します。 参照をコピー （Ctrl+Alt+Shift+C ）オプションを選択すると、WebStorm は選択した行やシンボルの行番号を含む参照文字列を作成します。 Ctrl+V を押すと、コピーした参照をどこにでも貼り付けることができます。
WebStorm はクリップボードへコピーしたすべての内容を記録します。 履歴から貼り付けるには、エディターのコンテキストメニューから （Ctrl+Shift+V ）を選択します。 開いたダイアログで、エントリを選択して 貼り付け をクリックします。
コードをコピーしてエディターに貼り付けると、WebStorm は Unicode 名略称で表される非表示（特殊）文字も表示します。
コード選択
コードコンストラクトの選択
エディターで、選択する項目にキャレットを置き、 Ctrl+W/Ctrl+Shift+W を押して選択範囲を拡大または縮小します。
JavaScript ファイルでメソッド呼び出しの引数選択から始めると、すべての引数、メソッド全体、更にそのメソッドを含む式、さらに大きなブロックへと選択範囲が広がります。
中括弧をハイライトする必要がある場合は、ブロックの閉じ括弧 / 括弧の直後、またはブロックの左括弧 / 括弧の前にキャレットを配置します。
大文字と小文字を区別してコードを選択する
設定 ダイアログ（Ctrl+Alt+S ）で に移動します。
「キャメルハンプ」単語を使用する チェックボックスを選択します。
大文字と小文字を区別してダブルクリックで単語を選択する場合は、そのすぐ下の ダブルクリックで選択時に「キャメルハンプ」単語設定を適用 チェックボックスもオンになっていることを確認してください。
コード文
ステートメントの移動
エディターで、必要な文にキャレットを置き、文を上に移動するには Ctrl+Shift+Up を、文を下に移動するには Ctrl+Shift+Down を押します。 WebStorm は、構文チェックを行いながら選択したステートメントを移動します。
ステートメント補完
適切な候補を選択して Ctrl+Shift+Enter を押します。 WebStorm は文を完成させ、その末尾にセミコロンを自動的に追加し、新しい文入力を始める位置へキャレットを移動します。
ステートメントの囲み解除または削除
削除または展開したい式にキャレットを置きます。
Ctrl+Shift+Delete を押すか、メインメニューから コード | 囲み除去 / 除去 を選択します。
WebStorm は、現在のコンテキストで利用可能なすべてのアクションを表示するポップアップを表示します。 抽出するステートメントと削除するステートメントの判別をしやすくするため、WebStorm は異なる背景色を使っています。
動作を選択して Enter を押します。
コードフラグメント
エディターでコードフラグメントをドラッグして移動またはコピーできます。
コードフラグメントを移動するには、それを選択して選択範囲を目的の場所にドラッグします。
Ctrl を押したままコード選択をコピーするには、それを目的の位置までドラッグします。
ドラッグ機能はデフォルトで有効になっています。 無効にするには、 設定 ダイアログ（Ctrl+Alt+S ）で、 に移動し、 マウスコントロール セクションの ドラッグアンドドロップでコード箇所を移動する チェックボックスをオフにします。
選択したコードフラグメントの大文字と小文字を切り替えるには、 Ctrl+Shift+U を押します。
CamelCase の名前形式にトグルケースアクションを適用した場合、WebStorm は名前を小文字へ変換します。
コードの一部をコメントまたはコメント解除するには、それを選択して Ctrl+Shift+/ を押します。
デフォルトでは、コードフラグメントをブロックコメントで囲むと、テキストはスペースなしで
/*文字を開いた直後に始まります。*/文字を閉じる前に、スペースも挿入されません。このデフォルトのコードスタイルは、ESLint などの一部のリンターのルールと競合する可能性があります。 コードスタイルを改善するには、先頭と末尾のスペースで囲んでいるブロックコメントを構成します。
設定 ダイアログ (Ctrl+Alt+S) で、 または に移動し、 コード生成 タブを開いて、 コメント 領域のスペースとフォーマットを構成します。
パラメーターヒント
パラメーターヒントは、コードを読みやすくするためのメソッドや関数のパラメーター名を示します。 デフォルトでは、パラメーターヒントは有効にされ、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ表示されます。
パラメーターのヒントを設定する
設定 ダイアログ（Ctrl+Alt+S ）を開き、 に進みます。
パラメーター名 の <必要な言語> を展開します。
対応するチェックボックスを選択して、パラメーターヒントを表示するコンテキストを指定します。
プレビューでは設定の変更がコードの見た目にどう影響するかが表示されます。
一部のメソッドや関数では、WebStorm はどのコンテキストでもパラメーターヒントを表示しません。 除外リスト… をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。
コードの折りたたみ
WebStorm は特定のコード構造を自動的に認識し、折りたたみ可能にします。 カスタム折りたたみ領域を定義することもできます。
折りたたまれたコードフラグメントは、網掛けの省略記号 (
) として表示されます。 折りたたまれたコードフラグメントにエラーがある場合、WebStorm はそのフラグメントを赤色で強調表示します。
デフォルトでは、マウスオーバー時にガターの折りたたみアイコンが表示されます。 この設定を変更したり、 でその他のコード折りたたみ設定を変更したりできます。 たとえば、1 行の Rust メソッドのデフォルトの折りたたみを無効にすることができます。
メインメニューの (Ctrl+Shift+A) に移動し、 folding を検索します。 WebStorm には、すべての折りたたみアクションとそのショートカットを含むポップアップが表示されます：
コード要素の展開または折りたたみ
コードフラグメントを折りたたんだり展開したりするには、 Ctrl+NumPad -/Ctrl+NumPad + を押します。 WebStorm は現在のコードフラグメントを折りたたむまたは展開します（たとえば、単一のメソッド）。
すべてのコードフラグメントを折りたたんだり展開したりするには、 Ctrl+Shift+NumPad -/Ctrl+Shift+NumPad + を押します。
WebStorm は選択範囲内のすべてのフラグメントを折りたたむまたは展開します。何も選択されていない場合は、現在のファイル内のすべてのフラグメント、たとえばファイル内のすべてのメソッドに対して操作します。
コードを再帰的に折りたたんだり展開したりするには、 Ctrl+Alt+NumPad -/Ctrl+Alt+NumPad + を押します。 WebStorm は現在のフラグメントおよびその中のすべての従属領域を折りたたみまたは展開します。
一致する波括弧
{}のペア内でコードのブロックを折りたたむには、 Ctrl+NumPad - を押します。 ブロックを展開するには、 Ctrl+NumPad + を押します。現在のファイル内のドキュメントコメントを折りたたむか展開するには、メインメニューで または Doc コメントを折りたたむ を選択します。
カスタムコードフラグメントを折りたたんだり展開したりするには、それを選択して Ctrl+. を押します。 または、コードフラグメントを カスタム折りたたみ領域としてマークします。
手動で選択した範囲なら、どの領域でもコード内で折りたたみや展開が可能です。
入れ子になったフラグメントの折りたたみまたは展開
現在のフラグメントとネストしたすべてのフラグメントを拡張するには、 Ctrl+NumPad *, 1 を押します。 現在のフラグメントを指定されたネストレベル（1 から 5）まで拡張できます。
ファイル内のすべての折りたたまれたフラグメントを展開するには、 Ctrl+Shift+NumPad *, 1 を押します。 折りたたまれたフラグメントを指定されたネストレベル（1 から 5 まで）まで拡張できます。
カスタム折りたたみ領域
専用のコメントを使用してカスタム 折りたたみ領域としてマークすることで、任意のコードフラグメントを折りたたみ可能にすることができます。 その後、 Ctrl+. を使用してフラグメントを展開および折りたたむか、ファイルを開いたときに自動的に折りたたむことができます。
エディターで、コードの一部を選択して Ctrl+Alt+T を押します。
ポップアップメニューから、 <editor-fold...> コメント または region...endregion コメント を選択します。
//<editor-fold desc="First Names"> const John = firstNames[0]; const James = firstNames[1]; const Nick = firstNames[2]; const Ann = firstNames[3]; const Tom = firstNames[4]; //</editor-fold>//region First names const John = firstNames[0]; const James = firstNames[1]; const Nick = firstNames[2]; const Ann = firstNames[3]; const Tom = firstNames[4]; //endregion<editor-fold...> コメント を選択すると、WebStorm は
//<editor-fold desc="Description>//</editor-fold>形式のコメントを追加します。 region...endregion コメント を選択すると、//region Description //endregion形式でコメントが追加されます。カスタム折りたたみ領域をまだ設定していない場合、どちらのスタイルも選択できます。 ただし、同じファイル内では両方のスタイルは使用できません。 WebStorm は、最初に出現するスタイルのみを認識し、他のスタイルでのコメントはすべて無視されます。
必要に応じて、折りたたまれたフラグメントを非表示にする説明を指定します。
作成した領域を折りたたんだり展開したりするには、 Ctrl+. を押します。
ファイルを開いたときにすべてのカスタム領域が自動で折りたたまれて表示されるようにするには、 設定 ダイアログ（Ctrl+Alt+S ）を開き、 に移動して、 デフォルトの折りたたみ 領域で カスタム折りたたみ領域 チェックボックスを選択します。
作成済みカスタム領域に移動するには、 Ctrl+Alt+. を押します。
コード折りたたみアイコンを設定する
ガターに表示される折りたたみアイコンの表示方法を選択するか、完全に無効にすることができます。
Ctrl+Alt+S を押して設定を開き、 を選択します。
コードの折りたたみの矢印を表示する リストから、 常に または マウスホバー時 を選択します。
アイコンを無効にするには、チェックボックスをオフにします。