Visual Studio 拡張機能、Web Extension Pack リスト

Mads Kristensen 氏が、Web 開発のための Visual Studio 拡張機能をまとめた Web Extension Pack を公開しています。
どのような拡張機能が含まれているのか、調べてみました。

～～～～
※Web Extension Packは VS 起動の際、新しい拡張機能があれば自動でインストールされます。
そのため、含まれる拡張機能の内容が随時変わる可能性があります。下記のリストは古い可能性があるため、最新については上記ページを参照します。
この機能を入れてほしい、といったものがあれば、https://github.com/madskristensen/WebExtensionPack/issues に投げればいい模様。
～～～～
※2016/03/29 Mads Kristensesn 氏による Channel 9 の動画が公開されています。
Web Extension Pack | Visual Studio Toolbox | Channel 9 https://channel9.msdn.com/Shows/Visual-Studio-Toolbox/Web-Extension-Pack
～～～～

それぞれについて一言：

• Bootstrap Snippet Pack
  • Bootstrap の HTML スニペット
• Bowser sync
  • Browser Link 上で動作し、ブラウザの操作を少しだけ同期する
• Glyphfriend
  • Font Awesome などのフォントのインテリセンス＆プレビュー
• Image Optimizer
  • 画像圧縮
• NPM Scripts Task Runner
  • package.json の script をタスクランナーエクスプローラーへ追加
• Open command Line
  • プロジェクトファイルをCommand Lineで開く
• Package Installer
  • npm, nuget 等のパッケージを簡単にインストール
• Web Analyzer
  • JavaSciprt, CoffeScript 等の静的チェック
• Web Compiler
  • LESS 等をコンパイルする
• Web Essentials 2015.1

（2015/1/14 追加）

• JavaScript Snippet Pack
• React Snippet Pack

それぞれのページに一目でわかる画像や説明がありますので、ここではさらりと紹介します。

Bootstrap Snippet Pack

https://visualstudiogallery.msdn.microsoft.com/e82e7862-f731-4183-a27a-3a44b261bfe5

HTML, CSS, JS のフレームワークである Bootstrap の HTML のスニペット。

例えば、HTMLファイルにて「bs-accordion」とタイプし Tab を押せば、アコーディオンのテンプレートが展開されます。

スニペット一覧は、
https://github.com/elebetsamer/bootstrap-snippets-visual-studio/blob/master/snippet-listing.md
ここから確認できます。

ちなみに Visual Studio 2015 に登録されているスニペットを確認するには、ツール＞コード スニペット マネージャ を開きます。

Bowser sync

https://visualstudiogallery.msdn.microsoft.com/5741a548-5179-4a77-ad96-fca71535774d

ASP.NET のプロジェクトのデバッグ時に、フォームの入力・スクロール・ページ遷移が全ブラウザで同期されるというもの。
上記サイトのgifを見れば一目瞭然です。例えば、複数のブラウザを立ち上げ、IEにて「登録」ページに遷移し、Ctrl + Alt + Enter を押すと、すべてのブラウザが同じページに遷移します。

機能
・すべてのブラウザとエミュレーターに対応
・フォームへの入力がすべてのブラウザで同期される
・hotkey（Ctrl + Alt + Enter） ですべてのブラウザが同じ URL に遷移
・hotkey でスクロールポジションを同期
・有効/無効の切り替え

この機能は Brower Link 上で働きます。Browser Link は Visual Studio 2013 からあるものです。
詳しくはこちらをどうぞ。クロスブラウザのテストに Visual Studio 2013 のブラウザー リンクをどうぞ。

Glyphfriend

https://visualstudiogallery.msdn.microsoft.com/5fd24afb-b3b2-4cec-9b03-1cfcec6123aa

グリフが多いWebフォント（Font Awesome等のようなWebフォントでアイコンを表示するもの）のインテリセンスと、アイコンのプレビューを提供します。
対応しているのは以下のものです。

• Bootstrap Glyphicons
• Font Awesome
• Foundation
• Ionicons
• IcoMoon
• Octicons

例えば、Visual Studio 2015 の ASP.NET MVC のプロジェクトテンプレートには、Bootstrap Glyphicons のライブラリが含まれています。
HTML ファイル等でタイプすると、以下のようにインテリセンスとアイコンのプレビューが表示されます。

このインテリセンスを使用するには、あらかじめプロジェクトに使用するフォントのライブラリが含まれている必要があります。
例えば、Font Awesome のインテリセンスを使用したい場合はプロジェクトにFont Awesomeのライブラリを追加することで、下の画像のように表示されます。

Image Optimizer

https://visualstudiogallery.msdn.microsoft.com/a56eddd3-d79b-48ac-8c8f-2db06ade77c3

右クリックから画像 JPEG, PNG, Gif を圧縮する拡張機能。

ソリューションエクスプローラーから、画像を右クリック→ Optimize image をクリックすると画像が圧縮されます。
圧縮してみると、出力ウィンドウにこのように出力されました。

2016/01/07 18:00:39: Optimized a0002_012117.jpg
Before: 56108 bytes
After: 51542 bytes
Saving: 4566 bytes / 8.1%

NPM Scripts Task Runner

https://visualstudiogallery.msdn.microsoft.com/8f2f2cbc-4da5-43ba-9de2-c9d08ade4941

package.json にある script セクション内にあるタスクを Task Runner Explorer に追加する拡張機能。

package.json を右クリックし、「タスクランナーエクスプローラー」を選択すると、下のようにウィンドウにて表示され、タスクの実行を管理できます。

注意：
現在、Visual Studio 2015 で ASP.NET 5 のプロジェクトを開くと、ソリューションエクスプローラーにて bower.json, package.json が表示されません。
実際のフォルダには存在しており、「すべてのファイルを表示」から表示させることができます。

また、2016-1-6 に公開された記事Task runners in Visual Studio 2015
を見ると、いろいろ Task Runner Explorer に集約されそうです。

Open command Line

https://visualstudiogallery.msdn.microsoft.com/4e84e2cf-2d6b-472a-b1e2-b84932511379

Visual Studio からプロジェクトファイルの場所をコマンドラインで簡単に開くツール。PowerShell やカスタムツールも設定できます。

2015年1月に、Scott Hanselman 氏のブログでも取り上げられました。Quake Mode Console for Visual Studio - Open a Command Prompt with a hotkey

Package Installer

https://visualstudiogallery.msdn.microsoft.com/753b9720-1638-4f9a-ad8d-2c45a410fd74

Bower, npm, JSPM, TSD (DefinatelyTyped), NuGet のパッケージをお手軽にインストールできる拡張機能。

ソリューションエクスプローラーにてプロジェクトを右クリックし、「Quick Install Package」を選択すると下のようなウィンドウが表示されます。

が、私の環境では VS が即落ちしました。何か必要なのでしょうか。

Web Analyzer

https://visualstudiogallery.msdn.microsoft.com/6edc26d4-47d8-4987-82ee-7c820d79be1d

Visual Studio にて、JavaSciprt、TypeScript、JSX、CSS 等の静的チェックをする拡張機能。他、CoffeScript、CSSLint、ESLint、CoffeLint、TSLint にも対応している模様。

Web Compiler

https://visualstudiogallery.msdn.microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c

LESS, Sass, JSX, ES6, CoffeeScript をコンパイルする拡張機能。

以前書いた VS2015 拡張機能による JS/CSS/LESS 等の Bundle, Minify, Compile について に試したときの様子があります。

Web Essentials 2015.1

https://visualstudiogallery.msdn.microsoft.com/ee6e6d8c-c837-41fb-886a-6b50ae2d06a2

数年前からある Visual Studio で Web 開発をするなら絶対いれておくべきな Web Essentials。フロントを中心に多くの機能があります。詳細は公式サイトから確認できます。

最後に

以上、さらりと　Web Extension Pack が含む拡張機能を調べてみました。個人的にはBundler & Minifier も含まれてほしいですがキリが無いですし、別途インストすればOKかなと。
ほとんどの作成者が Mads Kristensen 氏でした。Visual Studio で Web 関連の拡張ツールを探すときは、作成者＝Mads Kristensen氏 でフィルタリングして探すのが良さそうです。

また、Task runners in Visual Studio 2015 より、Task Runner の拡張機能も気になるところです。