自動インポート
JavaScript および TypeScript ファイルでは、WebStorm は、モジュール、クラス、コンポーネント、エクスポート可能なその他のシンボルや XML ネームスペースのインポートステートメントを自動的に追加します。JavaScript で自動インポート、TypeScript での自動インポート、XML 名前空間のインポートの詳細を参照してください。
ES6 シンボルまたは CommonJS モジュールを完了すると、WebStorm はインポートステートメント自体のスタイルを決定するか、必要なスタイルを選択できるポップアップを表示します。JavaScript で自動インポートから詳細を参照してください。
コード補完にインポートステートメントを追加する
WebStorm は、エクスポートされた JavaScript または TypeScript シンボルを完了すると、インポートステートメントを追加します。
完了時に自動インポートを無効にして、代わりにクイックフィックスを使用することができます。
設定ダイアログ（Ctrl+Alt+S）で、に移動します。
開いた自動インポートページで、TypeScript/JavaScript 領域のチェックボックスを使用して、コード補完でのインポート生成を有効または無効にします。
クイックフィックスを使用する
プロジェクトの依存関係からの JavaScript シンボルの場合、WebStorm には、存在しないときや自動インポートが無効になっているときにインポートステートメントを追加するためのクイックフィックスがあります。
WebStorm は、シンボルを未解決としてマークし、推奨されるクイックフィックスを含むツールチップを表示します。
または、Alt+Enter を押します。
インポート可能なソースが複数ある場合は、WebStorm に候補のリストが表示されます。
import ステートメントの欠落警告を表示したくない場合は、現在のファイルまたはプロジェクト全体でインスペクションを無効にします。詳細については、「インスペクションの無効化と有効化」を参照してください。
あるいは、ファイルのハイライトレベルを変更します。エディターの右上隅にあるウィジェットの上にマウスを置き、ハイライトリストからなしまたは構文を選択します。
自動インポートツールチップを使用してインポートステートメントを追加する
TypeScript では、WebStorm は自動インポートのツールチップを表示します。提案を受け入れるには、Alt+Enter を押します。
ポップアップを無効にするには、エディターの右上隅にあるインスペクションウィジェットの上にマウスを置き、
をクリックして、自動インポートツールチップを表示オプションをオフにします。
TypeScript での自動インポートの詳細を参照してください。
インポートの最適化
WebStorm は、未使用のインポートを削除し、現在のファイル、ディレクトリ内のすべてのファイル、プロジェクト全体で一度にインポートステートメントを整理できます。
すべてのインポートを最適化する
プロジェクトツールウィンドウ（）でファイルまたはディレクトリを選択します。
以下のいずれかを行います。
に移動します（または Ctrl+Alt+O を押します）。
コンテキストメニューからインポートの最適化を選択します。
（ディレクトリを選択した場合）ディレクトリ内のすべてのファイルでインポートを最適化するか、ローカルで変更されたファイルのみでインポートを最適化するか（プロジェクトがバージョン管理下にある場合）を選択し、実行をクリックします。
1 つのファイルでインポートを最適化する
import ステートメントにキャレットを置き、Alt+Enter を押すか、
アイコンを使用します。次に未使用の 'import' を除去を選択します。
エディターでファイルを開くか、プロジェクトツールウィンドウでファイルを選択し、Ctrl+Alt+O を押します。
ファイルの再フォーマット時にインポートを最適化する
再フォーマットされるたびに、ファイル内のインポートを最適化するように WebStorm に指示できます。
エディターでファイルを開き、Ctrl+Alt+Shift+L を押して、開いたファイルの整形ダイアログでインポートの最適化チェックボックスが選択されていることを確認します。
その後、このプロジェクトで Ctrl+Alt+L を押すたびに、WebStorm はインポートを自動的に最適化します。
VCS に変更をコミットする前にインポートを最適化する
プロジェクトがバージョン管理下にある場合、VCS にコミットする前に、変更されたファイルのインポートを最適化するように WebStorm に指示できます。
コミットツールウィンドウ Alt+0 で、
をクリックし、コミットチェック領域の > インポートの最適化チェックボックスを選択します。
モーダルモードの場合は、Ctrl+K を押して変更のコミットダイアログを開き、インポートの最適化チェックボックスを選択します。
更新されたコードでのみインポートを最適化することもできます。プロジェクトツールウィンドウで、フォルダーを選択し、Ctrl+Alt+O を押します。インポートの最適化ダイアログで VCS 変更されたファイルのみ処理するを選択し、実行をクリックします。
保存時にインポートを自動的に最適化する
変更が保存されたときに、変更されたファイルへのインポートを自動的に最適化するように IDE を構成できます。
Ctrl+Alt+S を押して設定を開き、を選択します。
インポートの最適化オプションを有効にして、変更を適用します。
さらに、すべてのファイルタイプリストから、自動インポート最適化を使用するファイルのタイプを選択します。
インポート文のスタイルを設定する
JavaScript または TypeScript インポートのスタイルを構成するには、設定ダイアログ (Ctrl+Alt+S) を開き、 または に移動し、インポートタブのコントロールを使用してインポートステートメントの外観をカスタマイズします。詳細については、JavaScript コードスタイル: インポートおよび TypeScript コードスタイル: インポートを参照してください。
終了セミコロン、一重引用符と二重引用符、末尾のコンマの自動挿入を構成するには、設定ダイアログ (Ctrl+Alt+S) を開き、 または に移動し、句読点タブのコントロールを使用します。詳細については、JavaScript コードスタイル: 句読点および TypeScript コードスタイル: 句読点を参照してください。
CSS、SCSS、Less コンテキストでは、WebStorm はデフォルトで、
importステートメントおよび URL で生成された文字列リテラルに二重引用符を使用します。一重引用符を使用するには、設定ダイアログ (Ctrl+Alt+S) を開き、 に移動し、その他タブを開いて、引用符リストから単一を選択します。再フォーマット後に選択したスタイルをファイル全体に適用するには、リストの整形時に強制するチェックボックスを選択します。
関連ページ：
JavaScript
WebStorm を使用すると、JavaScript および Node.js を使用して最新の Web、モバイル、デスクトップアプリケーションを開発できます。WebStorm は、React、Angular、Vue.js、その他のフレームワークもサポートし、Web 開発用のさまざまなツールとの緊密な統合を提供します。JavaScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、コードインスペクションおよびクイックフィックス...
TypeScript
WebStorm は TypeScript ソースコードの開発、実行、デバッグをサポートします。WebStorm は .ts および .tsx ファイルを認識し、ユーザー側で追加の手順を踏むことなく編集するためのコーディング支援を提供します。TypeScript ファイルはアイコン。TypeScript 対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完、エラーと構文のハイライト、フォーマット、多数のコードインスペクションとクイックフィックス、および一般的で TypeScript...
XML
WebStorm は、構造検証、フォーマット () およびインデント (XML コードスタイルによる)、バインドされていない名前空間のインポート、コード構造の表示、タグのアンラップと削除 ()、インスタンスドキュメントからの DTD ファイルおよびスキーマの生成など、XML の強力なサポートをもたらします。構文とエラーのハイライト、コード補完 ()、インテンションアクション ()、クイックドキュメントルックアップ () など。WebStorm は、Apache Software Foundation Gro...
インスペクションの無効化と有効化
いくつかのインスペクションは現在見たくない問題を報告するかもしれません。この場合、無効にしたり抑制したりできます。インスペクションを無効にする：インスペクションを使用不可にすると、無効になります。これは、このインスペクションが検出するように設計されているという問題について、コード分析エンジンがプロジェクトファイルの検索を停止することを意味します。インスペクションを無効にすると、現在のインスペクションプロファイルで無効になります。他のプロファイルでは有効のままです。WebStorm のほとんどの...
コードの再フォーマットと再配置
WebStorm を使用すると、現在のコードスタイルスキームまたは .editorconfig ファイルで指定した要件に従ってコードを再フォーマットできます。で定義されていないものがあれば、プロジェクト設定から取得されます。コードの一部、ファイル全体、ファイルのグループ、ディレクトリ、モジュールを再フォーマットできます。また、コードの一部または一部のファイルを再フォーマットから除外することもできます。コードフラグメントを再フォーマットするエディターで、再フォーマットしたいコードフラグメントを選択しま...
バージョン管理統合サポート
WebStorm は 2 つのレベルでバージョン管理統合をサポートします。IDE レベルでは、VCS 統合は、デフォルトで有効になっているバンドルされたプラグインのセットを通じて提供されます。プロジェクトレベルでは、プロジェクトフォルダーを 1 つまたは複数のバージョン管理システムと関連付けることで、VCS 統合が有効になります。プロジェクトルートをバージョン管理システムに関連付ける：WebStorm を使用すると、プロジェクトとバージョン管理システムの統合を迅速に有効にし、それをプロジェクト...