JavaScriptとTypeScript用の各種ツール

ReSharperのコード解析機能は、JavaScriptとTypeScriptのコードに対応した約100種類のコードインスペクションと、その他約50種類のTypeScript専用のインスペクションを使って、エラーや問題を素早く特定して解決するのに役立ちます。 検出された問題のほとんどは、クイックフィックスで即座に解決できます。

この例では、== が必要な場所で = を入力すると、非常にあいまいなバグが発生する可能性がありますが、ReSharper を使用する場合には発生しません。

コードを解析する際、ReSharperは言語レベル（設定可能）を考慮に入れます。 デフォルトでは、プロジェクトの設定に従って言語レベルが選択されますが、必要に応じてこの設定を上書きできます。

JavaScriptとTypeScriptでは、ReSharperのほとんどのナビゲーションと検索機能をご利用いただけます。 例によって、特定シンボルからのすべてのナビゲーションコマンドはNavigate Toショートカット（Alt+`）で呼び出せます。

Ctrl+T（Go to Everything/Type）およびCtrl+Shift+T（Go to File）など、お気に入りの検索コマンドもすべて呼び出すことができます。 サポート対象のナビゲーション機能と検索機能はすべて、JavaScriptとTypeScriptの構文特性を考慮しています。 例えば、File Structureではパラメータのデータ型がXMLドキュメントに記載されている場合、それを表示できます。

Structural Search and ReplaceもJavaScript/TypeScript構文を認識します。

ReSharperでは、JavaScript/TypeScriptコードの一部をJavaScriptとTypeScriptに対応した50種類のコンテキストアクションと約20種類のTypeScript専用アクションを使って素早く変換できます。

ReSharperの他の豊富なコーディング支援機能（シンタックスハイライト、コードの再配置、選択範囲の拡大/縮小など）も、JavaScriptコードと TypeScriptコードでご自由にお使いいただけます。

ReSharperは、JSDocコメントの構文をハイライト表示し、大幅に読みやすくいたします。 JSDocコメントを入力する際、ReSharperは入力を補完します。 たとえば、 関数の上で /**と入力すると、ReSharperはすべてのパラメータと戻り値用に ドキュメントのスタブを生成します。 また、JSDocの型（type）、型定義（typedef）、コールバック（callback）も適切にハイライト表示され、コード補完で使用できます。

また、シンボルに対するすべてのJSDocコメントが、それらシンボルの使用箇所でクイックドキュメントポップアップで表示されます。

JavaScriptとTypeScriptのコードでは、Inline Variable（変数のインライン化）、Introduce Variable（変数の導入）、Introduce Variable for Substring（部分文字列に変数を導入）、Rename（名前の変更）といったC#の場合と同じように動作する複数のリファクタリングを使用できます。

TypeScriptではCopy Type（型のコピー）、Introduce Field（フィールドの導入）、Move Type to Another File or Namespace（型を別ファイルまたは名前空間に移動）、Move to Folder（フォルダに移動）といった一連の型に対するリファクタリングを使用できます。

JavaScript/TypeScriptでは、Move to Resourceという専用の リファクタリングもあります。 このリファクタリングは、Visual Studioのテンプレートから作成されたJavaScript/TypeScriptプロジェクト（Apache Cordovaなど）で動作し、文字列リテラルをリソースファイルに移動できるようにします。

また、JavaScript/TypeScript用のリファクタリングはすべて、JSX構文でも使用できます。

継承型には、2種類の関連するコード生成機能があります：

• Implement missing members（不足しているメンバーの実装）は、現在のクラスに不足している任意のインターフェースメンバーや抽象メンバーを実装します。
• Override members（メンバーをオーバーライド）も同じ動作を行いますが、適用できる場合は仮想メンバーもオーバーライドします。

ReSharperは、コードフォーマット規則と命名規則というJavaScriptとTypeScriptのコードスタイルの2つの礎を自動的に維持するのに役立ちます。

実際、コードフォーマットは C#よりもずっと効果的に機能します。選択したコードブロックでAlt+Enterを 押して Format selection | Configureを選択すると、選択したブロックに影響する すべてのフォーマット規則を確認し、設定できます。

JavaScriptとTypeScriptに固有のコードスタイル設定も使用できます。文字列リテラルを処理する際に単一引用符（'）または二重引用符（"）を一貫して使用したり、ステートメントの省略可能なセミコロンを自動的に追加または削除できます。

TypeScriptではさらに、宣言部での型の指定方法（明示的な型名、var、またはany）や、public修飾子を明示的に使用するかどうか、およびモジュールのインポート方法も制御できます。

すべてのJavaScriptとTypeScriptのコードスタイル設定は、クイックフィックスかコードのクリーンアップのいずれかを一回呼び出すだけで任意の範囲に適用できます。

ReSharperは、QUnitとJasmineベースのユニットテストを、Visual Studioから直接検出して実行できます。 JavaScript/TypeScriptのテストの実行に使用するブラウザを選択したり、PhantomJSを使ったヘッドレステストを選択したりできます。

.NETのユニットテストと同様に、ソリューション内のJavaScript/TypeScriptのテストをUnit Test Explorerを使って参照したり、このウィンドウやSolution Explorer、またはエディタから直接テストを実行できるだけでなく、複数のユニットテストセッションも使用できます。

ReSharperは、3つの静的解析ツール（JSLint、ESLint、TSLint）に 対応し、組み込みのコード解析規則を拡張しています。 これらすべてのリンターは、 JavaScriptとTypeScriptのコードの可読性と保守性を確保するのに役立ちます。 これら使うと、 ReSharperのコード解析に含められるカスタムルールを追加できます。

Node.jsインタプリタをお使いのマシン上で構成済みの場合、 Tools | Web Linters以下のReSharper設定でリンターを有効化できます。