VisualStudioと言えば, .NET Frameworkの開発を行うというイメージが強いかと思われます. Web開発を, ASP.NETを用いた開発で, やはり.NETのようなイメージが付いて回ります.
しかし, VisualStudioは, 普通のHTML + Javascriptといった開発のための機能も備えており, JavascriptならばjQueryのIntellisenseを備えており, ほぼ完ぺきなドキュメントを内蔵しており, 下手なエディタよりも圧倒的に開発しやすいエディタになっています.
その機能をさらに便利に拡張する拡張機能が, VisualStudio Web Essentialsです.
拡張機能の紹介
ブラウザリンク拡張機能
VisualStudioで, デバッグを行うと, 図のようなポップアップメニューが表示され, cssの切り替えや, 自動同期の切り替えなどが, ブラウザで出来るようになります.
design/inspectモード
このモードは, 要素に対してマウスオーバーすることにより, その要素と対応するコードをハイライトする機能をVisualStudioに提供します.
また, 要素内テキストなどで, ブラウザ上で直接編集したコードをVisualStudio側に即座に反映することも可能となります.
Save F12 changes / F12 auto-sync
このF12は, IEの開発者ツールを指しています.
この機能では, 開発者ツールを使用して編集した内容を, 直接VisualStudio側に反映する機能を提供します.
Unused CSS / Start Recording / Clear CSS Usage Data
このモードは, 簡単に言うと, cssのデバッグ機能のようなものを, VisualStudioに提供する機能です.
使われていないcssを, エラーウィンドウで一覧に出力したりといった, 意外と手間のかかる作業を自動化して開発のサポートを行います.
VisualStudioでWebページ作成というと, やはりピンとこない方も多いかと思います.
今回紹介した機能以外にも, VisualStudio2012では, 標準で扱えたxml, jsonの 自動クラス化などが2013では, Web Essentialsの機能になったりと変化しているので, Web開発以外や, ASP.NETなどの開発を行う場合でも入れてみると, 非常に便利になるかと思います.
