Javascript Parser Extension для VisualStudio

Эта статья будет полезна разработчикам, которые используют Visual Studio для работы с JavaScript. Для ознакомления предлагается плагин для Visual Studio — Javascript Parser Extension. Поддерживаются версии VS2008, 2010, 2011. Проект с открытым исходным кодом, хостится на Google Code, также опубликован в Visual Studio Gallery.

Данный плагин призван помочь в работе с большими запутанными участками JavaScript кода, которые часто «достаются в наследство» и навигация по которым довольно утомительна. Также плагин удобен для использования и с новым кодом, в процессе разработки, если объём файла получается значительным.

Основная функциональность состоит в построении дерева функций и отображения его в удобном виде в виде панели Visual Studio. При клике на название функции осуществляется навигация в начало декларации. Также показываются комментарии к функции в виде всплывающей подсказки. Существует возможность добавлять «метки» на функции в виде 6-ти различных флажков. Шрифт и цвет помеченных функций может настраиваться дополнительно. Это очень удобно — требующие внимания функции будут сразу бросаться в глаза.

Также очень полезной является автоматическая проверка синтаксиса, ошибки найденные анализатором показываются в удобном и довольно заметном виде. Существует возможность быстрого перемещения на место ошибки. Это позволяет быстро выявлять проблемные места, где находится, к примеру, лишняя запятая или скобка.
Скриншот:
image

Подробный список функциональности:
  • Дерево функций для быстрой навигации.
  • Поддержка inline скрипта в тегах script.
  • Метки – доступны в контекстном меню дерева. Сохраняются при перезагрузке студии.
  • Выделение активной функции в дереве – там, где находится курсор.
  • Панель Task List – показывает список TODO комментариев, с возможностью быстрой навигации.
  • Поиск по имени нужной функции в файле. Основная фича – поддержка стиля Pascal и Camel, позволяет искать по первым буквам составного имени, например поиск «SP» выдаст setPage, SetPosition. Имеется возможность настроить хоткей для вызова поиска, “Tools>Options>Environment>Keyboard” команда “View.JavascriptParserFind”.
  • Сортировка дерева по алфавиту.
  • Включение\выключение иерархии в дереве.
  • Включение\выключение номеров строк в дереве.
  • Фильтрация дерева по меткам – показывает только помеченные узлы.
  • Фильтрация анонимных функций – можно их выключить, если мозолят глаза.
  • Настройка анализируемых расширений файлов – можно включить для всех, а можно и добавить в список свое экзотическое расширение типа php.
  • Анализатор довольно успешно справляется с практически любым скриптом, показывает и анонимные и самовызывающиеся функции.

Установка плагина в VS2010/2011 доступна через Extension Manager в меню Tools. Также на сайте проекта можно найти все версии, включая VS2008.
Для того чтобы открыть панель плагина нужно ее найти в меню студии: ”View>Other Windows>Javascript Parser”. Вся функциональность довольно легко обнаружима при изучении верхнего меню панели. Там же, в верхнем меню есть ссылка на окно настроек.


В VS2010/2011 окно с настройками плагина также интегрировано в общие настройки студии.


Плагин уже довольно давно опубликован в Visual Studio Gallery, собрал неплохие оценки и отзывы. Публикация на хабре преследует цели привлечь внимание к новой версии 3.4, расширить аудиторию и получить больше отзывов. Конструктивная критика и пожелания приветствуются.
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 19

    0
    Спасает дело, но к сожалению, а может и к счастью, на данный момент ничего лучше JetBrains WebStorm — нет. Поправьте, если я не прав.
      0
      Sumlime Text 2 лучше
        0
        Sublime*
          +3
          Поправляю, вы абсолютно не правы.
          На данный момент лучше всего Visual Studio 2011 (да, она ещё не вышла)



          VS 2010, чуть хуже справляется чем 2011, там проблема в определении объекта в замыкании.
          Даже WST в Eclipse справляется лучше, чем Web/PHPShtorm
            +1
            Кстати, использовал WebShtorm 3.0.2 от 7 февраля 12 года и Visual Studio 2011
            И, вот текст этого небольшого тестика, если плохо видно: pastebin.com/f0JKgkzS
              0
              Ну, отлично. Пусть скорее выходит — будем пользоваться!

              Не радует только, что все равно нет поддержки SASS/LESS.
              0
              Согласен про 2011, хоть и только DP — но уже намного лучше 2010 и реальный конкурент WebStorm

              А SaSS/LESS через плагины
            0
            Отличный плагин. Давно пользуюсь
              0
              Спасибо за плагин!
              интересно узнать: как делали парсер?
                0
                Используется библиотека Microsoft.JScript.Compiler.dll.
                Там есть готовый парсер который предоставляет итератор по всем выражениям в файле. Основная сложность была в использовании этого итератора, чтобы в итоге собрать информативное дерево с функциями.
                0
                А там есть встроенная поддержка jQuery?
                  0
                  Перефразируйте вопрос, непонятно что вы имеете в виду.
                    0
                    Имеется ввиду, если я наберу $(".class).h — он выдаст подсказку?
                      0
                      этим заведует сама студия. для jQuery существуют отдельные файлы с расширением .vsdoc, предоставляющие описание.
                        0
                        А поподробнее можно? Как конкретно включить нормальную поддержку jQuery в Visual Studio 2011?
                          0
                          в смысле *-vsdoc.js файлы )
                          в 2011 не скажу, ибо только открывал примеры с metro-приложениями.
                          а вот 2010 — должно подхватится само. если нет, то вместо самого jquery, подключаем jquery-vsdoc.js
                            0
                            Конечно же я имел ввиду 2010 =))

                            Мне просто интересно, если я просто открою js-файл в VS, то никакой поддержки jQ не будет?
                              0
                              будет :)
                              для этого необходимо в начале js-файла вставить:

                              /// <reference path="jquery-1.6.4.js" />
                              


                              где path — пусть до самой библиотеки.
                  0
                  Спасибо за тул и последнее обновление с поддержкой VS2015 и ES6.

                  Only users with full accounts can post comments. Log in, please.