WebStorm 2020.3 ヘルプ

React

React は、カプセル化されたコンポーネントから複雑なインタラクティブユーザーインターフェースを構築するための JavaScript ライブラリです。React オフィシャル Web サイト(英語)からライブラリの詳細を参照してください。

WebStorm は、React と統合され、lint の設定、編集、実行、デバッグ、アプリケーションの保守を支援します。

新しい React アプリケーションの作成

新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、create-react-app(英語) パッケージです。これは、WebStorm が npx(英語) を使用してダウンロードして実行します。その結果、開発環境は webpack、Babel、ESLint、その他のツールを使用するように事前構成されています。

もちろん、Create React App を自分でダウンロードすることも、空の WebStorm プロジェクトを作成して React をインストールすることもできます。

create-react-app を使用した React アプリケーションの生成

  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、React を選択します。

  3. 右側のペインで:

    • プロジェクト関連ファイルが保存されるフォルダーへのパスを指定します。

    • Node インタープリターフィールドに、使用する Node.js インタープリターを指定します。リストから設定済みのインタープリターを選択するか、追加を選択して新しいインタープリターを設定します。

    • create-react-app リストから、npx create-react-app を選択します。

      または、npm バージョン 5.1 以前の場合、ターミナル Alt+F12npm install --g create-react-app を実行して、create-react-app パッケージを自分でインストールします。アプリケーションを作成するときに、create-react-app パッケージが保存されているフォルダーを選択します。

    • オプション :
      create-react-app フィールドに、プロジェクトの生成中に react-scripts(英語) の代わりに使用するカスタムパッケージを追加します。例:

      npx create-react-app react-awesome-scripts

      これは、-scripts に反応するからフォークされたパッケージの 1 つである可能性があります。たとえば、react-awesome-scripts(英語)custom-react-scripts(英語)react-scripts-ts(英語) などです。

    • オプション :
      JSX の代わりに TSX を使用するには、TypeScript プロジェクトを作成するチェックボックスを選択します。WebStorm は、アプリケーション用の .tsx ファイルと tsconfig.json 構成ファイルを生成します。

  4. 作成をクリックすると、WebStorm は、必要なすべての構成ファイルを含む React -specific プロジェクトを生成し、必要な依存関係をダウンロードします。WebStorm は、アプリケーションを実行またはデバッグするためのデフォルト設定で、npm スタートおよび JavaScript デバッグ構成も作成します。

プロジェクトの依存関係をダウンロードするには、次のいずれかの操作を行います。

  • 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install

  • プロジェクトルートの package.json ファイルのコンテキストメニューから実行 'npm install' を選択します。

空の WebStorm プロジェクトに React をインストールする

この場合、以下の React アプリケーションの構築の説明に従ってビルドパイプラインを自分で設定する必要があります。React オフィシャル Web サイト(英語)からプロジェクトに React を追加する方法の詳細を参照してください。

空の WebStorm プロジェクトを作成するには

  1. ウェルカム画面で新規プロジェクトの作成をクリックするか、メインメニューからファイル | 新規 | プロジェクトを選択します。新規プロジェクトの作成ダイアログが開きます。

  2. 左側のペインで、空のプロジェクトを選択します。右側のウィンドウで、アプリケーションフォルダーを指定し、作成をクリックします。

空のプロジェクトに React をインストールするには

  1. React を使用する空のプロジェクトを開きます。

  2. 埋め込みターミナルAlt+F12)に次のように入力します。

    npm install --save react react-dom

    npm、pnpm、Yarn の説明に従って、パッケージを Node.js と NPM ページにインストールすることもできます。

既存の React アプリケーションから開始する

既存の React アプリケーションの開発を継続するには、WebStorm で開き、必要な依存関係をダウンロードします。

すでにマシン上にあるアプリケーションソースを開く

  • ウェルカム画面で開くをクリックするか、メインメニューからファイル | 開くを選択します。開いたダイアログで、ソースが保存されているフォルダーを選択します。

バージョン管理からアプリケーションのソースを確認してください

  1. ウェルカム画面で VCS から取得をクリックするか、メインメニューから VCS | バージョン管理から取得を選択します。

  2. 呼び出されたダイアログで、リストからバージョン管理システムを選択し、アプリケーションソースをチェックアウトするリポジトリを指定します。

依存関係をダウンロードする

コードの補完

WebStorm は、React API および JSX(英語) 用のコード補完を JavaScript コードで提供します。コード補完は、React メソッド、React 固有属性、HTML タグとコンポーネント名、React イベント(英語)、コンポーネントプロパティなどで機能します。React オフィシャル Web サイト(英語)の詳細を参照してください。

React メソッドと React 固有属性に対してコード補完を取得するには、react.js ライブラリファイルをプロジェクトのどこかに配置する必要があります。通常、ライブラリはすでに node_modules フォルダーにあります。

React のメソッド、属性、イベントの補完

デフォルトでは、入力時にコード補完ポップアップが自動的に表示されます。例:

Completion popup

JSX タグでは、WebStorm は classNameclassID などの React 固有属性(英語)、および keyref などの非 DOM 属性(英語)のコーディング支援を提供します。さらに、自動補完は、プロジェクトの CSS ファイルで定義されているクラスの名前に対しても機能します。

Completion for class names

onClickonChange などのすべての React イベント(英語)は、波括弧 ={} と一緒に自動的に補完させることもできます。

Complete React events

また、波括弧内の JavaScript 式の補完も可能です。これは、定義したすべてのメソッドと関数に適用されます。

Complete JavaScript expressions inside curly braces

HTML タグとコンポーネント名の完成

WebStorm は、JavaScript や他のコンポーネントのメソッドの内部で定義した HTML タグとコンポーネント名に対してコード補完を提供します。

Completion for HTML tags and component names

補完は、ES6 形式の構文を持つインポートされたコンポーネントに対しても機能します。

Completion for imported components with ES6 syntax

コンポーネントプロパティの完成

WebStorm は、propTypes を使用して定義されたコンポーネントプロパティに対してコード補完を提供し、それらの定義を迅速にジャンプまたはプレビューできるように解決します。

Completion for component properties

コンポーネントの名前を自動補完すると、WebStorm は必要なすべてのプロパティを自動的に追加します。必要なプロパティの一部がコンポーネントの使用に欠落している場合、WebStorm はそのことについて警告します。

HTML 属性を JSX に転送する

クラス属性またはイベントハンドラーを使用して HTML コードをコピーして JSX に貼り付けると、WebStorm は自動的にこれらの属性を React 固有のものに置き換えます ( classNameonClickonChange など)

Transfer HTML to JSX

これは TSX でも機能します。

Transfer HTML to TSX

HTML コードを JSX または TSX に「そのまま」コピーするには、そのまま貼り付け Ctrl+Alt+Shift+V を使用するか、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディター | 一般 | スマートキー | JavaScript に移動して、HTML を JSX ファイルに貼り付けるときに属性を変換するチェックボックスをオフにします。

React コードスニペットの使用

WebStorm には、React アプリでよく使用されるさまざまなステートメントとコードのブロックに展開する 50 を超えるコードスニペットのコレクションが付属しています。以下の例は、rcjc 省略形を使用して、新しい React コンポーネントを定義するクラスを作成する方法を示しています。

Live template for a React component

スニペットから React コード構成を作成する

  • 必要な省略形をエディターに入力し、Tab を押します。

  • Ctrl+J を押して、関連するスニペットを選択します。検索を絞り込むには、略語の入力を開始し、補完リストから選択します。

詳細はライブテンプレートを参照してください。

使用可能なすべての React スニペットのリストを表示する

  • 設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディターライブテンプレートをクリックしてから、React ノードを展開します。

JSX で Emmet を使用する

WebStorm では、HTML だけでなく、特別な React twists を利用して JSX コードでも Emmet(英語) を使用できます。例: 略語 div.my-class は JSX では <div className= ” my-class"></div> に展開されますが、HTML のように <div class= ” my-class"></div> には展開されません。

Expand Emmet template in React

React アプリケーションをナビゲートする

基本的なナビゲーションの他に、WebStorm は React 固有コード要素間をジャンプできます。

  • 波括弧 {} 内のメソッドまたは JavaScript 式の宣言にジャンプするには、メソッドまたは式を選択して Ctrl+B を押します。

  • コンポーネントの宣言にジャンプするには、コンポーネント名を選択して Ctrl+B を押します。宣言とその型に移動する詳細を参照してください。

  • コンポーネント定義を表示するには、Ctrl+Shift+I を押します。表示定義の詳細を参照してください。

    View quick definition of a component in a popup
  • コンポーネントの簡単なドキュメントを表示するには、Ctrl+Q を押します。JavaScript ドキュメントの検索の詳細を参照してください。

    Quick documentation popup for React component
  • WebStorm を使用すると、パンくずリストを使用して JSX タグを簡単にナビゲートしたり、エディターのガターでタグツリーをカラフルにハイライトしたりできます。詳細については、パンくずリストでナビゲートするを参照してください。

    Highlighting and breadcrumbs for JSX tags in a React application

Lint React アプリケーション

JavaScript および HTML 用のすべての WebStorm 組み込みコードインスペクションも JSX コードで機能します。WebStorm は、未使用の変数と関数、閉じタグの欠落、ステートメントの欠落などの場合に警告を出します。

JavaSxript inspections in React application

いくつかのインスペクションのために WebStorm はクイックフィックスを提供します。たとえば、欠落しているメソッドを追加することを提案します。クイックフィックスポップアップを表示するには、Alt+Enter を押します。

インスペクションのリストをカスタマイズするには、設定 / 環境設定ダイアログ Ctrl+Alt+S を開き、エディターに移動します。インスペクション、および表示したくないインスペクションを無効にするか、重大度レベルを変更します。インスペクションの無効化と有効化およびインスペクションの重大度の構成から詳細を参照してください。

ESLint を使用する

組み込みコードインスペクションを提供することに加えて、WebStorm は、JSX コード用の ESLint(英語) などのリンターとも統合されます。ESLint は、プラグインで拡張できるさまざまな lint ルールを提供します。WebStorm は、入力時に ESLint によって報告された警告とエラーをエディターに表示します。ESLint では、JavaScript 標準スタイル(英語)も使用できます。

詳細は ESLint を参照してください。

ESLint に React JSX 構文を正しく理解させるには、eslint-plugin-react(英語) が必要です。このプラグインでは、表示名が React コンポーネントに設定されていない場合や、危険な JSX プロパティが使用されている場合など、警告が表示されます。

ESLint with React: errors and warnings are highlighted, the description of a problem is shown in a tooltip.

React プロジェクトに ESLint をインストールして構成する

  1. 組み込みターミナル表示 | ツールウィンドウ | ターミナル)で、次のように入力します。

    npm install --save-dev eslint
    npm install --save-dev eslint-plugin-react
  2. ESLint 構成ファイル .eslintrc.* をプロジェクトに追加します。これは、.eslintrc.eslintrc.json、または .eslintrc.yaml ファイル、またはサポートされている別の形式のファイルにすることができます。詳細については、ESLint 公式 Web サイト(英語)を参照してください。

  3. 設定 / 環境設定ダイアログ Ctrl+Alt+S で、言語およびフレームワーク | JavaScript | コード品質ツール | ESLint に移動し、自動 ESLint 構成を選択します。WebStorm は、プロジェクト node_modules フォルダー内の ESLint を自動的に検索し、.eslintrc.* ファイルまたは package.json 内の eslintConfig プロパティからデフォルト構成を使用します。

    または、手動 ESLint 構成を選択して、カスタム ESLint パッケージと構成を使用します。

    詳細は WebStorm での ESLint のアクティブ化と構成を参照してください。

.eslintrc 構造体の例 (react プラグイン付き ESLint 1.x)

  1. ecmaFeatures オブジェクトに "jsx" = true を追加します。ここでは、ES6 クラス、モジュールなど、使用したい追加の言語機能も指定できます。

  2. plugins オブジェクトに、react を追加します。

  3. rules オブジェクトでは、有効にしたい ESLint ビルトインルール(英語)と、react プラグインを介して利用可能なルール(英語)を一覧表示できます。

    { "parser" : "babel-eslint", "env" : { "browser" : true } , "ecmaFeatures" : { "jsx" : true } , "plugins" : [ "react" ], "rules" : { "semi" : 2 } }

ESLint 公式 Web サイト(英語)から ESLint および react プラグイン構成の詳細を学びましょう。

React アプリケーションのリファクタリング

一般的な WebStorm リファクタリングに加えて、React アプリケーションでは、React コンポーネントに対して名前の変更を実行し、コンポーネントの抽出を使用して新しいコンポーネントを作成することもできます。

コンポーネントの名前を変更する

以下は、1 つのファイルで定義されて使用されるコンポーネントの名前を変更する例です。

Rename component used in one file

同じ方法で、1 つのファイルで定義されたコンポーネントの名前を変更し、名前付きエクスポートを使用して別のファイルにインポートすることもできます。

Rename a component defined in another file and imported through a named import
  1. コンポーネント名の中にキャレットを置き、Shift+F6 を押すか、メインメニューから、またはコンテキストメニューからリファクタリング | 名前の変更を選択します。

  2. React の命名規則(英語)に準拠した新しいコンポーネント名を指定します。

コンポーネントを抽出する

既存のコンポーネントの render メソッドから JSX コードを抽出することにより、新しい React コンポーネントを作成できます。新しいコンポーネントは、関数またはクラスとして定義できます。React 公式 Web サイトの関数とクラスのコンポーネント(英語)を参照してください。

Extract a React component
  1. 抽出するコードを選択し、コンテキストメニューからリファクタリング | コンポーネントの抽出を選択します。

    または、メインメニューのリファクタリング | 抽出 / 導入 | コンポーネントの抽出に移動するか、Ctrl+Alt+Shift+T を押してポップアップからコンポーネントの抽出を選択します。

  2. 開いたダイアログで、新しいコンポーネントの名前とそのタイプを指定します。デフォルトでは、機能コンポーネントが作成されます。新しいコンポーネントをクラスとして定義する場合は、クラスを選択します。

  3. OK をクリックします。新しいコンポーネントは、既存のコンポーネントの隣に定義され、そこで使用されます。

  4. オプション : シンボルの移動リファクタリングを使用して、新しいコンポーネントと必要なすべてのインポートを別のファイルに移動します。

  5. オプション :WebStorm が新しいコンポーネントに使用するコードテンプレートを変更します。設定 / 環境設定ダイアログ Ctrl+Alt+S で、エディター | ファイルおよびコードテンプレートに移動し、コードタブを開き、必要に応じて Apache Velocity テンプレート言語(英語)を使用してテンプレートを更新します。

関数をクラスコンポーネントに変換する

クラスコンポーネントに変換リファクタリングを使用すると、WebStorm は変換する関数の名前を持つ ES6 クラスを生成します。このクラスは React .Component を拡張し、関数本体が移動される render() メソッドを含みます。React オフィシャル Web サイト(英語)の詳細を参照してください。

Convert a function to a class component
  • 変換するキャレットを関数内の任意の場所に置き、メインメニューまたはコンテキストメニューからリファクタリング | クラスコンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップからクラスコンポーネントに変換を選択します。

クラスを機能コンポーネントに変換する

関数コンポーネントに変換リファクタリングを使用すると、WebStorm は変換するクラスの名前で関数を生成し、render() メソッドの内容を関数本体に移動します。

Convert a class to a functional component
  • 変換するクラス内の任意の場所にキャレットを置き、メインメニューまたはコンテキストメニューからリファクタリング | 関数コンポーネントに変換を選択します。

  • または、Ctrl+Alt+Shift+T を押して、ポップアップから関数コンポーネントに変換を選択します。

React アプリケーションでの構造化

構造化を使用すると、配列やオブジェクトの値を変数に簡単に展開できます。この機能には非常に簡潔な構文があり、アプリケーションでデータを渡す必要があるときによく使用されます。

React クラスコンポーネントを使用する場合は、オブジェクト / 配列の破壊を導入するインテンションアクションの使用を検討してください。JavaScript での構造化の詳細を参照してください。

Destructuring with intention action: Introduce object destructuring in a React class

React アプリケーションの実行とデバッグ

新しい React シングルページアプリケーションの構築を開始するための推奨される方法は、React アプリケーションを作成(英語)します。この場合のみ、開発環境は webpack および Babel を使用するように事前構成されています。それ以外の場合は、最初にビルドパイプライン構成する必要があります。

上記のように Create React App で作成されたアプリケーションの場合、WebStorm はデフォルト設定で 2 つの実行 / デバッグ構成を生成します。

  • デフォルト名が npm startnpm 構成。この構成では、開発サーバーを起動してアプリケーションを開発モードで起動する npm start コマンドを実行します。

  • デフォルト名アプリケーションのデバッグJavaScript デバッグ構成。この設定はデバッグセッションを開始します。

React アプリケーションを実行する

  1. ツールバーのリストから npm start run 構成を選択し、リストの横にある Run をクリックします。

    または、ターミナル Alt+F12npm start を実行するか、npm ツールウィンドウ表示 | ツールウィンドウ | npm)で start タスクをダブルクリックします。

  2. アプリケーションがコンパイルされ、Webpack 開発サーバーの準備ができるまで待ちます。

    実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。このリンクをクリックして、アプリケーションを表示します。

    React app is running

React アプリケーションをデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて開発サーバーの準備ができるまで待ちます。

  3. リストから自動生成されたアプリケーションのデバッグ構成を選択し、リストの横にある the Debug button をクリックします。

    Start debugging an React app with Debug Application configuration

アプリケーションが実行されている場所に応じて、さまざまな方法でデバッグセッションを開始できます。

localhost で実行されているアプリケーションをデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。デフォルトでは http://localhost:3000/ です。 Ctrl+Shift を押したまま、この URL リンクをクリックします。WebStorm は、タイプ JavaScript デバッグの自動生成されたアプリケーションのデバッグ構成でデバッグセッションを開始します。

    React app is running

カスタム URL で実行されているアプリケーションをデバッグする

  1. コードにブレークポイントを設定します。

  2. 上記のように開発モードでアプリケーションを起動し、アプリケーションがコンパイルされて Webpack 開発サーバーの準備ができるまで待ちます。

  3. 実行ツールウィンドウまたはターミナルには、アプリケーションが実行されている URL が表示されます。この URL アドレスをコピーします。後でデバッグ構成で指定します。アプリケーションを表示するには、リンクをクリックしてください。

  4. JavaScript デバッグ構成を作成します。これを行うには、メインメニューの実行 | 実行構成の編集に移動し、the Add icon をクリックして、リストから JavaScript デバッグを選択します。実行 / デバッグ構成: JavaScript デバッグダイアログで、保存した URL を URL フィールドに貼り付け、構成を保存します。

  5. 新しく作成した構成を起動するには、構成のリストから構成を選択し、リストの横にある the Debug button をクリックします。

最初のブレークポイントに到達したら、デバッグツールウィンドウに切り替えて通常どおり続行します。プログラムをステップ実行し、プログラムの実行を停止して再開し、中断したときにそれを調べ、コールスタックと変数を調べ、ウォッチを設定し、変数を評価し、実際の HTML DOM を表示します。等々。

React アプリケーションの構築

既存の WebStorm プロジェクトに Reactインストールした場合は、ビルドプロセスを設定する必要があります。React オフィシャル Web サイト(英語)から React アプリケーションのビルドパイプラインを構成するさまざまな方法について説明します。

React アプリケーションのテスト

React アプリケーション create-react-app で作成Jest テスト(英語)を実行およびデバッグできます。始める前に、react-scripts パッケージが package.json依存関係オブジェクトに追加されていることを確認してください。

Jest テストは、実行 / デバッグ構成を使用して、またはエディターから、またはプロジェクトツールウィンドウから Jest テストを実行してデバッグすることができます。詳しくは、Jest を参照してください。

Jest 実行 / デバッグ構成を作成する

  1. 実行 / デバッグ構成ダイアログ(メインメニューの実行 | 実行構成の編集)を開き、左側のペインで the Add button をクリックして、リストから Jest を選択します。実行 / デバッグ構成: Jest ダイアログが開きます。

  2. 使用するノードインタープリターとアプリケーションの作業ディレクトリを指定します。デフォルトでは、作業ディレクトリフィールドにプロジェクトのルートフォルダーが表示されます。この定義済み設定を変更するには、目的のフォルダーへのパスを指定するか、リストから以前に使用したフォルダーを選択します。

  3. Jest パッケージフィールドに、react-scripts パッケージへのパスを指定します。

  4. Jest オプションフィールドに --env=jsdom と入力します。

    Testing React: Jest run configuration

テストの実行

  1. メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある the Run icon をクリックします。

    ws_select_run_configuration_jest.png

  2. テストサーバーは自動的に起動します。実行ツールウィンドウで、テストサーバーからのメッセージを表示および分析します。

  3. 実行ツールウィンドウのテストランナータブのテスト実行の監視

デバッグテスト

  1. メインツールバーのリストから Jest 実行 / デバッグ構成を選択し、リストの右側にある the Debug button をクリックします。

  2. 開いたデバッグツールウィンドウでは、通常どおり進む: テストをステップ実行停止し、再開し、テストの実行を中断したときにテストを検討するように、と。

既知の制限

デバッグセッション中に初めてアプリケーションを開くと、ページのロード時に実行されるコード内のブレークポイントの一部がヒットしないことがあります。その理由は、元のソースコードでブレークポイントを停止するには、WebStorm がブラウザーからソースマップを取得する必要があるからです。ただし、ブラウザーは、ページが少なくとも 1 回は完全に読み込まれた後にのみ、これらのソースマップを渡すことができます。この問題を回避するには、ブラウザーでページを再ロードしてください。

関連ページ:

新規プロジェクトの作成ダイアログ

このダイアログを使用して、空のプロジェクトを作成したり、アプリケーション開発用のフレームワーク固有のプロジェクトスタブを生成したりします。ダイアログの左側のペインには、スタブを生成できるプロジェクトタイプのリストが表示されます。利用可能なプロジェクトタイプのセットは、インストールされてアクティブ化されているプラグインによって異なります。右側のペインの内容は、選択したプロジェクトの種類によって異なります。場所フィールドはすべてのプロジェクトタイプに共通です。空のプロジェクト内容のないプロジェクトフ...

npm、pnpm、Yarn

WebStorm は npm、Yarn、Yarn 2、pnpm と統合されているため、IDE 内から再利用可能なコードのパッケージをインストール、検索、更新、削除できます。Node.js と NPM ページは、パッケージを管理するための専用 UI を提供します。もちろん、組み込みのターミナルのコマンドラインからも実行できます。WebStorm では、npm、Yarn、pnpm スクリプトを実行およびデバッグすることもできます。WebStorm は、package.json ファイルを解析し、スクリプト...

コード補完

コード補完は WebStorm エディターの重要な機能の 1 つです。補完候補を表示するために、WebStorm はプロジェクトファイルをソースコードで調べ、それらに定義されているクラス、メソッド、関数、変数を特別な内部インデックスに追加します。JSDoc のコメント、TypeScript 型定義などからの追加情報も、完成度を大幅に向上させることができます。補完はサードパーティのコードからのシンボルに対しても機能します。ほとんどの場合、プロジェクトに必要なファイルを追加するだけです。詳しくは Jav...

ソースコードナビゲーション

さまざまなアクションやポップアップを使用して、エディター内のコードを素早くナビゲートすることができます。エディターウィンドウとツールウィンドウ間の移動に関する詳細情報については、エディターの基本を確認してください。キャレットでナビゲートする前のキャレット位置を見るには、メインメニューからを選択するか、またはを押します。前に進むには、を選択するかを押します。Windows でこれらのショートカットを使用するには、ホットキーを無効にしていることを確認してください。最後に編集した場所に移動するには

表示定義

クイック定義ルックアップは、プロジェクトシンボル(クラス、メソッド / 関数、フィールド、タグなど)がどこでどのように定義されているかを示します。TypeScript オブジェクトの場合、WebStorm はそれらの推定タイプも表示します。マークアップ言語の場合、WebStorm は指定された DTD またはスキーマからシンボルの定義を取得します。詳細については、HTML および XML を参照してください。WebStorm はポップアップまたはツールチップにシンボル定義を表示できます。ポップアップは...

JavaScript ドキュメントの検索

WebStorm は、標準の JavaScript API、プロジェクトからのシンボルおよびその依存関係からの参照、および外部ライブラリで定義されているシンボルへの参照を示します。ドキュメントポップアップでシンボルのドキュメントを表示したり、メソッドパラメーターに関する情報を入手したり、それらへのリンクがある場合は外部サイトでドキュメントを開くことができます。プロジェクトシンボルまたはプロジェクト依存のシンボルの場合、WebStorm は対応する JSDoc コメントからドキュメントを生成します。...