RubyMine 2020.1ヘルプ

TypeScript

RubyMineは、TypeScript(英語)ソースコードの開発、実行、デバッグをサポートしています。RubyMineは .ts および .tsx ファイルを認識し、追加の手順なしで編集するための幅広いコーディング支援を提供します。TypeScriptファイルは TypeScript file アイコンでマークされています。

TypeScript対応のコーディング支援には、キーワード、ラベル、変数、パラメーター、関数の補完エラーと構文の強調表示、フォーマット、多数のコードインスペクションクイックフィックス、および一般的なTypeScript固有のリファクタリングが含まれます。RubyMine は、TypeScriptコードをオンザフライで検証し、専用のTypeScriptツールウィンドウに構文と潜在的なコンパイルエラーを表示します。

始める前に

TypeScriptの検証

RubyMineは、主にTypeScriptをJavaScriptにコンパイルするTypeScript 言語サービス(英語)のデータに基づいてTypeScriptコードを検証します。

検出されたすべての構文およびコンパイルエラーは、TypeScriptツールウィンドウエラーおよびコンパイル・エラータブにレポートされます。エラーごとに、RubyMineは、発生した行の番号に関する簡単な説明と情報を提供します。

コンソールタブには、ツールウィンドウが開いた後のTypeScript言語サービスのログが表示されます。

ほとんどの場合、すべてがそのまま機能します。ただし、カスタム typescript パッケージを使用する場合、または一部のコマンドライン・オプション(英語)をTypeScript言語サービスに渡す場合は、以下のTypeScript 言語サービスとの統合を構成するで説明するようにデフォルト設定をカスタマイズできます。

構文エラーを監視する

  • TypeScriptツールウィンドウ(表示 | ツール・ウィンドウ | TypeScript)を開き、エラータブに切り替えます。

    タブには、TypeScript言語サービスで検出されたコードの不一致が一覧表示されます。コードを変更すると、リストが動的に更新されます。

    デフォルトでは、リストにはアクティブなエディタータブのファイルからのエラーのみが含まれ、このファイルへのフルパスが上部に表示されます。プロジェクト全体のエラーを表示するには、ツールバーのプロジェクトエラーを表示するトグルボタン Show project errors toggle button を押します。

    エラーメッセージは、それらが検出されたファイルごとにグループ化されています。

    ws_ts_toolwindow_syntax_errors.png

    問題のコードに移動するには、対応するエラーメッセージをダブルクリックするか、それを選択してコンテキストメニューからソースに移動を選択します。

コンパイルエラーを監視する

  • TypeScriptツールウィンドウ(表示 | ツール・ウィンドウ | TypeScript)を開き、コンパイル・エラータブに切り替えます。

    Compile all button をクリックし、リストからコンパイルスコープを選択すると、タブが開きます。

    TypeScript: monitor compilation errors

    タブには、選択したスコープで検出されたすべてのコンパイルエラーが一覧表示されます。このリストは、コードに対する変更の影響を受けず、手動でコンパイルを再度呼び出すときにのみ更新されます。

    エラーメッセージは、それらが検出されたファイルごとにグループ化されています。問題のコードに移動するには、対応するエラーメッセージをダブルクリックするか、それを選択してコンテキストメニューからソースに移動を選択します。

TypeScript 言語サービスとの統合を構成する

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

  2. 使用するNode.jsインタープリターを指定してください。これはローカルNode.jsインタープリターまたはWindows Subsystem for LinuxのNode.jsです。

  3. TypeScriptフィールドで、使用するTypeScriptのバージョンを指定します(RubyMineは現在選択されているバージョンを表示します)。

    • デフォルトでは、プロジェクトの node_modules フォルダーにある typescript パッケージが使用されます。

    • バンドル:このオプションを選択すると、RubyMineに同梱されている typescript パッケージを使用して、別のパッケージを見つけようとしません。

    • 選択 : RubyMineにバンドルされているパッケージではなく、カスタム typescript パッケージを使用するには、このオプションを選択します。開いたダイアログで、関連するパッケージへのパスを選択します。

    • プロジェクトパッケージマネージャーがYarn 2(英語)の場合、Yarn 2を介してインストールされた typescript パッケージを使用する必要があります。この場合、デフォルトで yarn:package.json:typescript が選択されています。

      npmおよびYarnのパッケージマネージャーの詳細を参照してください。

  4. TypeScript 言語サービスチェックボックスが選択されていることを確認します。

  5. TypeScript言語サービスの動作を設定するには、以下のコントロールを使用してください。

  6. オプションフィールドで、tsconfig.json ファイルが見つからない場合にTypeScript言語サービスに渡されるコマンドラインオプションを指定します。TSC引数(英語)で受け入れ可能なオプションのリストを参照してください。 -w または --watch入力ファイルを見る)オプションは無関係であることに注意してください。

TypeScriptコードの編集

RubyMineは、コンテキスト認識コード補完シンボルの自動インポート文書検索パラメータヒントナビゲーションTypeScript対応の構文強調表示およびlintリファクタリングなどを含むTypeScriptのスマートコーディング支援を提供します。

自動インポート

RubyMineは、モジュール、クラス、コンポーネント、およびエクスポートされたその他のTypeScriptシンボルのインポート文を生成できます。既定では、TypeScriptシンボルを入力すると、RubyMineによってインポートステートメントが追加されます。

コードを入力するか、まだインポートされていないシンボルを含むフラグメントを貼り付けると、RubyMineはこのシンボルのインポートステートメントも生成できます。シンボルのインポート元が1つしかない場合、RubyMineはインポートステートメントを確認なしで挿入します。それ以外の場合は、インポートポップアップまたは専用インポートのクイックフィックスを使用してください。

コード補完にインポートステートメントを追加する

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | 一般 | 自動インポートに移動します。自動インポートページが開きます。

  2. TypeScript / JavaScript領域で、TypeScript のインポートを自動的に追加するコード補完時チェックボックスを選択します。

コードの入力または貼り付け時にインポート文を追加する

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | 一般 | 自動インポートに移動します。自動インポートページが開きます。

  2. TypeScript / JavaScript領域で、TypeScript のインポートを自動的に追加するオンザフライで曖昧でないインポートチェックボックスを選択します。

インポートポップアップを使用する

何らかの理由でTypeScriptシンボルのインポートステートメントが補完時または編集時に追加されなかった場合、RubyMineはシンボルのインポートを提案するポップアップを表示します。

  • 提案を受け入れるには、Alt+Enterを押します。

    ws_import_pop_up.png
  • インポート可能なソースが複数ある場合、RubyMineはそのことを通知します。

    ws_import_pop_up_multiple_choices.png

    この場合、Alt+Enter を押すと、提案のリストが開きます:

    ws_import_multiple_choices_suggestion_list.png
  • インポートポップアップを非表示にするには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | 自動インポートに移動して、インポート・ポップアップチェックボックスをオフにします。

クイックフィックスのインポートを使用する

インポートポップアップが表示されない場合は、専用のクイックフィックスを使用してインポートステートメントをいつでも追加できます。

  • インポートを生成するには、インポート・ステートメントを追加するを選択します。

    Auto import with quick-fix: no choices

    シンボルのインポート元が1つだけの場合、RubyMineはインポートステートメントを生成します。

    Auto import with quick-fix: import statement added
  • シンボルのインポート元が複数ある場合は、候補リストから関連するものを選択します。

    Auto import with quick-fix, multiple choices: suggestion list
  • プロジェクトでTypeScript言語サービスが有効になっている場合は、その提案を使用することもできます。

    Auto import with suggestion from the TypeScript Language Service: no choices

    シンボルのインポート元が複数ある場合は、TypeScript言語サービスが表示するリストから関連するものを選択します。

    Auto import with suggestion from the TypeScript Language Service: multiple choices

インポートステートメントの外観を構成する

  • 設定/環境設定ダイアログ Ctrl+Alt+Sエディター | コード・スタイル | TypeScriptに移動し、インポートタブのコントロールを使用します。

ドキュメントの検索

RubyMineは、プロジェクトやその依存関係、外部ライブラリで定義されたシンボル、および標準のJavaScript APIのシンボルの参照をTypeScriptがすべて実装しているため、参照を取得できます。

ドキュメントはドキュメントポップアップで表示され、ハイパーリンクを介して関連するシンボルにナビゲートしたり、すでにナビゲートされているページを前後に移動するためのツールバーを提供します。

シンボルのドキュメントを見る

  • 記号にキャレットを置き、Ctrl+Q を押すか、メインメニューから表示 | クイック・ドキュメント・ルックアップを選択します。

  • シンボルの上にマウスポインタを置くと、RubyMineはすぐにその参照を ドキュメントポップアップに表示します。

    この動作をオフにするか、ポップアップを速くまたは遅く表示するように構成できます。以下のドキュメントポップアップの動作の構成を参照してください。

TypeScriptで利用可能な標準のJavaScriptメソッドの場合、RubyMineは対応するMDN記事(英語)へのリンクも表示します。

ws_ts_doc_from_mdn.png

ドキュメントポップアップの動作を構成する

  • ドキュメントの表示を自動的にオフにするには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | コード編集に移動して、マウス移動でクイック・ドキュメントを表示するチェックボックスをオフにします。

  • ドキュメントポップアップを速くまたは遅く表示するには、設定/環境設定ダイアログ Ctrl+Alt+Sを開き、エディター | 一般 | コード補完に移動してから、ドキュメントのポップアップを表示するチェックボックスを選択して遅延時間を指定します。

キャレットのシンボルのMDNドキュメントを表示する

  • ドキュメントウィンドウ Ctrl+Qで、MDNリンクをクリックします。

  • または、Shift+F1 を押すか、メインメニューから表示 | 外部ドキュメントを選択します。

RubyMineは、デフォルトのRubyMineブラウザでMDN記事を開きます。

パラメーターのヒント

パラメーターのヒントは、コードを読みやすくするためのメソッドや関数のパラメータ名を示します。デフォルトでは、リテラルまたは関数式であるが名前付きオブジェクトではない値に対してのみ、パラメーターヒントが表示されます。

ws_typescript_parameter_hints.png

パラメータのヒントを設定する

  1. 設定/環境設定ダイアログ Ctrl+Alt+S を開き、エディター | インレイ・ヒント | TypeScriptに進みます。

  2. リストからパラメーターのヒントを選択し、パラメーターのヒントの表示チェックボックスが選択されていることを確認してから、パラメーターヒントを表示するコンテキストを指定します。

  3. 一部のメソッドおよび関数では、RubyMineはどのコンテキストでもパラメーターヒントを表示しません。ブラックリスト...をクリックして、これらのメソッドと機能を表示したり、それらのパラメーターヒントを有効にしたり、リストに新しいアイテムを追加したりします。

TypeScriptのJavaScriptライブラリ

TypeScriptでJavaScriptライブラリを使用する場合は、それらのタイプ宣言(英語)インストールする(英語)必要があります。RubyMineは、npmまたはyarnを介してインストールするように通知し、それに応じて package .json ファイルを更新します。

型宣言をインストールする

  1. キャレットを警告に合わせて Alt+Enterを押します。

  2. 提案を選択し、Enterを押します。

    ws_ts_add_types.png

構文の強調表示

好みや習慣に応じて、TypeScript対応の構文強調表示を設定できます。

  1. 設定/環境設定ダイアログ Ctrl+Alt+Sで、エディター | カラー・スキームの切り替え | TypeScriptに移動します。

  2. 配色を選択するか、デフォルトから継承された強調表示設定を受け入れるか、または色とフォントの設定の説明に従ってカスタマイズします。

コードナビゲーション

さまざまなアクションとポップアップを使用して、RubyMineエディターでTypeScriptプロジェクトをすばやくナビゲートできます。

シンボルの宣言にジャンプ

変数、フィールド、メソッド、またはその他のシンボルからその宣言に移動したり、編集中のコードからジャンプしたりせずに、ポップアップでシンボル定義を表示できます。

  • 記号の宣言にジャンプするには、シンボルの使用箇所にキャレットを置き、Ctrl+B を押すか、メインメニューからナビゲート | 宣言または使用箇所を選択します。

    または、Ctrl+Clickを使用します。

  • シンボルの定義をポップアップで表示するには、キャレットを使用位置に置き、Ctrl+Shift+I を押すか、メインメニューから表示 | クイック定義を選択します。

    View the definition of a symbol on a popup

シンボルの使用箇所に移動

シンボルの使用箇所のリストを表示して、ジャンプ先を選択できます。

  1. シンボルの使用箇所のリストを取得するには、シンボルの宣言にキャレットを置き、次のいずれかを実行します。

    • Ctrl+B を押すか、メインメニューからナビゲート | 宣言または使用箇所を選択します。

    • Ctrl+Alt+F7 を押すか、メインメニューから編集 | 使用箇所の検索 | 使用箇所を表示を選択します。

  2. リストから、ジャンプするシンボルの使用箇所を選択します。

シンボルの型宣言に移動

変数、フィールド、メソッド、またはその他のシンボルからその型宣言に移動できます。または、型宣言にジャンプせずに、ポップアップで型定義を開きます。

RubyMineは、オブジェクトの推測されたタイプ(英語)も示します。推論された型情報は、ツールチップまたはドキュメントポップアップで表示できます。

型宣言にジャンプ

  • シンボルからその型の宣言にジャンプするには、シンボルの使用箇所にキャレットを置き、Ctrl+Shift+B を押すか、メインメニューからナビゲート | 型宣言を選択します。

  • シンボルのタイプ定義をポップアップで表示するには、タイプ定義を表示するシンボルにキャレットを置き、表示 | クイック型定義を選択します。

    クラスのインスタンスの場合、これにより、このインスタンスが定義されている場所ではなく、クラス自体が明らかになります。

シンボルの推定型情報を表示する

  • Ctrl を押したまま、シンボルの上にマウスポインターを置きます。

  • または、マウスポインターを記号の上に移動します。RubyMineは、その参照を ドキュメントポップアップにすぐに表示します。

    上記のドキュメントの検索から詳細を参照してください。

サブクラス、スーパークラス、オーバーライド、実装の間を移動する

エディターのガターアイコンを使用するか、適切なショートカットを押すことで、クラスの実装とオーバーライドメソッドを追跡できます。

サブクラスにジャンプ

  • Ctrl+Alt+B を押すか、ガターで the Overridden method icon をクリックし、リストから関連するクラスを選択します。

  • または、メインメニューからナビゲート | 実装またはコンテキストメニューからジャンプ | 実装を選択し、リストから関連するクラスを選択します。

スーパークラスまたはオーバーライドされたメソッドに移動する

  • キャレットをサブクラスに配置し、Ctrl+Uを押します。RubyMineは、スーパークラスの宣言に移動し、その名前にカーソルを置きます。

  • オーバーライドするメソッドの横のガターで the Overriding method icon をクリックします。RubyMineは、オーバーライドされたメソッドにカーソルを置いて、スーパークラスに移動します。

    または、オーバーライドメソッドにキャレットを置き、Ctrl+U を押すか、メインメニューからナビゲート | スーパー・メソッドを選択するか、コンテキストメニューからジャンプ | スーパー・メソッドを選択します。

インターフェースまたは実装されたメソッドに移動する

  • キャレットをインターフェースの実装に配置し、Ctrl+Uを押して、移動するインターフェースを選択します。

    Go to interface from class

    RubyMineを使用すると、インターフェースの宣言に移動し、カーソルをその名前に置きます。

  • 実装方法の横のガターで the Implementing method icon をクリックします。RubyMineは、実装されたメソッドにカーソルがある対応するインターフェースに移動します。

    または、実装メソッドにキャレットを置き、Ctrl+U を押すか、メインメニューからナビゲート | スーパー・メソッドまたはコンテキストメニューからジャンプ | スーパー・メソッドを選択します。

コードのリファクタリング

RubyMineは、名前の変更/移動などの一般的なリファクタリングプロシージャと、シグネチャーの変更パラメータ導入、変数導入などのTypeScript固有のリファクタリングプロシージャの両方を提供します。詳細については、名前の変更リファクタリングおよび移動およびコピー・リファクタリングを参照してください。

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

RubyMineを使用すると、Node.jsで実行されているクライアント側のTypeScriptコードとTypeScriptコードを実行およびデバッグできます。TypeScriptの実行とデバッグの詳細を参照してください。

最終更新日: 2020年5月29日

関連ページ:

コード補完

このセクションでは、コーディングプロセスのスピードアップを可能にするコンテキスト対応コード補完のさまざまなテクニックについて説明します。基本補完:基本コード補完は、可視性スコープ内のクラス、メソッド、およびキーワードの名前を完成させるのに役立ちます。コード補完を呼び出すと、RubyMineはコンテキ...

コード・インスペクション

RubyMineには、プロジェクト内の異常コードを検出して修正する一連のコードインスペクションがあります。IDEはさまざまな問題を見つけて強調表示し、デッドコードを見つけ、可能性のあるバグを見つけ、スペルの問題、コード構造全体を改善することができます。インスペクションは、すべてのプロジェクトファイル...

インテンション・アクション

エディターで作業するときに、RubyMineはコードを分析し、コードを最適化する方法を検索し、潜在的な問題と実際の問題を検出します。IDEがコードを変更する方法を見つけるとすぐに、エディターの現在の行の横に黄色い電球アイコンが表示されます。このアイコンをクリックすると、このコード単位で使用可能なイン...

TypeScript のリファクタリング

リファクタリングは、アプリケーションの動作を変更せずにソースコードを更新することを意味します。リファクタリングはコードを堅牢にし、dryを維持しやすくします。移動リファクタリング:ファイルやフォルダーを移動するだけでなく、RubyMineではTypeScriptの最上位シンボルを移動できます。シンボ...

プラグイン

WindowsとLinux用のmacOS用このページを使用してプラグインを管理します。プラグインリポジトリの閲覧、プラグインのインストール、削除、有効化、無効化、および更新を行います。主なコントロール:マーケットプレースこのタブを使用して、JetBrainsプラグインリポジトリからプラグインをブラウ...

プラグインを管理する

プラグインはRubyMineのコア機能を拡張します。彼ら:バージョン管理システム、アプリケーションサーバー、およびその他のツールとの統合を提供する、さまざまな言語とフレームワークのコーディング支援サポートを追加する、ショートカットヒント、ライブプレビュー、ファイルウォッチャーなどを使用して生産性を向...