JavaScript で TypeScript 型定義ファイルに基づくインテリセンス（Visual Studio 2017）
Visual Studio 2017 では、TypeScript を使用しなくても、JavaScript だけを書いていても、 自動で該当する TypeScript 型定義ファイルを取得し、TypeScript のようにインテリセンスを表示します。
参照：Visual Studio 2017 RC で JavaScript 開発がより生産的に – Visual Studio 日本チーム Blog
以下の図のように、TypeScript ファイルや .tsconfig ファイルが無い、ただの JavaScript ファイルを配置したプロジェクトを用意します。 そして、jQuery ライブラリを追加します。
site.js にて、「$.a」とタイプすると、jQuery の .d.ts を参照したインテリセンスが表示されます。
メソッドのところで F12 を押すと、型定義ファイルに移動し、表示します。
型定義ファイルは、%LOCALAPPDATA%\Microsoft\TypeScript に格納されており、私の環境ではC:\Users\hoge\AppData\Local\Microsoft\TypeScript\node_modules\@types なので、そこを開くと、ちゃんと実ファイルがあります。
例えば、プロジェクト内に新たに「d3.min.js」（グラフのライブラリ）を追加したとすると、
先のフォルダには、このように型定義ファイルが取得されています。
もちろん（？）、型定義ファイルとは違う書き方をしても、エラーが表示されたりはしません（通常の JavaScript ファイルでの開発と同じ挙動）。 フォルダを削除しても、Visual Studio でプロジェクトを開くと再度取得されていました。
JSDoc の強化もされており、JavaScript だけの開発においても、TypeScript のような補助が得られます。
Web Extension Pack 2017 から Web Essentials 2017 へ
「Web Extension Pack」という名前は、再び「Web Essentials」という元からある名前・ブランディングに戻りました。 Visual Studio 2017 では「Web Essentials 2017」という拡張機能が用意されています。
作成者である Mads Kristensen氏は、2016年12月に、”2017 では Web Essentials は引き継がない”と言っていましたが、 2017年3月に、それは bad idea とし、「Web Essentials」のブランドを続けていくと決めたみたいです。
上の2つの記事を参照し、流れをみたいと思います。
目次：
- Web Essentials とは
- 分割して Web Extension Pack へ
- Web Extension Pack から Web Essentials へ
- 追記 Productivity Power Tools
Web Essentials とは
- Web Essentials for Visual Studio
「Web Essentials」とは、Visual Studio 拡張機能の一つで、一般的な Web 開発を行う上で役に立つツールです。 機能は、CSS・HTML・JavaScript・TypeScript・CoffeeScript・LESS 等、Microsoft のフレームワークに限らず一般的な Web 開発に関するものです。 2010年に初めてリリースされてから、今日までたくさんの機能が提供されてきました。どのくらいたくさんあるかは、上のサイトを参照すると分かります。Visual Studio で Web 開発を行う際は、必ずインストールしてもよいくらいのメジャーな拡張機能です。
Microsoft は Visual Studio 2012 か 2013 あたりで、Web の OSS プロジェクトが使えることをアピールしていました。 これは Web Essentials が大きく貢献していると思います。 作成者は Mads Kristensen 氏で、Web Essentials に限らず Visual Studio の Web に関わる拡張機能を多く提供しています。
分割して Web Extension Pack へ
Web Essentials には、そのたくさんな機能数がゆえに、問題がありました。
- 複雑になりモノリスに
- プロジェクトのサイズは膨大になり、プルリクを送る人がとても少なくなる
- ユーザーが使っていない機能でバグやクラッシュが起きると、拡張機能全体をアンインストールしなければならず不満がでた
そこで、Visual Sutdio 2015 あたりのときに、機能を小さな拡張機能に分割し始めました。 そして、それらの拡張機能を一括でインストールするために、ほぼメタ情報の「Web Extension Pack 2015」拡張機能が用意されました。 Web Essentials は、CSS や JavaScript 等の機能と共に、Web Extension Pack の 1つとして含まれました。
（Web Extension Pack に含まれる拡張機能の一部）
そのときの説明は、以下の私のブログにもあります。
- Visual Studio 拡張機能、Web Extension Pack リスト - miso_soup3 Blog
- VS2015 拡張機能による JS/CSS/LESS 等の Bundle, Minify, Compile について - miso_soup3 Blog
分割することで以下のメリットが生まれ、結果は成功となりました。
- メンテナンスしやすくなった
- テストカバレッジ向上
- インストールは機能に合わせてオプションへ
- プルリクがたくさんきた
- コミュニティとの関与＆貢献
Web Extension Pack から Web Essentials へ
Visual Studio 2017 用の Web Extension Pack 2017 もリリースされました。 小さく分割された拡張機能を一括でインストールできる Web Extension Pack は、つまり、Web Essentials と同じようなものです。
そこで選択肢２つがありました。
- 名前を「Web Extension Pack」にして、「Web Essentials」という名前・ブランドは無くす
- Web Extension Pack の名前を Web Essentials に変更する
Mads Kristensen は後者を選択し、ブランド・名前・generally positive associations people（訳せなかった）を維持することを選択したようです。中身は、Web Extension Pack と同じように分割した拡張機能群です。
Visual Studio Marketplace で検索すると、各バージョンの Web Essentials が表示されます。
Extensions for Visual Studio family of products | Visual Studio Marketplace
参照 2010年の頃の記事： 【レビュー】Web開発に便利な機能を「Visual Studio」へ追加してくれる「Web Essentials」 - 窓の杜
まさに、Long live Web Essentials です。
追記 Productivity Power Tools
後で、 Productivity Power Tools という拡張機能を知りました。Web ではなく Visual Studio 全般の便利機能です。
この拡張機能も Web Extension Pack と似ていて、2010年からリリースされており、2017 にて機能毎に分割され、本体はメタ情報だけの拡張機能になっています。 また、Structure Visualizer など人気の高い機能は標準に組み込まれています。 分離されたことにより、どの機能が人気かどうかますます分かりやすくなるのだろうと思います。 （Web Essentials の機能の１つも、いつかは標準に組み込まれることが予想できます）
上記サイトでは、こう書いてありました。
すべての拡張機能を一括でインストールする場合は、Productivity Power Tools 2017 インストーラー (英語) をご利用ください。このバンドル インストーラーは、Mad Kristensen による Web Extension (英語) へのアプローチをヒントにしたもので、Productivity Power Tools for Visual Studio 2017 スイートに含まれるすべての拡張機能をインストールします。
