клієнтська оптимізація

Одним з найбільш істотних нововведень для веб-розробників в Visual Studio 2013 став новий HTML-редактор. На відміну від старого редактора, який вдавав із себе суміш з керованого і некерованого коду (і навіть використовував деякі компоненти FrontPage), новий редактор був повністю переписаний на керованому коді (в якості основи використовувався HTML-редактор з WebMatrix).

Крім поліпшених засобів для роботи з HTML-кодом, в новому редакторі також реалізована підтримка синтаксису уявлень KnockoutJS , AngularJS і Handlebars , І IntelliSense для спеціальних префіксів і META-тегів (Facebook, Twitter, Open Graph, Windows Phone, iOS і ін.).

На жаль, не кожна новинка зі світу веб-розробки може потрапити в Visual Studio в силу наступних причин:

1. Багато сучасних веб-технології та бібліотеки є Open Source-проектами (наприклад, компілятори LESS і CoffeeScript , верифікатор JSHint і т.д.), і деякі з цих проектів мають ліцензії, які не дозволяють включати їх до складу комерційних продуктів.
2. Зараз веб-технології розвиваються настільки швидко, що їх підтримка засобами розробки може стати неактуальною протягом одного тижня. Тому ні часті релізи Visual Studio (зараз період між релізами скоротився з двох років до одного року), ні періодичні оновлення не дозволяють підтримувати Visual Studio в повністю актуальному стані.

Для того, щоб вирішити перераховані вище проблеми співробітником компанії Microsoft Медсен Кристенсеном було створено VS-розширення Web Essentials . Вихідний код Web Essentials опублікований на GitHub (доступні 2 версії: 2012 і 2013 ).

Нижче перераховані додаткові можливості HTML-редактора з Visual Studio 2013, які стають доступними після установки Web Essentials 2013:

1. підтримка Zen Coding (Більш детальну інформацію про використання Zen Coding в Web Essentials можна прочитати в статті Джона Папа «Zen Coding in Visual Studio 2012» ) І генератор тексту-«риби» Lorem Ipsum (наприклад, якщо ввести lorem10 і натиснути клавішу TAB, то в код будуть вставлені 10 слів з трактату Цицерона «Про межі добра і зла»).
2. Команда Go To Definition для тегів <a>, <style> і <script>.
3. HTML-мінімізація виділеного фрагмента коду.
4. Підтримка HTML-регіонів (наприклад, <! - # region main -> Якийсь код ... <! - # endregion ->).

Оскільки HTML-мінімізація в Web Essentials 2013 була реалізована засобами бібліотеки WebMarkupMin , Автором якої я є, то в цій статті ми розглянемо цю можливість більш детально.

Тег «Далі»