Главная > .NET, JavaScript > Облегчаем работу с JS- и CSS-кодом в Visual Studio

Облегчаем работу с JS- и CSS-кодом в Visual Studio

С появлением AJAX и веб-приложений подобных Gmail значительная часть логики и пользовательского интерфейса приложения стала реализовываться на JavaScript. Популярность семантической HTML-верстки способствовала тому, что роль CSS в создании пользовательского интерфейса веб-приложений серьезно возросла. В настоящее время, практически любое веб-приложение среднего размера содержит десятки JS- и CSS-файлов, в коде которых со временем становится трудно ориентироваться.

Уже в Visual Studio 2008 были внесены кардинальные изменения в редакторы JavaScript- и CSS-кода, направленные на увеличение продуктивности работы веб-разработчика. В данной статье я расскажу о способах, с помощью которых можно сделать работу в этих редакторах еще более продуктивной.

Включаем поддержку IntelliSense для библиотек, используемых в JS-файлах

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

Начиная с Visual Studio 2008, в редактор JS-кода была добавлена поддержка документирующих комментариев JavaScript во многом похожих на документирующие комментарии XML в C#. Помимо стандартных документирующих тэгов (<summary>, <param>, <returns> и <value>) в набор документирующих комментариев JavaScript был включен тэг <reference>. Данный тэг позволяет добавить в JS-файл ссылку на библиотеку, которая находится в другом внешнем JS-файле, и тем самым сообщить Visual Studio о необходимости включения поддержки IntelliSense для данной библиотеки:

/// <reference path="MyScript.js" />


Рис. 1.1. Пример использования тэгов <reference> для добавления ссылок на библиотеки


Рис. 1.2. Поддержка IntelliSense для jQuery-плагинов, подключенных с помощью тэгов <reference>

Также можно ссылаться на скрипты, размещенные в сборках как встроенные ресурсы:

/// <reference name="MyEmbeddedScript.js" />
/// <reference name="MyEmbeddedScript.js" assembly="MyAssembly" />

При использовании тэгов <reference> нужно учитывать следующие моменты:

  1. Объявление тэгов <reference> должно предшествовать любому другому содержимому (даже обычным комментариям)
  2. Ссылки на библиотеки должны быть объявлены в порядке зависимости, т.е. ссылки на базовые библиотеки должны находиться выше
  3. При указании расположения файла библиотеки можно использовать пути относительно корня приложения (начинаются с «~/»)
  4. При указании ссылок на MicrosoftAjax.js, MicrosoftMvcAjax.js и MicrosoftMvcValidation.js можно не использовать имена файлов вида MicrosoftAjax.debug.js. Среда разработки сама найдет debug-версию библиотеки.
  5. Visual Studio поддерживает добавление ссылок на библиотеки путем простого перетаскивания JS-файла из Solution Explorer в окно редактора JavaScript-кода

Разбиваем код на регионы

Очень часто количество строк кода в одном файле становится настолько большим, что в нем становится сложно ориентироваться (особенно это характерно для CSS-файлов). Такой файл можно разделить на несколько отдельных файлов, но не всегда такой подход уместен. В некоторых случаях код лучше разделить на регионы, которые можно сворачивать/разворачивать (как в C# при использовании директив #region и #endregion).

Текущие версии Visual Studio не поддерживают такую возможность, но ее можно добавить, если установить VS-расширение VisualStudio 2010 JavaScript & CSS Outlining, разработанное Велио Ивановым (Velio Ivanov).

Для JavaScript существует 2 варианта написания директив начала и окончания региона:

//#region Вариант 1//#endregion

или

//#> Вариант 2//#<


Рис. 2.1. Пример использования регионов в JavaScript

Для CSS также существует 2 варианта написания:

/*#region Вариант 1 *//*#endregion*/

или

/*#> Вариант 2 *//*#<*/


Рис. 2.2. Пример использования регионов в CSS

Рекомендую в CSS-коде использовать первый вариант написания региона, т.к. этот синтаксис поддерживает CSS-редактор из Visual Studio 11 Developer Preview. Возможности CSS-редактора из новой студии подробно описаны в статье Дмитрия Андреева «Новые возможности редактора CSS в Visual Studio 11 Developer Preview».

Текущая версия VisualStudio 2010 JavaScript & CSS Outlining, имеющая номер 2.0, у меня работала с ошибками, поэтому я рекомендую пока использовать версию 1.2. Единственное отличие версии 2.0 от 1.2 заключается в том, что новая версия поддерживает 2 дополнительных варианта написания регионов в JavaScript (с использованием многострочных комментариев).

Источники информации:

Реклама
  1. Alex
    23.10.2012 в 08:11

    Хорошее расширение.
    Очень удобно, когда код разбит на регионы, которые при необходимости можно сворачивать.
    Но…
    К сожалению, глючит не только версия 2. Версия 1.2 у меня конфликтует с расширением Javascript Parser (Парсер отказывается парсить и выдает вместо этого ошибки). А оно для меня важнее, чем это. Пришлось от использования регионов отказаться.
    Работаю на лицензионной Visual Studio 2010 Ultimate.

  2. Alex
    05.11.2012 в 13:20

    Большое спасибо!
    JSEnhancements не конфликтует с с расширением Javascript Parser и отлично работает.
    Работать стало удобнее.

  1. 26.01.2012 в 21:15

Добавить комментарий

Заполните поля или щелкните по значку, чтобы оставить свой комментарий:

Логотип WordPress.com

Для комментария используется ваша учётная запись WordPress.com. Выход / Изменить )

Фотография Twitter

Для комментария используется ваша учётная запись Twitter. Выход / Изменить )

Фотография Facebook

Для комментария используется ваша учётная запись Facebook. Выход / Изменить )

Google+ photo

Для комментария используется ваша учётная запись Google+. Выход / Изменить )

Connecting to %s

%d такие блоггеры, как: