WebStorm 2026.1 ヘルプ

PSI ビューアー

PSI ビューアーを使用すると、WebStorm によって解釈されるため、ソースコードの内部構造を調べることができます。

PSI Viewer

PSI ビューアーを有効にする

  1. ヘルプメニューからカスタムプロパティの編集を選択するか、ウェルカム画面で構成をクリックしてからカスタムプロパティの編集を選択します。

    WebStorm は、構成ディレクトリに空の idea.properties ファイルを作成し、新しいエディタータブで開きます。プラットフォームプロパティの構成から詳細を参照してください。

  2. idea.properties ファイルに idea.is.internal=true と入力します。

  3. WebStorm を再起動してください。

ソースコードの PSI 構造を見る

  1. ツールメニューから PSI 構造を表示を選択します。

  2. PSI ビューアーダイアログで、分析するソースコードのフラグメントをテキスト領域に入力または貼り付け、ファイルタイプを選択し、その他のオプションを指定します。

    • PSI 構造を表示リストから、調べるファイルの種類または言語構成を選択します。認識されるファイルタイプのセットは、サポートされている言語とインストールされているプラグインによって異なります。

    • PsiWhiteSpace を表示チェックボックスを選択して、ソースコード内のスペースに対応する PsiWhiteSpace ノードを表示します。

    • テキストペインで、調査するソースコードを入力します。テキストを手動で入力するか、クリップボードから貼り付けます。エディターからテキストをコピーして PSI ビューアーを開くと、テキストペインの前の内容が選択されます。これにより、Ctrl+V または Ctrl+Shift+V を使用してクリップボードからテキストを上書きできます。

      コードを入力しながら、Ctrl+Y を押してキャレット位置の行を削除し、Ctrl+D でテキストを複製し、Shift+Enter を使用して行を追加できます。

  3. PSI ツリーを構築するをクリックして PSI 構造ツリービューを生成し、PSI 構造ペインで生成された PSI ツリーをプレビューします。

    テキストペインのソースコードが変更されている場合は、PSI ツリーを構築するをクリックしてツリー表示をリフレッシュします。

    ツリービューを操作すると、テキストペインで対応するソースコードの断片がハイライトされます。現在選択されているツリーノードに参照がある場合は、リファレンスペインにも表示されます。

    リファレンス読み取り専用フィールドには、PSI 構造ツリービューのノードへの参照(存在する場合)が表示されます。

    未解決の参照は赤で表示されます。ソースコードの対応する断片も赤い枠でハイライトされます。

2024 年 11 月 11 日