ReSharper 2025.1 ヘルプ

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

ReSharper のコーディング支援機能の多くは、JavaScript でもサポートされています。これらの機能の詳細については、コーディング支援の該当するトピックを参照してください。このセクションのサブジェクトでは、フィーチャマトリックスを見つけて、JavaScript で正確にサポートされているものを確認することもできます。

このトピックでは、JavaScript でコーディング支援機能を使用するいくつかの例を見つけることができます。

構文のハイライト

ReSharper は、デフォルトの Visual Studio のシンボルハイライトを拡張します。さらに、フィールド、ローカル変数、型、その他の識別子を、設定可能な色でハイライトします。例: ReSharper 構文ハイライトを使用すると、コード内のローカル変数とフィールドを簡単に区別できます。

JavaScript のデフォルトの構文ハイライトは、次のようになります。

ReSharper: Syntax highlighting in JavaScript

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

コード補完

コード補完機能は、コードをより速く書くのに役立ちます。入力中に、ReSharper は周囲のコンテキストと最近入力した記号を分析し、補完リストに適切な値を提案します。

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

ReSharper: Code completion in JavaScript

コンテキストアクション

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

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

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

逆割当

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

ReSharper: Reverse assignment context action in JavaScript

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

ReSharper: Reverse assignment context action in JavaScript

波括弧の除去

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

ReSharper: Remove braces context action in JavaScript

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

ReSharper: Remove braces context action in JavaScript

使用箇所から作成

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

ReSharper: Create from usage context action in JavaScript

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

ReSharper: Create from usage context action in JavaScript

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

ReSharper: Create from usage context action in JavaScript

宣言と割り当ての分割

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

ReSharper: Split declaration and assignment context action in JavaScript

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

ReSharper: Split declaration and assignment context action in JavaScript

別々の宣言に分割

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

ReSharper: Split into separate declarations context action in JavaScript

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

ReSharper: Split into separate declarations context action in JavaScript

コードを再配置

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

このコマンドを選択せずに実行すると、ReSharper は移動可能な要素を自動的に選択します。場合によっては 2 つの選択が行われることがあります。この場合、1 つの選択は青色でハイライトされ、もう 1 つの選択は黄色でハイライトされます。たとえば、関数パラメーターに対してこのコマンドを実行すると、ReSharper は 2 つの選択を行います。パラメーター自体(他のパラメーターを基準に左右に移動できます)と関数全体(他の型メンバーを基準に上下に移動できます)です。

Rearranging JavaScript code

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

  • 関数

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

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

  • オブジェクトリテラル

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

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

  • ステートメント

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

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

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

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

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

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

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

  • その他の要素

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

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

正規表現のアシスタンス

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

Code completion in regular expressions

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

JSDoc でのコーディング支援

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

Highlighting of JSDoc comments

JSDoc コメントを入力するとき、ReSharper は入力を完了できます。例: 関数の上に /** と入力すると、ReSharper はすべてのパラメーターと戻り値のドキュメントスタブを生成し、コメント内の型関数の説明の開始位置にキャレットを置きます。先頭に @ を付けずに JSDoc キーワードの入力を開始することもできます。

IntelliSense for JSDoc keywords

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

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

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

Coding assistance for JSDoc types

クイックドキュメント

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

ReSharper showing JSDoc comments in a tooltip

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

2025 年 1 月 23 日

関連ページ:

コーディング支援

ReSharper はさまざまなコーディング支援機能を提供します。これにより、コードの記述と編集がはるかに高速になり、生産性が向上し、時間を節約できます。ReSharper のコーディング支援機能のほとんどは、C# と Visual Basic で利用できます。一部は複数の言語で利用でき、その他は言語固有です。以下の表は、すべてのコーディング支援機能と、それらがサポートされている言語 / テクノロジを示しています。このセクション内のトピックに示されている手順と例では、C# のコーディング支援機能...

フォントと色を構成する

Visual Studio オプションダイアログでは、ReSharper がサポートされる言語の構文、コードインスペクションによって検出されるコードの問題、正規表現の構文、一致する区切り文字、To-do 項目、テンプレートエディターの項目をハイライトするために使用する色とフォントを構成できます。色とフォントを設定するメニューからを選択して、ページに移動します。アイテムを表示するでは、で始まる項目が見つかるまでリストを下にスクロールします。リストを参照して、ReSharper アイテムのフォーマット...

コンテキストアクション

コンテキストアクションは、エディターで直接利用できるコード変換ヘルパーです。クイックフィックスとは対照的に、コンテキストアクションは問題の解決やコードの改善を目的としているためはなく、アクセス修飾子の変更、null をチェックするコードの生成、'foreach' の 'for' への変換などの小さな変更をすばやく導入できます。ReSharper は、サポートされているすべての言語で数百のコンテキストアクションを提供します。完全なリストは、ReSharper オプション Alt+R, O のページとコ...

基本補完

ReSharper の基本補完は、クラス、メソッド、変数、キーワード、以前にインポートされた拡張メソッドを含む現在の可視性スコープ内で使用可能なその他のシンボルの名前を提案します。ライブテンプレート、コード生成の提案、単体テストのカテゴリなど、他の多くのコンテキスト固有の提案も補完リストで利用できます。デフォルトでは、基本補完の候補にはスマート補完とインポートシンボル補完の項目も含まれます。デフォルトの動作を変更する場合は、ReSharper オプション Alt+R, O のページで対応するコントロ...

Rename リファクタリング

このリファクタリングにより、ソリューション内の任意のシンボルまたはプロジェクトの名前を変更できます。シンボルへの参照および使用箇所はすべて自動的に更新されます。さまざまな C# エンティティにリファクタリングを使用する:これは、このリファクタリングで名前を変更できるエンティティのリストです。名前空間また、名前空間のネストレベルを変更することもできます。例: 名前空間をに変更できます。タイプ名前が変更された型が同じ名前のファイルにある場合、ReSharper は含まれているファイルの名前も変更し...

クイックドキュメント

ReSharper を使用すると、エディター内でシンボルのドキュメントをすばやく確認できます。シンボルがサポートされている形式 (C# の XML-docs など) でドキュメント化されている場合、すべてのドキュメントが適切な形式で表示されます。それ以外の場合は、基本的なシンボル情報が表示されます (完全なメソッドシグネチャーまたは型の可視性と名前空間など)。シンボルのクイックドキュメントを表示キャレットを配置するエディターのシンボル参照、ファイル構造ウィンドウまたはその他の ReSharper...