WebStorm 2024.3 ヘルプ

自動インポート

XML

自動インポートのツールチップを表示

バインドされていない名前空間の名前を入力すると、自動インポートツールチップが自動的に表示されます。詳細については、「バインドされていない名前空間のインポート」を参照してください。

TypeScript/JavaScript

コード補完時に ES6 のインポートを追加する

  • このチェックボックスが選択されている場合、WebStorm は、別のプロジェクトファイルで ES6 エクスポートを使用してエクスポートされたシンボルを完了すると、JavaScript コードにインポートステートメントを自動的に挿入します。

    Add ES6 imports on code completion
  • チェックボックスがオフの場合、Alt+Enter WebStorm を押すと、シンボルのインポートを提案するポップアップが表示されます。

    Add ES6 imports on code completion disabled
  • 完了と自動インポートは、ステートレスコンポーネントを含む React コンポーネントでも機能します。WebStorm はそれらを適切に検出し、コード補完を提供し、インポート文を自動的に追加します。

    Completion for imports in React stateless components

TypeScript のインポートを自動的に追加する

WebStorm で TypeScript コードでインポート文を生成する場合は、このチェックボックスを選択します。下記のチェックボックスを使用して、インポート世代を呼び出すタイミングを選択します。

  • コード補完時に実行このチェックボックスが選択されている場合、別のプロジェクトファイルにエクスポートされたシンボルを完了すると、WebStorm は TypeScript コードにインポートステートメントを自動的に挿入します。

  • 自動インポートツールチップを使用このチェックボックスが選択されている場合、インポート可能な未解決のシンボルにキャレットを置くと、WebStorm はインポートの提案を含むツールチップを表示します。チェックボックスをオフにすると、Alt+Enter を押すだけでインポート生成を呼び出すことができます。

  • 明確なインポートをオンザフライで追加このチェックボックスを選択すると、コードを入力するか、シンボルをインポートするソースが 1 つしかない場合は、まだインポートされていないシンボルを含むフラグメントを貼り付けると、WebStorm はインポートステートメントを追加します。

たとえば、Chrome のようにフルファイル名を必要とするブラウザーで ES6 モジュールを使用している場合は、インポート文の ES6 モジュールの名前の拡張子が .js であることが重要です。

  • 拡張機能を JavaScript コンテキストに自動的に追加するには、コードスタイル: JavaScript ページのインポートタブファイル拡張子を使用するチェックボックスを選択します。

  • 拡張子を TypeScript コンテキストに自動的に追加するには、コードスタイル: TypeScript ページのインポートタブファイル拡張子を使用するチェックボックスを選択します。

Dart

貼り付け時にインポートを更新

WebStorm が Dart コードの貼り付けられたブロック内の欠落しているシンボルへの参照を処理する方法を選択します。

  • すべて — WebStorm は、貼り付けられたコードで欠落しているすべてのシンボルに対してインポートステートメントを自動的に挿入します。

  • 質問 — インポートするシンボルを選択するように求められます。

  • なし — WebStorm はインポートステートメントを自動的に追加しません。未解決の参照で Alt+Enter を押し、リストからインポート <シンボル名> を選択することにより、インポート生成を呼び出すことができます。

関連ページ:

XML

WebStorm は、構造検証、フォーマット () およびインデント (XML コードスタイルによる)、バインドされていない名前空間のインポート、コード構造の表示、タグのアンラップと削除 ()、インスタンスドキュメントからの DTD ファイルおよびスキーマの生成など、XML の強力なサポートをもたらします。構文とエラーのハイライト、コード補完 ()、インテンションアクション ()、クイックドキュメントルックアップ () など。WebStorm は、Apache Software Foundation Gro...

JavaScript

WebStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションおよびクイックフィックス...

コードスタイル: JavaScript

このページを使用して、JavaScript ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント:タブ文字を使用するこのチェックボックスをオンにすると、タブ文字が使用されます。キー押下時、インデント用、コードを再フォーマットするため、チェックボックスがオフの場合、WebStorm はタブではなくスペースを使用します。スマートタブインデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起...

コードスタイル: TypeScript

このページを使用して、TypeScript ファイルのフォーマットオプションを設定します。これらの設定を変更すると、プレビューペインに、コードへの影響が表示されます。タブとインデント:タブ文字を使用するこのチェックボックスをオンにすると、タブ文字が使用されます。キー押下時、インデント用、コードを再フォーマットするため、チェックボックスがオフの場合、WebStorm はタブではなくスペースを使用します。スマートタブインデントは 2 つの部分で構成されます。1 つの部分はコードブロックのネストに起...

外観

このページを使用して、エディターの外観をカスタマイズします。キャレットの点滅間隔 (ミリ秒) 指定した期間(ミリ秒単位)でキャレットを点滅させるには、このチェックボックスを選択します。ブロックキャレットを使用するこのチェックボックスを選択すると、ブロックキャレットが挿入モードで適用され、通常のキャレットが上書きモードで適用されます。このチェックボックスをオフにすると、通常のキャレットが挿入モードで適用され、ブロックキャレットが上書きモードで適用されます。行全体の高さのキャレットを使用するキャレット...