拡張機能の紹介:Web Essentials
拡張機能の概要とインストール方法が分かったところで、ここからはいくつかの便利な拡張機能を紹介していきます。
最初は「Web Essentials」です。
Web Essentialsは、Web開発に向けた非常に多くのサポート機能を提供する拡張機能です。また、将来のVisual Studioに搭載されるWeb用機能(ASP.NET and Web Tools)の試験的な面もあるようで、過去にWeb Essentialsに搭載されていた機能が、Visual Studio側に吸収されたこともあります。
Web Essentialsの機能は非常に多いため、すべてを紹介しきれませんが、いくつかのおすすめの機能を紹介します。すべての機能の紹介は、上記リンクのWeb Essentaials公式ページから確認してください。
CSSエディターのサポート
CSSエディターの作業をサポートします。
色の補完
色を指定する際、IntelliSense上にその色が四角で表示されるため、目的の色を選択しやすくなります(図11)。
![図11 CSSの色の補完](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_11.gif)
なお、色の視覚表示については、IntelliSenseだけでなく、その後もエディター上に表示されるようになるので便利です(図12)。
![図12 CSSの色の視覚表示](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_12.gif)
「!important」の補完
強制的に反映させたいCSSプロパティに付ける「#!important」ルールの入力が補完されます(図13)。
![図13 「#!important」の補完](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_13.gif)
フォント名の補完
フォルト名も補完されます(図14)。
![図14 フォント名の補完](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_14.gif)
サポートブラウザー表示
CSSプロパティにマウスカーソルを置くと、サポートしているブラウザーを確認できます(図15)。
![図15 サポートブラウザー表示](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_15.gif)
CSSのMinify
対象範囲を選択して右クリックし、コンテキストメニューより「Web Essentials」→「Minify selection」を選択することで、CSSをMinify(縮小化)できます(図16)。
![図16 CSSのMinify](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_16.gif)
JavaScriptエディターのサポート
JavaScriptエディターの作業をサポートします。
JSHint、JSCSの結果表示
JSHintおよびJSCSはJavaScriptの構文を静的解析するためのツールです。JavaScriptファイルの編集時、「エラー一覧」ウィンドウにJSHint、およびJSCSの実行結果が表示されます(図17)。
JSHint、JSCSのチェックルールを変更したい時は、「WEB ESSENTIALS」メニュー→「Edit global JSHint settings (.jshintrc)...」もしくは「Edit global JSCS settings (.jscsrc)...」を選択すると、ホームフォルダにあたる%UserProfile%(C:\Users\ユーザー名)フォルダー配下の各ファイル(.jshintrc、.jscsrc)を編集できます(図18)。
![図17 JSHint、JSCSの結果表示](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_17.gif)
![図18 JSHint、JSCSのルールファイル編集](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_18.gif)
すべての参照の検索
対象のメソッド、関数にカーソルをあてて[Shift]+[F12]キーを押すと、そのメソッド、関数を参照している箇所が検索できます(図19)。
![図19 すべての参照の検索](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_19.gif)
カッコの補完
「(」や「{」といったカッコを入力すると、自動で閉じカッコが補完されます(図20)。
![図20 カッコの補完](http://cz-cdn.shoeisha.jp/static/images/article/8318/8318_20.gif)