WebStorm 2019.3ヘルプ

エディターの基本

WebStormエディターは、コードの作成、読み取り、変更に使用するIDEの主要部分です。

エディターは次の領域で構成されています。

Editor details
  1. スクロールバーは現在のファイルのエラーと警告を表示します。

  2. パンくずリストは、現在のファイルのコード内を移動できます。

  3. ガターには、行番号と注釈が表示されます。

  4. タブには、現在開いているファイルの名前が表示されます。

ナビゲーション

さまざまなショートカットを使用して、エディターウィンドウとさまざまなツールウィンドウを切り替えたり、エディターサイズを変更したり、フォーカスを切り替えたり、元のレイアウトに戻ることができます。

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

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

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

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

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

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

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

デフォルトのレイアウトに戻る

  • Shift+F12を押します。

  • 現在のレイアウトをデフォルトとして保存するには、メインメニューからウィンドウ | 現在のレイアウトをデフォルトとして保管を選択します。同じショートカット Shift+F12 を使用して、保存されたレイアウトを復元できます。

最後のアクティブウィンドウにジャンプする

  • F12を押します。

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

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

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

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

IDEの外観を変更する

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

  1. Ctrl+`を押します。

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

エディター | カラー・スキームの切り替えページで視力障害のある人のためのハイコントラスト配色や設定/環境設定ダイアログ(Ctrl+Alt+S)のキーマップページでキーマップ設定を含む配色設定を見つけて調整することもできます。

  • Alt+Homeを押します。

エディター・タブ

エディタータブを閉じたり、隠したり、切り離したりできます。ファイルを編集用に開くたびに、その名前のタブがアクティブなエディタータブの横に追加されます。

エディタータブの設定を構成するには、設定/環境設定ダイアログ(Ctrl+Alt+S)のエディター | 一般 | エディター・タブページを使用します。または、タブを右クリックしてオプションの一覧からエディター・タブの構成を選択します。

タブを開くまたは閉じる

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

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

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

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

  • 既に開いているタブの最後に新しいタブを開くには、タブ設定新規タブを最後に開くを選択します。

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

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

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

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

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

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

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

必要に応じて、このアクションにキーボードショートカットを割り当てることができます。これを行うには、設定/環境設定ダイアログ(Ctrl+Alt+S)でキーマップに移動し、アクティブなタブをピン留めアクションを見つけて右クリックし、キーボード・ショートカットの追加を選択して、使用するキーの組み合わせを押します。

タブを切り離す

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

  • 必要なタブをメインウィンドウの外側にドラッグし、タブを後ろにドラッグして取り付けます。

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

  • プロジェクトツールウィンドウで、デタッチしたいファイルを選択して Shift+Enterを押します。

タブを切り替える

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

  • エディターで、Ctrl+Tabを押します。スイッチャーウィンドウが開いたままになるように Ctrl を押し続けます。タブと他のファイルを切り替えるには Tab を使います。

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、キーマップに進みます。

  2. ディレクトリーのリストで、その他ディレクトリーをクリックし、タブのリストからショートカットを追加する必要があるものを選択します。ショートカットを割り当てることができるタブの制限は9です。

    Add shortcuts for tabs

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

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般 | エディター・タブに進みます。

  2. タブの終了ルールセクションで、好みに合わせて設定を調整し、OKをクリックします。

スペースがなくなったらエディタータブを隠す

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般 | エディター・タブに進みます。

  2. スペースがない場合はタブを非表示にするオプションを選択してください。追加のタブは、エディターの右上部分にあるリストに配置されます。

画面を分割

画面を分割するためにいくつかのオプションを使用できます。

  • エディターで、目的のエディタータブを右クリックし、エディターウィンドウを分割する方法(縦に分割または横に分割)を選択します。WebStormはエディターの分割ビューを作成し、選択に従って配置します。

  • 別の方法として、メインメニューからウィンドウ | エディター・タブ分割して右に移動または分割して下に移動オプションを選択します。

クイック・ポップアップ

説明

アクション/アクセス

知っておくと便利

シンボルの簡単な定義を見る (タグ、クラス、メソッド/関数、フィールドなどがあります。)

Ctrl+Shift+I

WebStormは情報をポップアップで表示します。必要に応じて、Pin button アイコンをクリックして検索ツールウィンドウをアイテムの定義とその用途と共に開きます。

コード要素またはファイルの簡単なドキュメントを表示します。

Ctrl+Q

WebStormは適切な情報と共にポップアップを表示します。 Ctrl+Q を2回押すと、ドキュメンテーションツールウィンドウにポップアップを開くことができます。(ポップアップに戻るには同じショートカットを押します)。
ポップアップウィンドウに表示されるテキストのフォントサイズを変更する必要がある場合は、Settings アイコンをクリックして表示されるウィンドウで、好みに応じてフォントサイズを変更します。
コード要素については、クイックドキュメントポップアップで外部のドキュメントを見ることもできます。 Previous をクリックするか Shift+F1を押します。

クラス Ctrl+Nを探すときにクイックドキュメントポップアップを呼び出すと、リストに表示されているクラスのドキュメントを検索できます。ポップアップにフォーカスを切り替えるには、同じショートカットを押します。

コンテキスト情報を表示します。

Alt+Q

アクションには、現在のメソッドまたはクラス宣言が表示されていないときに表示されます。

キャレットでのエラーまたは警告の説明を表示します。

Ctrl+F1

コード分析マーカーをクリックすると、見つかったエラーのリストが表示されます。次または前のエラーに移動するには、F2 または Shift+F2 を使用してください。

ツールチップのテキストをクリップボードにコピーします。

Alt をホールドし(Linuxでは Ctrl+Altを押したまま)、ツールチップをクリックする

このアクションを使用すると、たとえばスクリーンショットを作成する代わりに、ツールチップに表示される重要な情報をいくつか保存できます。

コード要素のすべての用途を表示します。

Ctrl+Shift+F7

強調表示を制御するには、設定/環境設定 | エディター | 一般キャレット移動の強調表示領域)のキャレットの要素の強調表示オプションを選択またはクリアします。

節電モード(ファイル | 省電力モード)をオンにすると、使用箇所は強調表示されません。

便利なエディター設定

設定/環境設定ダイアログ(Ctrl+Alt+S)を使ってエディターの動作をカスタマイズすることができます。

Useful editor configurations

次の一般的な設定を確認してください。

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | コード・スタイルに進みます。

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

フォント、サイズ、フォント合字を設定する

  • 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | フォントに進みます。

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般マウス動作の詳細セクション)に進みます。

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

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

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

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | カラー・スキームの切り替えに進みます。

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

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

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

キャレット配置を設定する

  • 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般に進みます。仮想スペースセクションでは、キャレット配置オプションを設定できます。

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

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

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

  • 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般に進みます。その他セクションでは、末尾のスペースのオプションを設定できます。

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

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

  • 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般 | 外観に進みます。

    例:ハードラップガイドの表示やパラメータヒントの表示を設定できます。

長い行の外観を管理する

  1. 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般に進みます。

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

スマートキーを設定する

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

  • 設定/環境設定ダイアログ(Ctrl+Alt+S)で、エディター | 一般 | スマート・キーに進みます。

最終更新日: 2019年11月24日

関連ページ:

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからを選択するか...

エディター・タブ

WindowsとLinux用のmacOS用このページを使用して、エディタータブとタブヘッダーの外観を設定し、画面上での位置を指定し、タブを閉じるポリシーを定義します。外観タブ配置リストを使用してエディタータブの位置を設定します。なしを選択した場合、タブは表示されず、新しいファイルは現在のエディターで...

JavaScript ライブラリーを設定する

WebStormでは、ライブラリーとは、WebStormが編集したプロジェクトコードから取得する関数やメソッドに加えて、WebStormの内部知識に関数やメソッドを追加したファイルまたはファイルのセットです。プロジェクトの範囲では、そのライブラリーはデフォルトで書き込み禁止になっています。WebSt...

ソースコードで作業する

コードを使用する場合、WebStormは作業にストレスがないことを保証します。追加、選択、コピー、移動、編集、折りたたみ、出現箇所の検索、コードの保存に役立つさまざまなショートカットと機能を提供します。エディター内のナビゲーションについては、エディターの基本を参照してください。アクションの検索使用し...