|
|
|||||||||||||||||||||||||||||
|
Расширение Web Essentials для Visual Studio: LESS, Zen Coding, CoffeeScript и многое другоеИсточник: habrahabr WizardBox
Visual Studio - поистине потрясающий инструмент для разработки приложений вообще (чувствуете всю маркетинговую мощь этой фразы?) и web-разработки в частности. Но сила Visual Studio не только в возможностях, которые в ней есть "из коробки", но и в наличии тысяч полезных расширений. Одним из моих любимых расширений, которое добавляет поддержку LESS, Zen Coding и CoffeeScript, а также содержит множество других возможностей, является расширение Web Essentials 2012 (скачать), о котором мы и поговорим в данной статье. Не смотря на то, что цикл выпуска обновлений для Visual Studio 2012 короче, чем для предыдущих версий, а первое крупное обновление уже доступно, нам, как разработчикам, обычно, хочется получать новые полезные возможности как можно раньше. И расширение Web Essentials позволяет это делать. Но перейдём к самим возможностям Web Essentials.
Работа с CSSВ первую очередь я бы хотел отметить, что с Web Essentials действительно удобно работать с CSS стилями. Как пример такого удобства можно привести работу с вендорными префиксами. Вендорные префиксы - это приставки к названияю CSS свойств, которые добавляются производителями браузеров для нестандратных свойств. Примеры вендорных префиксов: -moz, -ms, -webkit и -o. Часто производители браузеров сначала реализуют новое CSS свойство с вендорным префиксом, а потом, после стандартизации свойства, добавляют его поддержу уже без префикса. Поэтому могут возникать ситуации, когда вам надо указать одно и то же свойство несколько раз с разными вендорными префиксами для разных браузеров, а также, возможно, и в варианте без префикса. Например, сейчас все современные браузеры поддерживают свойство word-wrap. И мы можем его использовать напрямую:
Но так было не всегда. В IE8 такой код работать не будет, хотя IE8 и поддерживает возможности, предоставляемые свойством word-wrap. Для данной версии браузера необходимо указать свойство word-wrap с вендорным префиксом: -ms-word-wrap.
Об этом легко забыть. Web Essentials позволяют добавлять пропущенные, но всё таки нужные, свойства с вендорными префиксами, причем база CSS свойств обновляется автоматически и вам не надо запоминать какие вендорные префиксы необходимо использовать.
Такой код будет работать только в Firefox. И это очень плохо. С помощью Web Essentials вы узнаете, что необходимо добавить стандартное свойство transform, а также свойства с вендорными префиксами для других браузеров.
Кроме того, вы сможете узнать какое свойство какими версиями браузеров используется. Так, transform со значением rotate(<угол>) работает с Firefox 16, IE10 и Opera 12.5. Работать с отдельными CSS стилями и свойствами просто. Но в большом CSS файле бывает трудно найти все проблемы, если проблемные места просто подчеркнуты волнистой линией. Поэтому Web Essentials позволяют увидеть все проблемы одним списком.
Допустим в вашем проекте есть изображение, вставленное ссылкой на файл:
С помощью Web Essentials это изображение в один клик кодируется в base64 и преобразуется в следующий CSS код:
Заметьте, что при этом учитываются вопросы совместимости с ранними версиями Internet Explorer. Выше были рассмотрены только некоторые из возможностей Web Essentials по работе с CSS. Чтобы не перегружать статью оставлю читателю на самостоятельное ознакомление такие возможности, как поддержка стилизации полос прокрутки для iOS, работу с CSS3 анимацией, подсветку цветов (см. рисунок) и т.д.
Поддержка LESSLESS - это язык, расширяющий CSS и поддерживающий такие возможности как переменные, примешивания (mixins), операции и функции. На Хабре есть хорошая статья про LESS. Не буду повторять её тут. Web Essentials добавляет в Visual Studio полнофункциональный редактор LESS файлов с подсветкой синтаксиса и поддержкой IntelliScence. LESS файлы будут автоматически компилироваться в CSS, генерируя при этом и минифицированную версию CSS файлов. Кроме того при редактировании LESS файлов в окне предпросмотра отображается генерируемый CSS. Приведу пример LESS кода, содержащего переменную и миксин (mixin, перемешивание):
Из данного кода будут сгенерированы следующие CSS стили:
Поддержка CoffeeScriptТакже Web Essentials добавляют поддержку языка CoffeeScript, который является одной из альтернатив JavaScript и в этот самый JavaScript компилируется. Поддерживается редактор кода с подсветкой синтаксиса и осуществляется автоматическая компиляция в JavaScript с генерацией в том числе минифицированной версии. CoffeeScript является очень мощным языком, хотя лично мне, как человеку, который привык к синтаксису C#, а не Ruby (для любителей Ruby CoffeeScript подходит идеально) больше нравится язык TypeScript от Microsoft, для поддержки которого в Visual Studio надо установить официальные инструменты разработки (а Web Essentials просто улучшает работу с TypeScript).
ZenCoding для HTMLКак и LESS, ZenCoding уже обсуждался на Хабре. ZenCoding - это инструмент, позволяющий быстрее создавать в данном случае HTML разметку. Достигается это благодаря тому, что можно написать относительно простую строку для ZenCoding, которая потом преобразуется в сложную HTML разметку. Например, в HTML редакторе в Visual Studio можно ввести:
После этого надо нажать клавишу Tab. И сгенерируется следующая HTML разметка:
Больше узнать о ZenCoding можно из видео.
Минификация стилей и скриптов, создание бандловWeb Essentials позволяют минифицировать CSS и JavaScript файлы. Для этого необходимо в контекстном меню файла(ов) в окне Solution Explorer выбрать Web Essentials / Minify CSS file(s) или Minify JavaScript file(s). При этом при изменении исходного файла минифицированный файл будет автоматически перегенерироваться. Также с помощью Web Essentials можно создавать бандлы из нескольких файлов. Для бандла автоматически генерируется минифицированная версия. При изменении одного из исходных файлов, входящих в банлд, сам бандл и его минифицированная версия автоматически перегенерируется.
JSHint для JavaScriptРазрабатывать приложения на JavaScript достаточно сложно. Для того, чтобы при разработке приложений было легче следовать лучшим практикам существуют такие инструменты, как JSHint. JSHint находит ошибки и потенциальные проблемы в JavaScript коде, а также показывает несоответствия принятым конвенциям. Web Essentials добавляет поддержку JSHint в Visual Studio. Для запуска JSHint выберите в контекстном меню JavaScript файла в окне Solution Explorer опцию Web Essentials / Run JSHint. После этого в окне Error List отобразятся все найденные проблемы.
ИтогиМы рассмотрели только часть возможностей Web Essentials 2012. Но даже из такого небольшого обзора видно насколько мощным является данное расширение. Мы не покрыли многие темы, например хотелось бы более детально рассказать про работу с TypeScript - новым языком от Microsoft, который компилируется в JavaScript и поддерживает статическую типизацию, классы, модули и интерфейсы. Буду безмерно рад, если вы установите Web Essentials и попробуете рассмотренные выше, а также не рассмотренные, но безусловно полезные возможности самостоятельно! Данное расширение действительно помогает при разработке web приложений, попробуйте! Ссылки по теме
|
|