WebStorm 2019.3ヘルプ

JavaScript ライブラリの構成

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

WebStormは、コーディング支援(つまり、コード補完、構文強調表示、ナビゲーション、ドキュメントの参照)を強化するためにのみライブラリを使用します。ライブラリはプロジェクトの依存関係を管理する方法ではありません。

TypeScriptコミュニティスタブの使用 (TypeScript定義ファイル)

WebStormでは、DefinitelyTypedスタブ(英語)をライブラリとして設定および使用できます。これは、次のような場合に特に役立ちます。

  • コード補完を改善するには、WebStorm静的解析には高度すぎるライブラリまたはフレームワークのシンボルを解決し、そのようなシンボルの型情報を追加します。

  • テストフレームワークからグローバルに定義されたシンボルを解決します。

次の例は、post() 関数が解決されていないNode Expressアプリケーションのコードを示しています。

ws_js_configure_libraries_node_express_symbols_not_resolved_without_d_ts.png

推奨されるTypeScript定義ファイルをインストールした後、WebStormは post() を正常に解決します。

ws_js_configure_libraries_node_express_symbols_resolved_with_d_ts.png

WebStormはインテンションアクションを使用してTypeScript定義ファイルをエディターからダウンロードすることも、JavaScript。ライブラリページで実行することもできます。

インテンションアクションを使用してTypeScript定義をダウンロードするには

  • このライブラリまたはフレームワークで require ステートメントにキャレットを置き、Alt+Enterを押してより良い型情報のためのTypeScript定義のインストールを選択します。

    ws_js_libs_download_ts_definitions_intention_action.png

    WebStormはライブラリのタイプ定義をダウンロードし、JavaScript。ライブラリページのライブラリリストに追加します:

    ws_js_libs_download_ts_definitions_added_to_lib_list.png

設定/環境設定ダイアログでTypeScript定義をダウンロードするには

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | ライブラリに移動します。

  2. 表示されるJavaScript。ライブラリページで、ダウンロード をクリックし、表示されるライブラリのダウンロードダイアログで必要なライブラリを選択して、ダウンロードおよびインストールをクリックします。

    ws_js_configure_libraries_download_ts_community_stubs.png

    WebStormは、選択したライブラリのタイプ定義をダウンロードし、プロジェクトビューの外部ライブラリノードに表示します。

オプション

Node.jsコアライブラリの構成

Node.jsバイナリにコンパイルされるfs(英語)path(英語)http(英語)、およびその他のコアモジュールのコード補完と参照解決を取得するには、Node.js コアモジュールソースをJavaScriptライブラリとして構成する必要があります。

Node.jsコアを設定するには

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | Node.jsとNPMに移動します。

  2. Node.js のコーディング支援チェックボックスを選択します。

    Node.jsコアライブラリはバージョン固有のものです。Node.js および NPMページでNode.jsのバージョンを変更した場合は、もう一度チェックボックスを選択する必要があります。その後、WebStormはこの新しいバージョン用の新しいライブラリを作成します。

node_modulesライブラリの構成

プロジェクトの依存関係にコード補完を提供するために、WebStormはnode_modulesライブラリを自動的に作成し、Node.jsモジュールはプロジェクト内に保持されますがインスペクションはそれらに対して実行されず、パフォーマンスが向上します。

ws_js_node_modules_added_settings.png

プロジェクトツールウィンドウでは、node_modulesもライブラリとしてマークされています。

ws_js_configure_libraries_node_modules_marked_as_library_root.png

ただし、node_modulesライブラリには、プロジェクトの package.json ファイルの dependencies オブジェクトにリストされているモジュールのみが含まれています。WebStormは依存関係の依存関係をnode_modulesライブラリに含めませんが、実際にはそれらをプロジェクトから除外します。

ライブラリのスコープの構成

WebStormは、クライアント側のコードでNode.js APIなど、無関係な補完を提案することがあります。これは、デフォルトでWebStormがプロジェクトフォルダー全体の補完のためにライブラリを使用するためです。WebStormでは、ライブラリのスコープを設定することでコード補完を調整できます。

ライブラリのスコープを構成するには

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScript | ライブラリに移動します。開くJavaScript。ライブラリページには、すでに利用可能なすべてのライブラリのリストが表示されます。

  2. 必要なライブラリを選択し、その横にあるEnabledチェックボックスをオフにして、スコープの管理をクリックします。JavaScript ライブラリ。使用スコープダイアログが開きます。

  3. icons.general.add.png をクリックし、ライブラリスコープに含めるファイルまたはフォルダーを選択します。WebStormはJavaScript ライブラリの使用スコープダイアログに戻ります。パスフィールドには、選択したファイルまたはフォルダーが表示されます。

  4. 追加されたファイルまたはフォルダーごとに、ライブラリリストから、構成するライブラリを選択します。

例:HTMLおよびNode.jsコアライブラリのスコープの設定

WebStormでフルスタックのJavaScriptアプリケーションを使用している場合、コード補完はNode.jsコード内にクライアント側コードとDOM APIのNode.js APIを示していることがよくあります。これは、DOM APIを持つHTMLライブラリとNode.js APIを持つNode.js コアライブラリがデフォルトでプロジェクト全体で有効になっているために発生します。無関係な補完候補を取り除くには、これらのライブラリのスコープを設定する必要があります。

HTMLおよびNode.jsコアライブラリのスコープを設定するには

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワークJavaScriptに移動し、ライブラリをクリックします。JavaScript。ライブラリページが開き、現在のプロジェクト用に構成されているすべてのライブラリが表示されます。

    ws_html_node_libs.png
  2. HTMLおよびNode.js コアの項目の横にあるEnabledチェックボックスをオフにします。

  3. スコープを管理するをクリックします。JavaScript ライブラリの使用スコープダイアログが開きます。

  4. HTMLライブラリのスコープを構成するには、icons.general.add.pngをクリックし、クライアント側コードのあるフォルダーを選択して、ライブラリリストからHTMLを選択します。

  5. Node.js コアライブラリのスコープを構成するには、もう一度 icons.general.add.png をクリックし、サーバー側コードを持つフォルダーを選択して、ライブラリリストからNode.js コア を選択します。

    WebStormは、HTMLおよびNode.jsコアライブラリの項目を解決し、選択したプロジェクトフォルダーのファイルのみで完成させることができます。

同様に、自動的に作成されたnode_modulesライブラリの有効範囲を構成することができますnode_modulesライブラリの構成を参照してください。

CDNリンクを介して追加されたライブラリの構成

ライブラリ .js ファイルがCDNリンクを介して参照されている場合、そのファイルはランタイムで使用できますが、WebStormでは表示されません。このようなライブラリ .js ファイルから補完リストにオブジェクトを追加するには、ファイルをダウンロードして外部ライブラリとして設定します。

ライブラリをダウンロードするには

  • ライブラリへのCDNリンクにキャレットを置き、Alt+Enterを押して、リストからライブラリをダウンロードを選択します。

    ws_js_configure_libraries_download_from_cdn.png
    ライブラリがWebStormキャッシュにダウンロードされ(プロジェクトにはダウンロードされません)、情報メッセージを含むポップアップが表示されます。
    ws_js_configure_libraries_vue_added_popup.png
    JavaScript ライブラリページでは、ダウンロードしたライブラリがリストに追加され、現在のプロジェクトのスコープ内で有効になります。
    ws_js_configure_libraries_vue_added.png
    プロジェクトツールウィンドウでは、ライブラリが外部ライブラリノードに表示されます。
    ws_js_configure_libraries_download_from_cdn_show_in_project_view.png

ライブラリの可視性を変更するには

  • デフォルトでは、WebStormはダウンロードしたライブラリをグローバルとマークします。つまり、他のWebStormプロジェクトでも有効にして再利用できます。このデフォルト設定を変更するには、ダウンロードしたライブラリをリストから選択し、編集をクリックし、表示されるライブラリの編集ダイアログでプロジェクトを選択します。

    ws_js_configure_libraries_change_visibility.png

カスタムのサードパーティJavaScriptライブラリの構成

プロジェクトにJavaScriptフレームワークファイルがあるとします。WebStormは編集したプロジェクトコードだけでなく、ライブラリとして扱います。

カスタムライブラリを構成するには

  1. 必要なフレームワークファイルをダウンロードします。

  2. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワークJavaScriptをクリックしてから、ライブラリをクリックします。開いたJavaScript。ライブラリページで、追加をクリックします。新規ライブラリダイアログが開きます。

  3. 外部JavaScriptライブラリの名前を指定し、icons.general.add.pngをクリックして、リストからファイルの添付または添付ディレクトリを選択します。開いているダイアログで、ダウンロードしたフレームワークでファイルまたはフォルダーを選択します。

    ws_js_configure_libraries_add_custom.png

オプション

  • デフォルトでは、ライブラリはグローバルです。つまり、他のプロジェクトにアタッチすることができます。ライブラリの再利用を抑止するには、新規ライブラリダイアログでプロジェクトを選択します。

  • デフォルトでは、ライブラリは現在のプロジェクト全体の有効範囲で有効になっています。ライブラリのスコープの構成の説明に従って、このデフォルト設定を変更することができます。

  • ドキュメント URL領域で、ライブラリまたはフレームワークの公式ドキュメントへのパスを指定します。このライブラリのシンボル上で Shift+F1 を押すと、WebStormはこのURLを開きます。

ファイルに関連付けられたライブラリの表示

  • ファイルをエディターで開くか、プロジェクトビューで選択して状況バーの the Hector icon をクリックします。WebStormは現在のファイルに関連するライブラリをリストするポップアップを開きます。リストを変更するには、スコープ内のライブラリリンクをクリックして、表示されるスコープの管理ダイアログでスコープ設定を編集します。

  • または、エディターでファイルを開き、コンテキストメニューからJavaScript ライブラリの使用を選択します。WebStormは、使用可能な構成済みライブラリのリストを開きます。現在のファイルに関連付けられているライブラリには、チェックマークが付いています。

    • 現在のファイルをライブラリのスコープから削除するには、このライブラリの横にあるチェックボックスをオフにします。

    • ライブラリを現在のファイルに関連付けるには、このライブラリの横にあるチェックボックスをオンにします。

ライブラリを削除する

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワークJavaScriptをクリックしてから、ライブラリをクリックします。JavaScript。ライブラリページが開き、すでに利用可能なすべてのライブラリのリストが表示されます。

  2. 必要なライブラリを選択し、除去をクリックします。

最終更新日: 2020年2月17日