Эффективная веб-разработка c Visual Studio 2012: нововведения в редакторы HTML/CSS и JavaScript

Новая версия Visual Studio 2012 предлагает значительное число нововведений в редакторы HTML/CSS/JavaScript. В этом обзоре я расскажу про основные нововведения, которые позволят веб-разработчикам писать код более быстро, удобнее и эффективнее.

Редактирование HTML5

Visual Studio 2012 полностью поддерживает HTML5 и все новые теги, которые предлагает новый стандарт. Это означает, что разработчики получают автодополнение новых тегов в редакторе (рисунок 1).

Рис.1. Автодополнение HTML5-тегов

Это так же означает встроенную поддержку валидации HTML5-кода в редакторе. Кроме того, для многих тегов механизм автодополнения создает кроссбраузерный код, например, автодополнение <video> на рисунке 1 приведет к автоматической генерации следующего кода (рисунок 2).


Рис.2. Кроссбраузерный код автодополнения

Это покажется мелочью, но именно такие мелочи делают работу удобнее. В Visual Studio 2012 появилась поддержка синхронного редактирования открываемых и закрываемых тегов (рисунок 3).

Рис.3. Синхронное изменение открываемых и закрываемых тегов

Работа с CSS

Редактор CSS также получил большую порцию нововведений. Одной из таких новых полезных возможностей является автодополнение CSS-свойств по начальным буквам (рисунок 4).

Рис.4. Автодополнение CSS-свойств по начальным буквам

В Visual Studio 2012 введено автоформатирование отступов иерархии CSS-классов, так что вложенные классы получают больший отступ (рисунок 5).

Рис.5. Автоотступы CSS-классов

Этот функционал может понравится не всем, поэтому такое форматирование по умолчанию отключается в настройках.

Ранее редактор Visual Studio при валидации кода не понимал некоторые специальные хаки разработчиков, в связи с чем у вас в проекте могли появляться ошибки и предупреждения. В Visual Studio 2012 многие подобные хаки учитываются и редактор не считает из за ошибки (рисунок 6).

Рис.6. Поддержка хаков

Еще одной новой полезной возможностью стала встроенная поддержка CSS-свойств с вендор-префиксами (рисунок 7).

Рис.7. Поддержка вендор-префиксов

Поддерживаются префиксы -o-, -moz-, -ms-, -webkit-. Эта поддержка пошла еще дальше и в функции автодополнения кода так же предлагается автогенерация CSS-свойств с вендор-префиксами (рисунок 8).

Рис.8. Автодополнения CSS-свойства с генерацией кроссбраузерного кода с вендор-префиксами

Некоторые из подобных CSS-свойств поддерживают параметры (рисунок 9) и Visual Studio 2012 предлагает сниппеты для удобного их заполнения (рисунок 9).

Рис.9. Автодополнение CSS-свойств с параметрами

Еще одной полезной функцией нового CSS-редактора Visual Studio 2012 стала поддержка color picker с автоматическим определением списка цветов определенных в текущем CSS-файле (рисунок 10).

Рис.10. Color picker в Visual Studio 2012По умолчанию color picker свернут и предлагает для выбора только список определенных в цветов в текущем файле. Но его можно развернуть и быстро выбрать любой другой цвет.

Новой полезной возможностью CSS-редактора стала поддержка регионов, которая ранее была в других языках, например C# (рисунок 11).

Рис.11. Регионы в CSS-редакторе Visual Studio 2012Как и в других языках, регионы CSS предназначены для определения области кода, которую вы можете назвать и свернуть для экономии места.

Работа с JavaScript

В редакторе JavaScript тоже появилась долгожданная поддержка outline для всех функций (рисунок 12).

Рис.12. Outline в коде JavaScript

Это позволяет сворачивать определения функций внутри кода для лучшей читаемости всего файла.

Приятная мелочь редактора JavaScript - подсветка завершающей кавычки.

Еще одна долгожданная функция для редактора JavaScript - "Go to Definition", которая позволяет перейти из любой точки кода к определению указанного элемента.

Работа Go to Defintition стала возможной благодаря тому, что внутренности редактора JavaScript были полностью переписаны. Это позволило добавить полную поддержку ECMAScript5 и гораздо более мощный IntelliSense для DOM-элементов и новых тегов HTML5. Например, <canvas> (рисунок 13).

Рис.13. Поддержка IntelliSense в JavaScript и DOM с поддержкой HTML5

Конечно, любое автодополнение и IntelliSense в Visual Studio 2012 сопровождается контекстной подсказкой по параметрам выбранного свойства или метода.

Заключение

В Visual Studio 2012 добавлено много улучшений, как совсем небольших так и более крупных для удобного редактирования HTML/CSS/JavaScript-кода веб-приложений. Ранее, для подобного функционала приходилось устанавливать сторонние расширения, теперь такой надобности нет.

Переписанный заново редактор JavaScript теперь предлагает гораздо более мощную поддержку IntelliSense, что позволяет очень эффективно работать с JS-кодом.