Пользователь
0,0
рейтинг
22 ноября 2013 в 04:15

Разработка → Расширение Node.js Tools для Visual Studio перевод tutorial

Как бы это странно не звучало, но компания Microsoft официально представила расширение Node.js Tools для Visual Studio!

Node.js Tools для Visual StudioРасширение NTVS предназначено для установки в Visual Studio версии 2012 и 2013. Проект имеет довольно занимательную историю своего появления. Несколько поклонников node.js практически одновременно начали разработку своих собственных расширений на базе проекта PTVS с целью создания расширения Node.js Tools для Visual Studio. В то же самое время команда разработчиков PTVS также выполняла работу по интеграции с node.js, попутно объединяя усилия сторонних разработчиков, что в итоге и привело к формированию сообщества проекта. Основные усилия при создании NTVS были приложены командой PTVS при содействии Барта Рида из Red Gate, разработавшего GUI для npm, и Дмитрия Третьякова из Clickberry, выполнившего работы по усовершенствованию отладчика и исправлению дефектов.

NTVS является проектом с открытым исходным кодом, с самого начала принимающим вклад со стороны сообщества. На текущий момент расширение предоставляет средства для удобного редактирования кода, intellisense, профилирования, npm, локальной и удалённой откладки приложений (на машинах под управлением Windows/MacOS/Linux), а также публикации в Azure Веб-сайты и Облачные службы.

Но гораздо интересней посмотреть на всё это в действии, так что не упускайте момент — загружайте и экспериментируйте! Только обратите внимание, что некоторые функции могут работать непривычным образом, поскольку проект всё ещё находится в состоянии альфа версии.

Пустое приложение Express

NTVS использует средства профилирования V8 и Visual Studio Profiling Tools для удобного анализа производительности node.js приложений.

Примечание: Затрудняетесь с выбором шаблона в диалоге New Project? Visual Studio выполняет их группировку в зависимости от языка, поэтому шаблоны node.js расположены в категории JavaScript. Также здесь вы можете найти шаблоны Python и Django, iOS и Android на C#, TypeScript, VB, F# и многие другие.

Одна из отличительных особенностей NTVS — это то, что не меняется привычный подход к разработке проектов в Visual Studio. Вы просто работаете с node.js проектом, который запускается при помощи node.exe, использует обычный отладчик и профилировщик V8. Но при всём при этом крайне удобно, что NTVS представляет данные профилировщика V8 в привычном интерфейсе Visual Studio Profiling Tools. Не нужно изобретать велосипед — используется уже готовый инструмент.

Исследуем блог Ghost при помощи Node.js Tools для Visual Studio


Рассмотрим работу расширения на следующем примере.


В окне Visual Studio перейдём в File | New Project, выделим категорию JavaScript и нажмём «From Existing Node.js code».

Из существующего исходного кода

Укажем в окне NTVS путь к папке Ghost.

Создание из существующего исходного кода

Затем укажем в NTVS, что стартовым является файл index.js, нажмём Next и сохраним проект, нажав Finish.

Создание проекта из существующего кода

Всё готово — мы получили проект Ghost в Visual Studio.

Примечание: поскольку в Visual Studio установлено расширение Web Essentials, то на скриншоте мы видим удобный редактор markdown разметки.

Сейчас вы можете нажать F5 для отладки или Ctrl-F5 для запуска без отладки. Обратите внимание, что в свойствах проекта может быть изменён путь и порт отладки node.js, а также стартовый файл.

Ghost в Visual Studio с NTVS

На следующем изображении вы можете увидеть Ghost, запущенный локально. Кроме того, вы видите путь к запущенному процессу node.js, файл ghost.js и окно браузера.

Запуск Ghost в VS с NTVS

После установки NTVS становится доступен Intellisense с подробной информацией о большинстве модулей node.js.

Пример Intellisense

Отладка


NTVS включает полноценную отладку node.js приложения. В список функций входит пошаговая отладка, точки останова, остановка при возникновении исключений, а также окна Locals, Watch, Immediate и Call Stack.

Вы можете управлять исключениями как и в любом другом языке Visual Studio. На следующем изображении приведён список исключений node.js совместно с другими типами исключений в управляемом и неуправляемом коде.

Управление исключениями в NTVS

Отладка приложений выполняется традиционным для node.js способом, за исключением того, что Visual Studio подключается к отладчику V8 через отдельный сокет (не забывайте, что вы можете выполнять удалённую отладку node.js приложений, запущенных на Linux или Mac). Все остальные приёмы отладки выполняются посредством обычных элементов управления Visual Studio.

На следующем изображении запечатлён процесс отладки Ghost. Обратите внимание на окна Call Stack, Locals и Watch. Во время отладки вы можете просматривать значения переменных и выполнять шаги как и в обычном веб приложении.

Отладка Ghost в VS с Node Tools for Visual Studio

NPM для Visual Studio


Для удобства работы с npm в NTVS использовано множество средств, включающих в том числе и слежение за файловой системой проекта. Таким образом, вы можете запустить npm как из командной строки, так и из окна Immediate, а Visual Studio отследит изменения.

Кроме того, вы можете воспользоваться диалогом NPM Package Management для поиска по репозиторию и установки пакетов.

Управление пакетами в npm package management в VS

И непосредственно процесс установки пакета…

Установка модуля

Вместо папки node_modules и файлов модулей мы видим красивую иерархию узлов в Solution Explorer.

Модули в Solution Explorer

Примечание: мне нравится этот подход. У него есть потенциал, а визуализация модулей по аналогии с ссылками в .NET проектах упрощает понимание зависимостей.

Также здесь есть и другие интересные компоненты. Например, интерактивное окно REPL, традиционный для веб приложений мастер публикации, знакомый разработчикам ASP.NET. Вы можете публиковать приложения в Azure как при помощи Git, так и посредством мастера публикации Visual Studio.

Кроме того, вы можете выполнять удалённую отладку node.js, запущенного с параметрами удалённой отладки на другой машине.

Удалённая отладка приложение node.js

node.exe RemoteDebug.js -machineport 5860 script.js

В очередной раз отметим, что удалённая отладка приложений в Visual Studio доступна для node.js, запущенного на любой серверной ОС.

Заключение


Я впечатлён тем, насколько интенсивно развивается Visual Studio и превращается в удобную и современную среду разработки.

Node.js Tools для Visual Studio — проект с открытым исходным кодом, распространяющийся по лицензии Apache. Команда NTVS с нетерпением ждёт обратной связи от сообщества в виде замечаний, предложений и отчётов об ошибках. Пока доступна альфа версия, но со временем NTVS станет ещё лучше. Посмотрите на него собственными глазами. Большое спасибо всем участникам проекта!
Перевод: Scott Hanselman
Dmitry Tretyakov @dtretyakov
карма
5,0
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (15)

  • +1
    Выглядит впечатляюще, но для меня попытки работы в VS (над фронтендом в .NET проекте) заканчивались раздражением и плевками в сторону Майкрософт, Винды и VS в частности и переходом обратно на Sublime Text.
    Конечно, всё субъективно, но для меня среда разработки не может быть удобной, если в ней есть огромное количество панелей с ещё большим количеством различных кнопочек с иконками, какими-то селектами и т.д. и т.п.

    То есть, обобщая: движок у VS шикарный, а вот интерфейс просто ужас, по-моему.
    • 0
      Это, действительно, реальная проблема для людей не привыкших к VS — которых особенно много среди нашей целевой аудитории — и мы над ней думаем.

      Вообще, интерфейс в VS можно довольно гибко настраивать. Скрытие тулбаров по right-click на ним — это достаточно стандартная вещь, но можно также индивидуально скрывать команды, причем не только на тулбарах, но и на главном меню — это все живет в Tools -> Customize. Т.е. при желании можно очень сильно упростить интерфейс под себя. Причем это можно сохранить через Tools -> Import and Export Settings, и потом таскать с собой на новые машины.

      Так вот, мысль состоит в том, чтобы сделать упрощенные профили под Python и Node разработчиков из коробки — убрать все, не относящиеся к делу менюшки и тулбары, и так далее. Нечто, что было бы как минимум «good enough» для большинства людей, привыкших к SlickEdit, Sublime и т.д.
    • 0
      У меня, честно говоря, противоположные ощущения. После VS, интерфейс SublimeText это какой-то ужас.
      • +1
        SublimeText на порядок ускоряет работу за счёт хоткейного интерфейса вместо кнопочно-менюшного.

        Ну и визуально приятнее.
        • 0
          В VS тоже все функции можно развесить по хоткеям. При использовании Resharper я вообще мышку не трогаю почти. Тут, боюсь, проблема скорее в неумении готовить конкретный сорт кошек (в том числе и у меня с Саблаймом).
          • 0
            «Можно развесить» != «работает из коробки».

            И я не верно выразился, не столько хоткеи, сколько нечеткий поиск по названиям ВСЕГО (функции редактора, файлы проекта, методы в файле и т.д).
            Вот Resharper имеет подобную функциональность, но, кажется, только для поиска файлов в проекте, хотя могу ошибаться.

            Насчёт «готовить» – согласен. :)
            • 0
              В решарпере есть адское сочетние ctrl+alt+shift+n — искать все. Хотя вроде в последней версии ctrl+n делает почти тоже самое.
              Я в целом функциональность VS от функциональности решарпера не отделяю, так как без него уже лет 5-6 не работаю.
            • 0
              Решарпер ищет как минимум по типам, файлам, составляющим типа.
            • 0
              К слову сказать саблайм без CTags (который тоже еще надо настраивать) по типам/методам не ищет, так что еще вопрос что требует большей настройки «из коробки» ;)
              • 0
                У меня так и не получилось заставить CTags работать (по-крайней мере, для JS-кода). Но задачу вполне решает поиск по коду (по всем файлам), который есть «из коробки» и работает очень быстро + удобная выдача результатов.
    • +1
      image

      Где тут «огромное количество»? А без минимума, который есть, мне просто не обойтись. Сомневаюсь, что в Sublime Text интерфейс минималистичней.
      • 0
        Ну VS же в таком виде не из коробки идёт. Его надо под себя настраивать, а я там с трудом находил, где хоткеи поменять можно и как ненужную панельку спрятать (конечно, если долго работать в VS с этим проблем не будет, но тем не менее).
        • –1
          Давайте синдром утенка не будем рассматривать как аргумент удобности одного средства относительно другого? :)
          VS хорош, Саблим тоже. Если саблим нравится советую VS Code попробовать, может понравится.
  • +1
    Просто шикарно.
  • 0
    Микрософт нацелил свою стратегию на предоставления продукта «для людей», наконец-то?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.