![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicrosofttech.osscons.jp/]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る（[[ASP.NET SPA]]、[[ASP.NET Core]]） --Web Essentials --[[ASP.NET Core SPAテンプレート]] --[[.esproj（JavaScript・TypeScriptプロジェクトシステム）]] * 目次 [#u6c57651] #contents *概要 [#w018c92f] Microsoftの（正確にはMicrosoftのプログラムマネージャーであるMads Kristensen氏を中心としたコミュニティが開発・主導した）Visual Studio向け拡張機能 -Visual Studio 拡張の一つ。2010年にリリース。 -一般的な Web 開発を行う上で役に立つ機能を実装している。 --HTML / CSS / JavaScript --TypeScript / CoffeeScript / LESS 等 -機能が継続的に追加されている。 *詳細 [#o2f98275] **変遷 [#p98b4e75] ***Web Extension Pack [#kd1c866e] -Visual Sutdio 2015で機能分割された。 -Web Extension Packは一括インストール用のpack。 「Web Essentials」は、時代ごとのフロントエンド技術のトレンドや、Visual Studio本体の進化に合わせてその役割を大きく変えてきた。 ***再び、Web Essentialsへ。 [#hef21cce] -Web Extension Pack の名前が Web Essentials に戻された。 -中身は、Web Extension Pack と同じ、分割された拡張機能群。 -Visual Studio Marketplaceからダウンロードできる。 --Search results - Web Essentials | Visual Studio , Visual Studio Marketplace~ https://marketplace.visualstudio.com/search?term=Web%20Essentials&target=VS&category=All%20categories ***黎明期 [#j814f455] Visual Studio 2010 〜 2013（単一の超強力プラグイン時代） -2010年頃に初版がリリースされた「Web Essentials」は、当時のVisual Studioに不足していた最新のWeb標準やフロントエンド開発環境を補完する「実験場」として機能 -オールインワンの機能追加：HTML5、CSS3、JavaScriptの高度なインテリセンス（入力補完）や、色のプレビュー、画像のDataURI変換などを1つの拡張機能で提供。 -新言語の早期サポート：当時登場したばかりのLESS、Sass、CoffeeScript、そしてTypeScriptのコンパイル機能や、ファイルの軽量化（Minify）、結合（Bundling）機能をいち早く搭載 ***転換期 [#p9dab4d4] Web Extension Pack for Visual Studio 2015（肥大化の解消と機能の「解体・分割」） -Web Essentials 2015の時代に入ると、1つの拡張機能に機能を詰め込みすぎたことで、動作の重さやメンテナンス性の低下が問題視されるようになる。また、Node.jsベースのビルドツール（GulpやGrunt）が台頭。 -コンパイラの削除：LESSやSassなどのコンパイル機能が本体から削除され、外部のタスクランナー（Gulp等）へ処理を委ねる方針にシフト。 -機能のマイクロ拡張化（Web Extension Pack）：Web Essentialsを単一のプラグインとして提供するのをやめ、機能ごとにバラバラの小さな拡張機能（「Bundler & Minifier」「Web Compiler」など）として分割 -それらを一括でインストールするためのメタ・パッケージ（福袋のようなもの）として、一時期「Web Extension Pack」という名称に変更された。 ***再構築 [#pefe7bf7] Visual Studio 2017 〜 2019（ブランドの復活と本体への統合） -ユーザーからのフィードバックを受け、再びお馴染みの「Web Essentials」のブランディングが復活（Web Essentials 2017 / 2019）。 -パッケージとしての定着：中身はVS 2015時代と同様に「便利な単機能の拡張機能を集めた拡張機能パック」という構造のまま、名称が「Web Essentials」に戻る。 -Visual Studio本体への吸収：Web Essentialsが先んじて実装した機能の多くが、Visual Studio自体の標準機能として正式に組み込まれた。 ***成熟・現在 [#w96f3645] Visual Studio 2022以降（役割の終焉とレガシー化） -近年のVisual Studio 2022以降の開発環境においては、Web Essentialsの存在感はかつてほど絶対的なものではなくなっています。 -VS本体の進化: 現在では、Visual Studio本体のWeb開発ツール（エディタ機能、JavaScript/TypeScriptサポート）が非常に強力になり、かつてWeb Essentialsを入れなければ実現できなかったことの大半が、デフォルトで動作するようになっています。 -VS Codeへのシフト：主戦場がVS Codeへと移行したこともあり、大規模な機能追加などの激しい変遷は落ち着き、現在は役割を終えた、あるいは成熟したツールとして扱われている。 **分割機能 [#v3eae4c1] ***Excelsior Compiler / Web Compiler [#ve1671dd] -Web Essentials / Web Compiler の後継 -Sass (SCSS) や Less のコンパイル、Minify（圧縮）をVS上で行うための拡張機能 ***Npm Task Runner / Command Line Execution [#yccaff99] -NPM / パッケージ管理サポート -package.json に書かれたスクリプト（npm run dev や build）を、VSの「タスク ランナー エクスプローラー」からGUIで直接実行・管理 ***JavaScript/TypeScript Linting [#o8be8d61] -コードの品質管理（Linter） -ESLint や Prettier の設定を検知し、VSのエディタ上にリアルタイムでエラーや警告を表示 *参考 [#g2844d12] -Web Essentials for Visual Studio~ http://vswebessentials.com/ -Web Extension Pack 2015 - Visual Studio Marketplace~ https://marketplace.visualstudio.com/items?itemName=MadsKristensen.WebExtensionPack **miso_soup3 Blog [#sf27d50f] -VS2015 拡張機能による JS/CSS/LESS 等の Bundle, Minify, Compile について~ http://miso-soup3.hateblo.jp/entry/2015/08/24/221113 -Visual Studio 拡張機能、Web Extension Pack リスト~ http://miso-soup3.hateblo.jp/entry/2016/01/08/172329 -Web Extension Pack 2017 から Web Essentials 2017 へ~ http://miso-soup3.hateblo.jp/entry/2017/03/18/153445 **Webサイト作成の迷い道 [#w2897988] -Visual Studioに、Web EssentialsとWebテンプレートをインストールする~ http://webdesign.vdlz.xyz/Editor/WebEssentials/Setting/InstallAndSetting.html -Visual Studio 2017にWeb Essentials 2017を導入する~ http://webdesign.vdlz.xyz/Editor/WebEssentials/Setting/WEinVS2017.html **CodeZine（コードジン） [#l1ffed1b] -拡張機能を利用してVisual Studioをより便利にしよう (3/6)~ https://codezine.jp/article/detail/8318?p=3 --JavaScriptエディターのサポート --CSSエディターのサポート **THE TRUTH IS OUT THERE [#mbd99d06] -Visual Studio 2012 拡張機能 Web Essentials 2012 を使おう！~ https://blogs.msdn.microsoft.com/chack/2012/12/19/visual-studio-2012-web-essentials-2012/ -Web Essentials の Visual Studio 2013 ブラウザー リンク拡張機能~ https://blogs.msdn.microsoft.com/chack/2013/12/24/web-essentials-visual-studio-2013/ ---- Tags: [[:.NET開発]], [[:ASP.NET]], [[:ASP.NET Web API]], [[:ASP.NET SPA]], [[:JavaScript]]
