最も鋭い Visual Studio Web 開発ツール拡張機能: Web Essentials 詳細説明_html/css_WEB-ITnose

Web Essentials は、これまでに見た中で最高の VS 拡張ツールです。具体的な機能については、私が説明するまでお待ちください。

まず、Extension Manager からインストールします。最新バージョンは 19 日にリリースされたバージョン 2.5 です

その後、VS 開発環境を再起動すると、VS 開発環境が提供する便利な機能を使用できるようになります。

Web Essentials は、CSS、JavaScript、HTML に対する多くのクイック機能サポートを提供します。具体的なリストは次のとおりです:

CSS

ライブ Web プレビュー
変更するたびに、次のことができます。 CTRL+ALT+Enter ショートカット キーを使用するか、プランを右クリックして [ライブ Web プレビュー] オプションをクリックすると、HTML または対応する CSS を変更するたびに、Ctrl+S で保存した後に実際のページをプレビューできます。 -time window はすぐに有効になります。

互換性 CSS コード生成
多くの CSS3 コードは互換性がなく、ブラウザーごとに言語が異なります。 - moz で始まる一部の CSS - などの特別な CSS タグをプロモーションを通じて自動的に追加するには、この拡張機能を使用します。 webkit、-ms、および -o は特定のブラウザのみを選択できます。

生成されたコードの結果は次のとおりです:

既にパーツを追加している場合、拡張機能はこのパーツ以外の CSS コードのみを追加し、繰り返し追加することはありません。

上下の矢印で数値を変更できます

5px、25%、0.6em、23などの数値の上または後ろにキーボードプロンプトを置くと、次のように使用できます。 CTRL+UP または CTRL+DOWN を押して値を増減します。

CSS、SaSS、LESS、JavaScript ファイルをサポート

URL アドレスの代わりに Base64 形式の文字列を生成できます

URL を通じて背景画像を参照する場合、この拡張機能を通じて直接提供できますBase64 としてリソースを埋め込む関数は、参照を Base64 形式に変換します。

コンテンツが長すぎると思われる場合は、折りたたみ機能を使用できます。

コードのコメント化およびコメント解除のためのショートカット キーをサポートします

CTRL+K、CTRL+C を使用してコメント化するか、CTRL+K、CTRL+U を使用してコードのコメント化を解除し、C# プログラミングのショートカットを使用できます。 VS キーは同じです。

TODO コメントの特別サポート

コメントに TODO キーワードが含まれている場合、その部分がまだ完了していないことを示す灰色の特別なマークが左側に表示されます。

カラープレビュー

マウスを色の上に移動すると、変更された色をプレビューしたり、CSSエディターで直接色をプレビューしたりできます

フォントプレビュー

画像プレビュー

折りたたみ機能

右クリックして確認してくださいこのコードを領域付きで折り畳む。

関数を選択すると、デフォルトの MyRegion 名が自動的に検索され、独自の折り畳まれたアウトラインの名前を変更できるようになります。

文字の並べ替え

任意のセレクターをクリックすると、セレクターのCSS定義を並べ替えることができます

ブラケットマッチング

現在、{}、[]、をサポートしています() が一致します。

コードを圧縮

この拡張機能は、AjaxMin ライブラリを使用して CSS コードを圧縮します。

コードの折りたたみ

ドラッグをサポート

たとえば、tomxu .jpg 画像をこの CSS 選択にドラッグした場合、画像とフォントのドラッグをサポートしますまたは、次のコード自動的に生成されます (フォントは似ています):

background-image: url('../tomxu.jpg');

色は 16 進数、RGB、名前の間で直接変換できます

ブラウザのバージョンを選択して定義できますブラウザでのみサポートされています

CSS 構文でのみサポートされるブラウザのバージョンを定義できます

JavaScript

リージョンの折りたたみをサポート

//#region MyRegion<br /><br />function Example() {<br /><br />}<br /><br />//#endregion

コードの折りたたみをサポート

括弧の一致

現在、{}、[]、()の一致をサポートしています。

同じ単語が強調表示されます

ファイル内のすべてのコードのうち、変数を選択すると、C# と同様に、コード内のすべての同じ変数が強調表示されます。

圧縮コード

AjaxMin ライブラリを使用してコードを圧縮しました。圧縮されただけでなく、難読化も使用されました

ファイルをすばやく追加します

ここのソリューションに、次を追加します新規作成時にJavaScriptファイルを追加するかスタイルシートファイルを追加するかを直接選択できるので便利です！

HTML

ユーザー コントロールのドラッグをサポート

これまで、asp.net Web フォームを開発していたときは、マウスを直接使用してユーザー コントロールを aspx ページにドラッグしたり、この拡張機能を使用すると、接続が自動的に生成され、名前付きコントロールが自動的に登録され、 を含むコードが生成されます。

ビデオファイルとオーディオファイルのドラッグをサポート

オーディオファイルとビデオファイルのドラッグもサポートしています。