WebStorm 2020.1ヘルプ

エディターの基本

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 をクリックします。この場合、アクティブなタブだけが開いたままになります。

  • To close all inactive tabs except the active one and the pinned tabs, righ-click any tab and select その他を閉じる

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

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

  • To open a new tab at the end of the already opened one, select the 新規タブを最後に開く in the tab settings.

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

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

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

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

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

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

画面を分割

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

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

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

クイック・ポップアップ

説明アクション/アクセス知っておくと便利
View quick definition of a symbol (タグ、クラス、メソッド/関数、フィールドなどがあります。)Ctrl+Shift+IWebStormは情報をポップアップで表示します。必要に応じて、Pin button アイコンをクリックして検索ツールウィンドウをアイテムの定義とその用途と共に開きます。
View quick documentation for a code element or a file.Ctrl+Q

WebStormは、適切な情報を含むポップアップを表示します。

You can press Ctrl+Q twice to open the popup in the ドキュメント tool window. (Press same shortcut to switch back to the popup).
If you need to change the font size of the text displayed in the popup window, click the Settings icon and in the window that opens, change the font size according to your preferences.
For code elements you can also view an external documentation while in the quick documentation popup. Click Previous or press Shift+F1 .

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

View the context information.Alt+Qアクションには、現在のメソッドまたはクラス宣言が表示されていないときに表示されます。
View a description of the error or warning at the caret.Ctrl+F1コード分析マーカーをクリックすると、見つかったエラーのリストが表示されます。次または前のエラーに移動するには、F2 または Shift+F2 を使用してください。
ツールチップのテキストをクリップボードにコピーします。 Altをホールドし(Linuxでは Ctrl+Altを押したまま)、ツールチップをクリックする

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

View all usages for code element.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で、エディター | 一般 | スマート・キーに移動します。

最終更新日: 2020年7月02日

関連ページ:

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

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

エディター・タブ

Use this page to configure the appearance of theeditor tabsand tab headers, specify their positioning on the screen, and define the tab closing policy...

JavaScriptドキュメントの検索

WebStormは、標準のJavaScript API、プロジェクトからのシンボルおよびその依存関係からの参照、および外部ライブラリで定義されているシンボルへの参照を示します。ドキュメントポップアップでシンボルのドキュメントを表示したり、メソッドパラメータに関する情報を入手したり、それらへのリンクが...

JavaScriptライブラリを構成する

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

ソースコードを書いて編集する

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

LightEditモード

WebStormでプロジェクト全体を作成またはロードせずに1つのファイルのみを編集する必要がある場合は、LightEditモードを使用できます。LightEditモードはテキストのようなエディターとして機能し、コード補完、コードナビゲーション、自動保存機能などの通常のIDEエディター機能をサポートし...