ReSharper 2019.1ヘルプ

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

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

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

構文の強調表示

ReSharper recognises *.ts and *.d.ts files, and highlights source code within such files according to the predefined colors. You can change colors and fonts at any time. For more information, see フォントと色の設定

コード補完

As usual, you can use コード補完 features to ease code writing. TypeScript is an object-oriented programming language, so we can define types and members. For example, ReSharper suggests members of the current instance after this keyword.

ReSharper by Language TypeScript Code Completion 01

ReSharper also takes into account the right level of abstraction. Consider the example below. After a new instance of the Vector object is initialized, ReSharper displays all available members in the completion list.
ReSharper by Language TypeScript Code Completion 02

The minus and plus methods are public, so they are in the list. The times method is private, so it is excluded from the list.

コードの並べ替え

コードを並べ替えるには、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 を押してアクションリストを展開したときにのみ表示されます。コンテキストアクションは最も優先順位が低いため、アクションリストの一番下に表示されることがよくあります。

Here are some examples of context actions for TypeScript:

使用箇所から作成

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

ReSharper by Language TypeScript Context Actions create local variable 01
Or you can use a data type that doesn't exist yet and declare it later using the following context action.
ReSharper by Language TypeScript Quick Fixes create module 01

インポートタイプ

In some other cases, there is no need to create a new entity. When, for example, you want to use an existing one and the only thing that you you haven't taken into account yet is visibility scope.

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 also provides IntelliSense support for almost all TypeScript regular expression constructs. In the completion list, each construct is shown with a brief description.

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の対応する項目の名前も変更します。

If a function has JSDoc comments, they are available in the parameter information tooltip and in the quick documentation pop-up.

クイック・ドキュメント

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

ReSharper showing JSDoc comments in a tooltip

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

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

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

関連事項

関連ページ:

コーディング支援

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

フォントと色の設定

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

選択の拡張/縮小

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

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

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

基本補完

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

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

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