JavaScriptによるコーディング支援

構文の強調表示

ReSharperは、デフォルトのVisual Studioのシンボルの強調表示を拡張します。さらに、フィールド、ローカル変数、タイプ、その他の識別子を設定可能な色で強調表示します。例：ReSharperの構文強調表示により、コード内のローカル変数とフィールドを簡単に区別することができます。

JavaScriptのデフォルトの構文強調表示は、次のようになります。

必要に応じて、識別子の種類ごとに色とフォントを設定できます。

コード補完

コード補完の機能はコードをより速く書くのに役立ちます。タイプしている間、ReSharperは補完リストに適切な値を提案するために、最近入力した文脈とシンボルを分析します。

例：ReSharperは、現在のプロジェクトで参照されているJavaScriptライブラリのシンボルとして組み込みのJavaScriptメソッドとプロパティを見つけるのに役立ちます：

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

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

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

JavaScriptのコンテキストアクションの例を次に示します。

逆割当

割り当ての左部分と右部分をすばやく交換する場合は、次のコンテキストアクションを使用します。

この例の結果、evt は window.eventに割り当てられます。

波括弧の除去

波括弧が不要な場合、たとえばブロックに1つのステートメントが含まれている場合、このコンテキストアクションは左波括弧と終了波括弧の両方を削除し、インデントを修正することができます。

その結果、開閉波括弧が取り除かれます。

使用から作成

ReSharperが宣言されていない変数を検出した場合、このコンテキストアクションを使用して、欠落している宣言を追加します。

その結果、変数の宣言が追加されます

変数の初期値を書き込むことができます

宣言と割り当ての分割

変数の宣言と代入を分割する必要がある場合は、コンテキストアクションが役立ちます。

この例の結果として、formObj の宣言は、後でリファクタリングできる個別のステートメントになります。

別々の宣言に分解する

また、複数の宣言文を複数の別々の宣言に分割することもできます。これを行うには、次のコンテキストアクションを使用します。

結果として、各宣言は別個のステートメントになります。

コードの並べ替え

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

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

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

• 関数

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

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

• オブジェクト・リテラル

  • ファイル内または包含宣言内のオブジェクトリテラル

  • オブジェクトのプロパティは左右にあります。左右の矢印はオブジェクトプロパティが複数の行で定義されていても再配置されることに注意してください。

• ステートメント

  • 左辺と右辺の代入文の一部

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

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

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

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

• 式

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

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

• その他の要素

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

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

正規表現のアシスタンス

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

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

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

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

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

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

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

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

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

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

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

また、ReSharperは、ほぼすべてのJavaScriptの正規表現構文に対してIntelliSenseをサポートしています。補完リストでは、各構成が簡単な説明と共に示されています。

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

JSDocでのコーディング支援

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

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

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

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

JSDocの型、型定義およびコールバックは適切に強調表示され、コード補完で使用可能になります。

クイック・ドキュメント

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

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