WebStorm 2024.3 ヘルプ

インスペクションを実行する

WebStorm は、エディターで開かれたファイル内のコードを分析し、入力時に問題のあるコードをハイライトします。さらに、選択したファイル範囲に対して必要なインスペクションまたは一連のインスペクションを手動で実行できます。この場合、ファイル内で検出されたすべての問題に関する包括的なレポートが得られます。

現在のファイルの即時分析

IDE は継続的にコードをチェックし、問題を検索します。エディターの右上隅にあるウィジェットには、現在のファイルで検出された各重大度の問題の数が表示されます。

Inspection widget

ウィジェットをクリックすると、問題ツールウィンドウファイルタブで問題のリストが開きます。表示 | ツールウィンドウ | 問題を選択するか、Alt+6 を押して、問題ツールウィンドウにアクセスすることもできます。

それぞれの問題について、Alt+Enter を押すか Show Quick Fixes をクリックすると、提案されたクイックフィックスを確認できます。F4 を押すか、ツールウィンドウで問題をダブルクリックして、エディターの対応する行に移動することもできます。

または、Open Editor Preview をクリックして、ツールウィンドウで問題を表示および修正できます。

Detected problems shown in the Problems tool window

スクロールバーのカラーストライプは、検出されたコードの問題を示し、ファイルをスクロールせずに対応する行にすばやくアクセスできます。ストライプ上のマークにカーソルを合わせると、ツールチップで検出された問題が表示されます。マークをクリックすると、対応する行に移動します。

Results of instant analysis

ウィジェットで the Next Highlighted Error button the Next Highlighted Error button をクリックするか、それに応じて F2 または Shift+F2 を押すと、ファイル内でハイライトされた問題から別の問題に移動できます。デフォルトでは、IDE は重大度に応じて問題に移動します: エラー> 警告> 弱い警告> サーバーの問題> タイプミス。

重大度に関係なく、問題を 1 つずつ解決するように WebStorm を構成できます。エディターの右上隅にあるウィジェットの上にマウスを置き、the More button をクリックし、'次のエラー' アクション (F2) 実行を選択して、すべての問題を有効にします。

Configuring navigation between highlighted lines

インスペクションを手動で実行する

いくつかのインスペクションはグローバルコード分析を必要とし、それらがエディターで無効にされる理由です。これらのインスペクションは設定 | エディター | インスペクションにリストされています。Filter Inspections をクリックしてバッチモードのインスペクションのみを表示するを選択します。

コード内のすべての問題の完全なレポートを取得するには、インスペクションを手動で実行します。この場合、IDE はインスペクションプロファイルで有効になっているすべてのインスペクションを実行し、専用のツールウィンドウに結果を表示します。分析を完了するのに必要な時間は、有効になっているインスペクションの数と分析するスコープのサイズによって異なります。

すべて実行インスペクション

  1. メインメニューで、コード | コードのインスペクションに移動します。

  2. 分析するファイルのスコープを指定するには、次のいずれかを実行します。

    • プロジェクト全体または未コミットのファイルを選択します。

    • カスタムスコープを選択し、リストから適切なスコープを選択します。

      Select custom inspection scope
    • 構成されたカスタムスコープのいずれにも適合しない場合は、the Browse button をクリックし、スコープとファイルの色の説明に従って新しいスコープを構成します。

  3. 適用するインスペクションプロファイルを選択します。

    新しいプロファイルを作成するか、既存のプロファイルの 1 つを変更するには、構成をクリックします。

  4. 分析をクリックして解析を開始します。

インスペクションスコープの指定ダイアログ

項目

説明

プロジェクト全体

プロジェクト全体の検査。

ファイル <名前>

プロジェクトツールウィンドウで現在選択されているか、エディターで開かれているファイルを調べます。

未コミットのファイル

このスコープは、バージョン管理下のプロジェクトでのみ使用できます。

バージョン管理システムにコミットされていないファイルのみをインスペクションします。

カスタムスコープ

ファイルのカスタムスコープをインスペクションします。リストから定義済みのスコープを選択するか、the Browse button をクリックして、開いたスコープダイアログでスコープを定義します。

挿入されたコードをインスペクション

コードに埋め込まれた他の言語のコードをインスペクションします。

インスペクションプロファイル:

コードのインスペクションに使用するプロファイルを選択します。

必要なプロファイルがリストにない場合は、構成をクリックして新しいプロファイルを作成します。

シングルインスペクションを実行

単一のインスペクションを実行すると、特定の問題を追跡する場合に役立ちます。ファイル内で警告が見つかった場合は、プロジェクト全体またはファイルの必要な範囲をインスペクションして、コードベースにそのような警告がないことを確認できます。

  1. Ctrl+Alt+Shift+I を押すか、メインメニューでコード | コードの解析 | インスペクション名を指定して実行に移動します。

  2. ポップアップにインスペクション名を入力します。キャメルハンプを使用して、キャメルケースの単語と空白を単語の最初の文字と一致させます。候補リストには、検索要求に一致するインスペクションが表示されます。

    正しいインスペクションを選択しているかどうかわからない場合は、その説明を表示できます。これを行うには、ポップアップでインスペクションを選択し、Ctrl+Q を押します。

  3. 必要なインスペクションをダブルクリックします。

  4. 表示されるダイアログで、分析するファイルの範囲を選択します。

    ファイルマスクオプションを使用すると、インスペクションするファイルの数を絞り込むことができます。

    チェックボックスを選択し、分析するファイルの名前に一致する文字とワイルドカードのパターンを指定します。複数のファイルマスクを区切るには、コンマを使用します。

  5. 一部のインスペクションには、設定を求めるプロンプトが表示される追加オプションがあります。

    これらの設定はこの実行にのみ適用され、現在のプロファイルのこのインスペクションの構成には影響しません。

    IDE は、インスペクションの結果を専用のツールウィンドウツールウィンドウに表示します。そこで、検出された問題を調べて修正できます。

    Running one inspection in uncommitted files

コミット時にコードを分析する

プロジェクトが Git または Mercurial バージョン管理下にある場合は、変更されたファイルをコミットする前に分析するように IDE を構成できます。

  1. Alt+0 を押してコミットツールウィンドウを開き、コミットオプションを表示 the Settings button をクリックします。

  2. コミットチェック領域で、コードの解析チェックボックスを選択します。

  3. プロファイルの選択をクリックし、IDE がインスペクションを実行するために必要なインスペクションプロファイルを選択します。

    Run inspections before commit: Commit tool window
  4. コミットをクリックします。

    WebStorm は、選択したプロファイルからインスペクションを実行することにより、変更されたファイルのコードを分析します。

    エラーまたは警告が検出されると、通知が表示されます。

    Notification on detected problems
  5. 通知で、コード解析のレビューをクリックして、メッセージツールウィンドウで検出された問題のリストを表示します。無視をクリックして、検出された問題を修正せずに変更をコミットします。

コードインスペクションを Qodana で実行する

これはデフォルトで WebStorm にバンドルされ、有効になっています。関連する機能が利用できない場合は、プラグインを無効にしていないことを確認してください。詳細については、プラグイン設定を開くを参照してください。

Qodana を使用して、コードをローカルまたはリモートでインスペクションできます。Qodana の主な使用例は、CI/CD サーバー上でリソースを大量に消費するコード分析をリモートで実行することです。ただし、IDE で同じ分析を実行して、同じ結果が得られることを確認し、ソースコード内で検出された問題を特定することもできます。

  1. メインメニューで、ツール | Qodana | Qodana でコード解析を試すに移動します。

  2. インスペクションを実行する場所 (ローカルまたは CI/CD サーバー) を選択します。

    サーバー上でインスペクションを実行するには、まず CI 上で Qodana をセットアップする必要があります。

  3. Qodana 設定ファイルが開きます。このファイルでは、Qodana インスペクションプロファイルを指定し、特定のインスペクションを有効または無効にし、分析前にインストールする必要があるプラグインのリストを指定できます。

    実行をクリックします。

分析が完了すると、サーバーサイド解析タブの問題ツールウィンドウにレポートが表示されます。結果をローカルで操作することも、Qodana クラウド(英語)に送信することもできます。

Qodana 分析のすべてのローカル実行のレポートは保存され、メインメニューツール | Qodana | [report name] から利用できます。現在開いているレポートの横にはチェックマークが付いており、それをクリックしてレポートを閉じることができます。

Quodana results

Qodana の詳細については、そのドキュメントを参照してください。

インスペクションをオフラインで実行する

IDE からコードインスペクションを実行することに加えて、実際に WebStorm を実行せずにコマンドラインからインスペクションを起動することができます。インスペクションの結果は XML ファイルに保存されます。詳しくは、コマンドラインからコードインスペクションを実行するを参照してください。

スコープの順序を変更する

デフォルトでは、すべての有効なコードインスペクションがプロジェクト内のすべてのファイルを解析します。必要に応じて、同じインスペクションを異なる設定のファイルの複数のスコープで実行することができます。

ファイルが複数のスコープに含まれていて、これらのスコープでインスペクションを有効にすると、WebStorm はリスト内の順序に基づいて処理します。一番上のスコープは優先順位が最も高く、最初に分析されます。

  1. 設定ダイアログ(Ctrl+Alt+S)で、エディター | インスペクションを選択します。

  2. リストから任意のインスペクションを選択します。

  3. すべてのスコープリストから、スコープ順序の編集を選択します。

    the In All Scopes list
  4. 必要な範囲を選択し、the Up buttonthe Down button を使ってリストを上下に移動します。

    Changing the order of scopes
  5. 必要に応じて、新しいスコープを作成します。これを行うには、the Edit button スコープの編集)をクリックし、スコープ設定を指定し、スコープ設定に含めるファイルとフォルダーを選択します。

    A new scope with added files and folders

関連ページ:

インスペクションの重大度を変更する

インスペクション重大度レベルは、検出されたコードの問題がプロジェクトに与える影響の深刻度を示します。WebStorm には、定義済みの一連の重大度レベルがあります。エラー構文エラー警告バグを引き起こす可能性がある、または拡張が必要なコードの断片弱い警告改善または最適化できるコードの断片 (冗長なコード、重複したコードフラグメントなど) サーバーの問題外部ビルドサーバー (TeamCity など) に起因する問題文法エラー文法の間違い。この重大度は、バンドルされている Grazie Lite プラグイン...

問題ツールウィンドウ

問題ツールウィンドウには、WebStorm がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、この IDE は継続的にコードをチェックし、問題を検索します。このタブには、現在のファイルで見つかったすべてのコードの問題がリストされます。エディターでファイルを切り替えると...

プロファイルを構成する

インスペクションプロファイルは、有効なインスペクション、これらのインスペクションが分析するファイルのスコープ、およびインスペクション重大度設定に関する情報を保持します。WebStorm には、2 種類のプロファイルがあります。プロファイル IDE に保管は、WebStorm 構成ディレクトリの inspection フォルダーに保存され、すべてのプロジェクトで使用できます。プロジェクトにコピーオプションを使用して、IDE プロファイルを現在のプロジェクトにコピーできます。プロファイルプロジェクトに保管は...

スコープとファイルの色

スコープは、プロジェクト内のファイルとフォルダーのグループです。スコープを使用して、さまざまな IDE ビューでプロジェクト項目を視覚的に区別し、特定の操作の範囲を制限できます。スコープは、プロジェクト内のファイルを論理的に編成するように設計されています。テストソースはテスト関連のスコープに移動でき、製品コードは製品ファイルのスコープに関連付けることができます。これらの論理チャンクにより、プロジェクトの管理が容易になります。例: テスト関連のインスペクションをテストクラスでのみ実行すると、アプリ...

スコープ

この設定ページを使用してスコープ、つまりさまざまな操作を適用するファイルのセットを定義します。メインツールバー:スコープの追加新しいローカルスコープまたは共有スコープを追加します。削除リストから選択したスコープを削除します。構成のコピー選択したスコープのコピーを作成してください。名前を付けて保存選択したローカルスコープを共有として、または選択した共有スコープをローカルとして保存します。

言語インジェクション

言語インジェクションを使用すると、ファイルのメイン言語とは異なるプログラミング言語のコードを操作できます。WebStorm は、HTML、CSS、XML、JSON、RegExp、文字列とテンプレートリテラル内、XML に似た言語のタグと属性内の他のコードフラグメントを編集するための包括的な言語支援を提供します。始める前に:プラグインのインストールの説明に従って、設定 | プラグインページのインストール済みタブで IntelliLang バンドルプラグインが有効になっていることを確認します。一時的に...