Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

拡張機能を利用してVisual Studioをより便利にしよう

さらに使いやすく便利になった「Visual Studio」を始めよう! 第2回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/12/26 14:00

目次

拡張機能の紹介: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の色の補完
図11 CSSの色の補完

 なお、色の視覚表示については、IntelliSenseだけでなく、その後もエディター上に表示されるようになるので便利です(図12)。

図12 CSSの色の視覚表示
図12 CSSの色の視覚表示
「!important」の補完

 強制的に反映させたいCSSプロパティに付ける「#!important」ルールの入力が補完されます(図13)。

図13 「#!important」の補完
図13 「#!important」の補完
フォント名の補完

 フォルト名も補完されます(図14)。

図14 フォント名の補完
図14 フォント名の補完
サポートブラウザー表示

 CSSプロパティにマウスカーソルを置くと、サポートしているブラウザーを確認できます(図15)。

図15 サポートブラウザー表示
図15 サポートブラウザー表示
CSSのMinify

 対象範囲を選択して右クリックし、コンテキストメニューより「Web Essentials」→「Minify selection」を選択することで、CSSをMinify(縮小化)できます(図16)。

図16 CSSのMinify
図16 CSSのMinify

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の結果表示
図17 JSHint、JSCSの結果表示
図18 JSHint、JSCSのルールファイル編集
図18 JSHint、JSCSのルールファイル編集
すべての参照の検索

 対象のメソッド、関数にカーソルをあてて[Shift]+[F12]キーを押すと、そのメソッド、関数を参照している箇所が検索できます(図19)。

図19 すべての参照の検索
図19 すべての参照の検索
カッコの補完

 「(」や「{」といったカッコを入力すると、自動で閉じカッコが補完されます(図20)。

図20 カッコの補完
図20 カッコの補完

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 高野 将(タカノ ショウ)

    <個人紹介> 新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう! Visual C#入門 Visual C...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:さらに使いやすく便利になった「Visual Studio」を始めよう!
All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5