Статьи

Visual Studio 2013 & Web Essentials 2013- гибкое интегрированное решение

12.08.2014

/

Web-разработчики используют разные инструменты для оптимизации своей работы. Одним из самых известных является Web Essentials 2013 для Visual Studio.

Рассмотрим некоторые интересные возможности, которые помогают web -разработчику выполнить стандартные действия и ускорить написание кода:

1. Работа с HTML

Intellisense

Удобное автодополнение по элементам HTML, в том числе и новые элементы стандарта HTML 5: <section>, <aside>, и многие другие. Список автодополнения складывается из уже использованных классов и ID.

ZenCoding

Поддержка ZenCoding позволяет генерировать блоки HTML-разметки с помощью небольших выражений. К примеру, набрав «section#main>h1+ul>li*3» и нажав Tab будет сгенерирован блок кода:

2. Работа с CSS

Генерация префиксных свойств

При написании стилей необходимо учитывать кроссбраузерную специфику. Новые свойства, добавленные стандартом CSS 3 при применении «префиксных свойств», обеспечивают совместимость с выпущенными ранее версиями браузеров. Вендорные префиксы выполняются только поддерживающими их браузерами (-moz (Mozilla Firefox), -webkit (Safari и Google Chrome), -ms (Internet Explorer), –o (Opera)). Web Essentials 2013 предоставляет удобный функционал для добавления и более широкого охвата версий браузеров, а также уведомляет об упущенных префиксных свойствах:

В результате достаточно написать лишь стандартизированное свойство CSS 3, а необходимые префиксные правила сгенерировать в один клик.

В случае, когда указано лишь префиксное свойство Web Essentials предлагает добавить стандартную реализацию.

Web Essentials 2013 также облегчают работу с оригинальными и префиксными свойствами. Изменение одного из них моментально обновит значения остальных связанных свойств.

Работа с изображениями в проекте

Web Essentials 2013 предоставляет удобные возможности по работе с изображениями проекта. Например, возможность конвертирования в формат base64. Для небольших изображений такая конвертация ускоряет загрузку и избавляет от лишнего запроса к серверу.

Любое изображение, указанное в стиле, можно просмотреть, наведя курсор на адрес. Предварительный просмотр также возможен и для изображений в формате base64.

Визуальные подсказки в Visual Studio

Для свойств указываются совместимые с ним версии браузеров.

Все используемые цвета в свойствах получают стилистическую подсветку, а также возможность выбора цвета из палитры.

Поддержка JSHint

JSHint – это Open Source проект, призванный помогать разработчикам в написании хорошего и качественного кода. Следование его принципам позволит избежать случаев, когда в некоторых неочевидных ситуациях выполнение кода может пойти иначе от запланированного разработчиком, избежать слабо выявляемых ошибок и избавиться от потенциальных проблем.

Например, указание переменной без ключевого слова “var” выполнит её объявление в глобальном контексте, а, значит ненамеренный доступ к коду может изменить логику поведения и нарушить работоспособность приложения.

Многие известные компании Mozilla, Facebook, Twitter, Bootstrap, Yahoo!, jQuery придерживаются рекомендаций инструмента JSHint для совершенствования своих программных продуктов.