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

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

Flowのインストールと構成

埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。
- npm install --global flow-bin を使用してFlowをグローバルにインストールします。
- 開発依存としてFlowをインストールするためのnpm install --save-dev flow-bin。

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に変更する

設定/環境設定ダイアログ Ctrl+Alt+Sで、言語とフレームワーク | JavaScriptに移動します。JavaScriptページが開きます。
JavaScript 言語バージョンリストからFlowを選択します。
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.
Flowサーバーを使用する: エリアで、次のチェックボックスをオンまたはオフにして、コーディング支援の基礎を指定します。
- 型チェック : このチェックボックスを選択すると、Flowサーバーから受信したデータに基づいて構文とエラーの強調表示が行われます。このチェックボックスをオフにすると、基本的な内部WebStorm強調表示のみが使用可能になります。
- ナビゲーション、コード補完、および型ヒント : このチェックボックスを選択すると、参照解決とコード補完の候補リストには、Flowとの統合から取得された候補とWebStormによって計算された候補の両方が含まれます。このチェックボックスをオフにすると、参照はWebStorm計算によってのみ解決されます。
チェックボックスは、Flow実行ファイルへのパスが指定されている場合にのみ使用できます。
Flowは他のすべての変更されたファイルが保存された後でのみFlowが現在のファイルをチェックするため、Flowが継続的に適用されるように、変更したファイルをすべて自動的に保存するチェックボックスを選択したままにしておきます。

Flowを有効にする

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
ファイルで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.
現在のフォルダーとプロジェクトルートを選択するには、その他のアクションをクリックするか、Alt+Enterを押します。

監視エラー

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 on the toolbar. The error messages are grouped by files in which they were detected.

ツールバー

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

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

コンテキスト・メニュー

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

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

最終更新日: 2020年6月23日

WebStorm 2020.1ヘルプ