ReSharper 2019.1ヘルプ

TypeScriptのコーディングアシスタンス

ReSharperのコーディング支援機能のほとんどはTypeScriptでもサポートされています。これらの機能の詳細については、コーディング支援セクションの対応するトピックを参照してください。このセクションの主なトピックでは、機能マトリックスを見つけて、TypeScriptで何がサポートされているのかを確認することもできます。

このトピックでは、TypeScriptのコーディング支援機能の使用例をいくつか紹介します。

構文の強調表示

ReSharperは *.ts および *.d.ts ファイルを認識し、そのようなファイル内のソースコードを定義済みの色に従って強調表示します。色とフォントはいつでも変更できます。詳しくは、フォントと色の設定を参照してください。

コード補完

通常どおり、コード補完の機能を使ってコードの作成を容易にすることができます。TypeScriptはオブジェクト指向プログラミング言語なので、型とメンバーを定義できます。例:ReSharperは、this キーワードの後に現在のインスタンスのメンバーを提案します。

ReSharper by Language TypeScript Code Completion 01

ReSharperは正しい抽象化レベルも考慮に入れています。以下の例を考えてください。 Vector オブジェクトの新しいインスタンスが初期化された後、ReSharperは補完リスト内の使用可能なすべてのメンバーを表示します。
ReSharper by Language TypeScript Code Completion 02

minusplus メソッドは公開されているため、それらはリストにあります。 times メソッドはプライベートなので、リストから除外されています。

コードの並べ替え

コードを並べ替えるには、Ctrl+Shift+Alt を移動したいコードエレメントまたは選択項目の上に押します。要素を移動することが理にかなっている場合、ReSharperは可能な移動オプションを持つツールチップを表示します。

選択せずにこのコマンドを呼び出すと、ReSharperは可動要素を自動的に選択します。ときどき2つの選択が行われることがあります。この場合、1つの選択は青で強調表示され、もう1つの選択は黄で強調表示されます。例:関数のパラメータに対してこのコマンドを呼び出すと、ReSharperは次の2つの選択を行います。パラメータ自体は、他のパラメータに対して左右に移動できます。また、関数全体を他の型のメンバーに対して上下に移動できます:

Rearranging JavaScript code

ReSharperでは、以下の方法で要素を移動できます。

  • 型と型メンバー
    • 現在のファイル内または包含する宣言内での型の上下

    • 左右のベースタイプ

    • 型パラメータleftとright

    • 宣言内のパラメーターおよび関数の使用箇所内の引数左右

  • 関数
    • 現在のファイル内または別の関数内での上下

    • 宣言のパラメータと左右の関数の使用箇所

  • ステートメント
    • 左辺と右辺の代入文の一部

    • 関数内または複合語内のステートメント

    • 複合文からの文(左)、または直後の複合文への文 (右揃え)

    • switchステートメント内のセクションを上下に切り替えます

    • 複合文の上下を波括弧で閉じる(貪欲な波括弧)終了波括弧を移動するには、波括弧の外側にキャレットを置き、Ctrl+Shift+Alt を押し、上下の矢印を使用して、現在の複合文の後ろにある文を含めるか、最後の文をその外側に移動します。

    • 左と右の式のオペランド

    • コレクションの要素と配列の初期化の左右

  • その他の要素
    • 左と右のテンプレート文字列の引数

    • 行とCスタイルのコメントを上下に

コンテキスト・アクション

ReSharperは、TypeScriptコードをターゲットとする一連のコンテキストアクションを提供します。ReSharperオプションのコード編集 | TypeScript | コンテキスト・アクションページでこれらのアクションの完全なリストを見つけることができます。必要に応じて、このページを使用していくつかのアクションを無効にすることもできます。

現在のキャレット位置でコンテキストアクションが使用可能になるとすぐに、ReSharperは対応するアクションインジケーター ThemedIcon ContextAction Screen Gray をキャレットの左側に表示します。しかし時々、ReSharperは現在のキャレットポジションのために文脈上利用可能ないくつかの機能を提供します。この場合、最も優先度の高いアクションに対応するアクションインジケータが表示され、その他のすべてのアクションは、アクションインジケータをクリックするか、Alt+Enter を押してアクションリストを展開したときにのみ表示されます。コンテキストアクションは最も優先順位が低いため、アクションリストの一番下に表示されることがよくあります。

TypeScriptのコンテキストアクションの例をいくつか示します。

使用箇所から作成

シンボルの宣言は、対応するコンテキストアクションによって実際に使用された後に作成できます。

ReSharper by Language TypeScript Context Actions create local variable 01
あるいは、まだ存在していないデータ型を使用し、後で次のコンテキストアクションを使用して宣言することもできます。
ReSharper by Language TypeScript Quick Fixes create module 01

インポートタイプ

他の場合には、新しいエンティティを作成する必要はありません。たとえば、既存のものを使用したいが、まだ考慮していない唯一のものが可視性スコープです。

ReSharper by Language TypeScript Context Actions import type 01

正規表現のアシスタンス

ReSharperは構文構造と、正規表現のエラーと冗長性を強調しています:

Highlighting of regular expressions

強調表示の色は、次の意味を持ちます。

  • ライトブルー - 文字クラス、アンカー、および数量子

  • ライトグリーン - グループ化コンストラクト

  • オレンジ色のコンストラクト

  • ピンクとライトピンク - エスケープシーケンス

  • 赤い波線の下線付き - エラー

区切り文字の1つにキャレットを設定すると、角括弧のグループ、マッピング、グループ名、セットが強調表示されます。ReSharperオプションの環境 | エディター | エディターの外観ページの一致する区切り文字を強調表示する設定を使用して、この強調表示を切り替えて調整することができます。

デフォルトでは、ReSharperはすべての文字列の正しいエスケープシーケンスと誤ったエスケープシーケンスを強調表示します。

Highlighting of escape sequence in a string

およびテンプレート文字列:

Highlighting of escape sequence in a template string

必要に応じて、この強調表示をオフにするには、ReSharperオプションのコード・インスペクション | 設定ページで文字列リテラルの特殊文字を強調表示するチェックボックスをオフにします。

ReSharperは、ほぼすべてのTypeScript正規表現構成体に対するIntelliSenseサポートも提供します。補完リストでは、各構築物は簡単な説明と共に示されています。

Code completion in regular expressions

基本補完Ctrl+Space)を呼び出して、現在のスコープで使用可能な要素を表示することができます。

JSDocでのコーディング支援

ReSharperはコード内のJSDocコメントを理解し、それらのコードで作業できます。まず、ReSharperはJSDocコメントの構文を強調して読みやすさを大幅に向上させます。

Highlighting of JSDoc comments

JSDocコメントを入力すると、ReSharperは入力を完了することによってあなたを手助けします。例:関数の上に /** と入力すると、ReSharperはすべてのパラメータのドキュメントスタブと返り値を生成し、型関数の記述を開始する位置にコメント内のキャレットを設定します。先頭の @なしでJSDocキーワードの入力を開始することもできます:

IntelliSense for JSDoc keywords

関数パラメータに名前変更リファクタリングを適用すると、ReSharperはJSDocの対応する項目の名前も変更します。

関数にJSDocコメントがある場合、それらはパラメータ情報ツールチップおよびクイックドキュメントポップアップで利用可能です。

クイック・ドキュメント

ReSharperを使用すると、TypeScriptシンボルに関するドキュメントをエディターですぐに確認できます。JSDocコメントはツールチップに表示されます。すべてのタグはセクションとして表示されます。

ReSharper showing JSDoc comments in a tooltip

シンボルのドキュメントを表示するには、その上にキャレットを置き、メインメニューで Ctrl+Q を押すか、ReSharper | 編集 | クイックドキュメントを表示するを選択します。

詳しくは、クイック・ドキュメントを参照してください。

最終更新日: 2019年7月5日

関連事項

関連ページ:

コーディング支援

ReSharperには、コーディング支援機能が豊富に用意されているため、コードの書き込みや編集がより迅速になり、生産性が向上し、時間が節約されます。このセクションで説明されている機能の他に、ReSharperはいくつかのコード生成機能とコードテンプレートを提供します。ReSharperのコーディング...

フォントと色の設定

Visual Studioオプションダイアログでは、ReSharperがサポート言語の構文、コードインスペクションで検出されたコードの課題、正規表現の構文、一致する区切り記号、To-do 項目、テンプレート・エディターの項目を強調表示するために使用する色とフォントを設定できます。色とフォントを設定す...

選択の拡張/縮小

/Ctrl+Shift+WReSharper_ExtendSelection/ReSharper_ShrinkSelection選択範囲の拡張コマンドを使用すると、拡張論理ブロックのコードを連続して選択できるので、コード内の任意の式を簡単に選択できるようになります。その場合、その中にキャレット...

コンテキスト・アクション

コンテキストアクションのいくつかの例をReSharperWebサイトでチェックすることができます。コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変...

基本補完

ReSharper | 編集 | 完全なシンボルReSharperの基本補完は、クラス、メソッド、変数、キーワード、および以前にインポートされた拡張メソッドを含む現在の可視性の範囲内で利用可能なその他のシンボルの名前を提案します。ライブテンプレート、コード生成の提案、ユニットテストのカテゴリなど、他...

名前変更リファクタリング

ReSharper | リファクタリング | 名前の変更…このリファクタリングにより、ソリューション内の任意のシンボルまたはプロジェクトの名前を変更できます。シンボルへの参照および使用箇所はすべて自動的に更新されます。異なるC#エンティティのリファクタリングの使用:これは、このリファクタリングで名前...