Flow
Flow(英語) は、JavaScript に型アノテーションをもたらす静的型チェッカーです。WebStorm は Flow 構造を認識し、すべてのオペレーティングシステムでそれらの構文をハイライトします。
始める前に
お使いのコンピューターに Node.js(英語) がインストールされていることを確認してください。
Flow のインストールと構成
埋め込まれたターミナル（Alt+F12）で、次のいずれかのコマンドを入力します。
npm install --global flow-binを使用して Flow をグローバルにインストールします。開発依存として Flow をインストールするための
npm install --save-dev flow-bin
Flow オフィシャル Web サイト(英語)の詳細を参照してください。
WebStorm に Flow 構造を認識させ、正しい構文ハイライトを提供し、エラーを適切に報告し、誤検出エラーハイライトを回避し、プロジェクトの JavaScript 言語レベルを Flow に変更し、.flowconfig 構成ファイルをプロジェクトに追加し、上部に // @flow コメントでチェックされています。
プロジェクトの言語レベルを Flow に変更する
設定ダイアログ（Ctrl+Alt+S）で、 に移動します。JavaScript ページが開きます。
JavaScript 言語バージョンリストから Flow を選択します。
Flow パッケージまたは実行可能ファイルフィールドで、node_modules\flow-bin パッケージまたは Flow バイナリ実行可能ファイルへのパスを指定します。node_modules\.bin\flow を使用するには、Node.js へのパスが
PATH環境変数に追加されていることを確認してください。Flow サーバーを使用する : エリアで、次のチェックボックスをオンまたはオフにして、コーディング支援の基礎を指定します。
型チェック : このチェックボックスを選択すると、Flow サーバーから受信したデータに基づいて構文とエラーのハイライトが行われます。このチェックボックスをオフにすると、基本的な内部 WebStorm ハイライトのみが使用可能になります。
ナビゲーション、コード補完、および型のヒント : このチェックボックスを選択すると、参照解決とコード補完の候補リストには、Flow との統合から取得された候補と WebStorm によって計算された候補の両方が含まれます。このチェックボックスをオフにすると、参照は WebStorm 計算によってのみ解決されます。
チェックボックスは、Flow 実行ファイルへのパスが指定されている場合にのみ使用できます。
Flow は他の変更されたファイルがすべて保存された後にのみ現在のファイルをチェックするため、Flow が継続的に適用されるようにするには、すべての変更されたファイルを自動的に保存するチェックボックスを選択したままにしておきます。
Flow を有効にする
.flowconfig を追加するには、埋め込みターミナル（Alt+F12）を開いて次を入力します。
flow init.flowconfig を特定のフォルダーに追加するには、次を入力します。
cd <path to the folder to check>flow initファイルで Flow を有効にするには、ファイルの上部に
// @flowコメントを追加します。単にflowと入力して Tab を押すと、WebStorm が// @flowに展開します。まだ .flowconfig を持っていない場合、WebStorm は、現在のフォルダーに構成ファイルを追加するように促すツールチップを表示します。
現在のフォルダーとプロジェクトルートを選択するには、その他のアクションをクリックするか、Alt+Enter を押します。
監視エラー
WebStorm を使用すると、Flow によって検出されたエラーを問題ツールウィンドウに表示できます。ツールウィンドウを開くには、メインメニューからを選択するか、エディターの右隅にあるウィジェットをクリックします。
ツールウィンドウは 2 つのペインで構成されています。
エラーペインには、アクティブなエディタータブで開かれているファイルで検出されたすべての不一致のリストが表示されます。上部にファイルへのフルパスが表示されます。
エラーに関する詳細情報を入手するには、その説明のコンテキストメニューからエラーの詳細を表示を選択します。
プロジェクトエラーペインには、現在のプロジェクトのすべてのファイルで検出されたすべての不一致のリストが表示されます。エラーメッセージは、それらが検出されたファイルごとにグループ化されています。
インスペクションの実行と結果の取得と問題の解決の詳細を参照してください。
関連ページ：
JavaScript
JavaScript 言語バージョンこのリストから、プロジェクトで使用する言語機能のセットを表す JavaScript 言語バージョンを選択します。利用可能なオプションは次のとおりです。ECMAScript 5.1、ECMAScript 6 以降: このバージョンでは、ECMAScript 2015-2020 で導入された機能と JSX 構文のサポート、および標準に対するいくつかの現在の提案が追加されています。Flow: このバージョンでは、Flow 構文がサポートされています。コード補完設定の...
問題ツールウィンドウ
問題ツールウィンドウには、WebStorm がプロジェクト内で検出した問題がいくつかのタブを使用して表示されます。ウィンドウ内で問題を選択してを押すか、問題をダブルクリックしてエディター内の対応する行に移動します。ツールウィンドウのタブを切り替えるには、とを押します。設計時コードインスペクションが有効になっている場合、この IDE は継続的にコードをチェックし、問題を検索します。このタブには、現在のファイルで見つかったすべてのコードの問題がリストされます。エディターでファイルを切り替えると...
インスペクションを実行する
WebStorm は、エディターで開かれたファイル内のコードを分析し、入力時に問題のあるコードをハイライトします。さらに、選択したファイル範囲に対して必要なインスペクションまたは一連のインスペクションを手動で実行できます。この場合、ファイル内で検出されたすべての問題に関する包括的なレポートが得られます。現在のファイルの即時分析：IDE は継続的にコードをチェックし、問題を検索します。エディターの右上隅にあるウィジェットには、現在のファイルで検出された各重大度の問題の数が表示されます。ウィジェッ...
結果の取得と問題の解決
インスペクションがあなたのコードに問題を検出した場合、すぐにエディターで修正を適用することができます。ハイライトされたコード部分にキャレットを置き、を押します。WebStorm では、一部のインスペクション (条件として使用されている代入、'switch' ステートメントの到達不能な 'case' 分岐、条件として使用されている代入など) のクイックフィックスの横に対話型プレビューが表示されます。を押すと、このプレビューを非表示にしたり表示したりできます。現在のファイルで発生するすべての問題...
デノ
WebStorm は、JavaScript および TypeScript のランタイムであるデノと統合され、コード補完、コードベース全体のナビゲーション、リファクタリング、クイックドキュメント検索、実行、デバッグ、テストなどのすべてのコーディング支援機能を提供します。始める前に：JetBrains マーケットプレイスからプラグインをインストールする説明に従って、設定 | プラグインページのマーケットプレースタブにデノプラグインをインストールして有効にします。Deno をインストールする：コマ...
GraphQL
WebStorm では、GraphQL 言語をサポートする GraphQL プラグインを使用できます。次の機能が利用可能です。スキーマ定義言語 (SDL) を含む GraphQL 仕様の完全な言語サポート。スキーマ対応の補完、エラーのハイライト、ドキュメント化。構文のハイライト、コードのフォーマット、折りたたみ、コメント、中括弧の一致。その場でローカルスキーマの検出。リモートスキーマは、イントロスペクションを使用して簡単に取得できます。GraphQL エンドポイントをイントロスペクトし、GraphQL...