WebStorm 2020.1ヘルプ

Flowタイプチェッカーの使用

Flow(英語)は、タイプ注釈をJavaScriptにもたらす静的型チェッカーです。WebStormはFlow構造体を認識し、すべてのオペレーティングシステムで構文の強調表示を行います。

Flowのインストールと構成

  • 埋め込まれたターミナルAlt+F12)で、次のいずれかのコマンドを入力します。

    • npm install --global flow-bin を使用してFlowをグローバルにインストールします。

    • 開発依存としてFlowをインストールするためのnpm install --save-dev flow-bin

FlowオフィシャルWebサイト(英語)の詳細を参照してください。

To have WebStorm recognize Flow structures, provide correct syntax highlighting, report errors properly, and avoid false-positive error highlighting, change the JavaScript language level in your project to Flow , add a .flowconfig configuration file to your project, and supply every file to be checked with a // @flow comment on top.

プロジェクトの言語レベルをFlowに変更する

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

  2. JavaScript 言語バージョンリストからFlowを選択します。

  3. In the Flowパッケージまたは実行可能ファイル field, specify the path to the node_modules\flow-bin package or the Flow binary executable file. To use node_modules\.bin\flow , make sure the path to Node.js is added to the PATH environment variable.

  4. Flowサーバーを使用する: エリアで、次のチェックボックスをオンまたはオフにして、コーディング支援の基礎を指定します。

    • 型チェック : このチェックボックスを選択すると、Flowサーバーから受信したデータに基づいて構文とエラーの強調表示が行われます。このチェックボックスをオフにすると、基本的な内部WebStorm強調表示のみが使用可能になります。

    • ナビゲーション、コード補完、および型ヒント : このチェックボックスを選択すると、参照解決とコード補完の候補リストには、Flowとの統合から取得された候補とWebStormによって計算された候補の両方が含まれます。このチェックボックスをオフにすると、参照はWebStorm計算によってのみ解決されます。

    チェックボックスは、Flow実行ファイルへのパスが指定されている場合にのみ使用できます。
  5. Flowは他のすべての変更されたファイルが保存された後でのみFlowが現在のファイルをチェックするため、Flowが継続的に適用されるように、変更したファイルをすべて自動的に保存するチェックボックスを選択したままにしておきます。

Flowを有効にする

  1. To add a .flowconfig , open the embedded ターミナル ( Alt+F12 ) and type:

    flow init

    To add .flowconfig to a specific folder, type:

    cd <path to the folder to check>
    flow init

  2. ファイルでFlowを有効にするには、ファイルの上部に // @flow コメントを追加します。単に flowと入力して Tabを押すと、WebStormが // @flowに展開します。

    If you still don't have a .flowconfig yet, WebStorm shows a tooltip prompting you to add a configuration file to the current folder.

    Tooltip: Add .flowconfig to the current folder

    現在のフォルダーとプロジェクトルートを選択するには、その他のアクションをクリックするか、Alt+Enterを押します。

    Tooltip: More actions

監視エラー

WebStorm lets you view errors detected by Flow in the dedicated Flow tool window, which becomes available after you add at least one .flowconfig file to your project. To open the tool window, select 表示 | ツール・ウィンドウ | Flow from the main menu.

Flowツールウィンドウは2つのペインで構成されています。

  • エラーペインには、アクティブなエディタータブで開かれているファイルで検出されたすべての不一致のリストが表示されます。上部にファイルへのフルパスが表示されます。

    Flow ツールウィンドウを開くと、エラーペインのみが表示されます。

  • The プロジェクトエラーペイン shows a list of all the discrepancies detected in all the files in the current project after you run Flow against the entire project by clicking icon_flow_tool_window_show_all_errors.png on the toolbar. The error messages are grouped by files in which they were detected.

ツールバー

ツールバーは、現在のエラーおよびプロジェクトエラーペインに共通です。

項目Tooltip
and Shortcut
説明
icon_flow_tool_window_show_all_errors.pngすべてのエラーを表示するこのボタンをクリックすると、プロジェクトエラーペインに切り替わり、現在のプロジェクトで検出されたすべての不一致が表示されます。
helpヘルプこのボタンを使用して、ツールウィンドウのヘルプトピックに移動します。
the Close button閉じる Ctrl+Shift+F4このボタンをクリックすると、Flowタイプチェッカーが終了し、ツールウィンドウが閉じます。
Expand all
Collapse all
Expand all
Ctrl+NumPad +
Collapse all
Ctrl+NumPad -
これらのボタンを使用して、すべてのノードを展開または折りたたんでください。
Clear Allすべてクリアこのボタンをクリックすると、現在アクティブなペインからすべてのエラーメッセージが削除されます。

コンテキスト・メニュー

コンテキストメニューは、エラーペインとプロジェクトエラーペインに共通です。

項目説明
ソースに移動選択した問題が検出されたファイルを開き、エラーの原因となったコードの断片に移動するには、このオプションを選択します。
コピー選択したエラーメッセージを、エラーが発生したファイル、行、および列の情報とともにコピーするには、このオプションを選択します。
最終更新日: 2020年6月23日