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 が可動要素を自動的に選択します。 場合によっては選択範囲が２つ作られます。 この場合、一方の選択は青色で、もう一方は黄色でハイライトされます。 例えば、関数のパラメーター上でこのコマンドを実行すると、ReSharper は２つの選択範囲を作成します：１つは他のパラメーターに対して左右に移動可能なパラメーター自体、もう１つは他の型メンバーに対して上下に移動できる関数全体です：

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 キーワードの入力を開始することもできます。

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

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

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

クイックドキュメント

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

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