Как подключить код node js Visual Studio

Обновлено: 02.12.2024

В этом руководстве показано 3 различных способа установки среды выполнения Node.js и диспетчера пакетов Node.js, npm: со страницы загрузки Node.js, с помощью Homebrew (для установки MacOS) и с помощью версии Node.js. Управляющий делами. После того, как я покажу вам, как установить Node.js, я покажу вам, как установить редактор, VS Code и где вы можете написать свой исходный код для этого пути обучения.

В этом видео показаны шаги этого руководства по Node.js:

Предпосылки

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

Три подхода к установке Node.js и npm

Существует несколько способов установки Node.js.

Лучший способ установки Node.js и npm — через диспетчер версий Node.js или nvm. С помощью nvm вы можете установить несколько версий как среды выполнения Node.js, так и npm, и все они могут сосуществовать, хотя одновременно вы можете указать только одну активную версию любой из них. Я имею в виду, что вам не нужно удалять одну версию Node.js или npm, чтобы установить другую, просто сообщите nvm, какую из них вы хотите использовать. Он отлично подходит для тестирования совместимости и управления средой Node.js в целом.

Самый простой способ – загрузить пакет для своей платформы непосредственно со страницы загрузки Node.js проекта Node.js и запустить программу установки. Этот подход идеально подходит для пользователей Windows, но он также работает для MacOS и Linux.

Если вы используете Mac, лучше использовать Homebrew. Homebrew позиционирует себя как «отсутствующий менеджер пакетов для MacOS». Вы можете использовать его для установки и управления сотнями различных пакетов для MacOS.

Я суммировал плюсы и минусы каждого подхода в следующей таблице:

Тип установки	Плюсы	Минусы
Прямая загрузка с nodejs.org	Простой; поддерживается большинство платформ	Ручная проверка контрольной суммы
Homebrew	Простой; автоматическая проверка контрольной суммы; можно переключаться между несколькими версиями с небольшой настройкой	только для MacOS
nvm	Простой; автоматическая проверка контрольной суммы; можно легко переключаться между несколькими версиями	Только для MacOS и Linux (доступны вклады сообщества для других платформ)

Homebrew и nvm предлагают автоматическую проверку контрольной суммы (что приятно), но имеют ограниченное количество официально поддерживаемых платформ. Я подробно описываю каждый подход в следующих разделах, чтобы вы могли выбрать тот, который подходит именно вам.

Выбор версии Node.js

На странице «Загрузки» вам нужно выбрать между долгосрочной поддержкой (LTS) или текущим выпуском. В чем разница?

SemVer

В выпусках Node.js используется нумерация выпусков SemVer (нумерация MAJOR.MINOR.PATCH. Например, 2.1.0 или 16.x.y). Узнайте больше о SemVer.

Команда разработчиков Node.js помечает основные выпуски с четными номерами как выпуски LTS. Выпуски LTS поддерживаются до 3 лет с даты их первоначального выпуска, в течение этого времени выпуски переходят от текущего (за последние 6 месяцев) к активному LTS (18 месяцев, только незначительные изменения) к поддерживаемому LTS (12 месяцев). , только выпуски исправлений). Это означает, что вы можете быть уверены, что выпуск LTS будет стабильным в течение значительного периода времени.

Если вы хотите узнать больше о процессе выпуска Node.js, посетите страницу выпуска Node.js, которая содержит информацию о графике выпуска, мандате выпуска и методологии для выпусков LTS (наряду с тем, что входит в их).

Для этого руководства я использую версию 16, поскольку на момент написания этой статьи это текущая версия LTS. Вы, вероятно, захотите сделать то же самое, чтобы убедиться, что вы можете следовать за вами.

Загрузите установочный пакет с веб-сайта проекта Node.js

Перейдите на страницу загрузки Node.js и выберите программу установки, соответствующую вашей платформе.

Как я уже говорил в предыдущем разделе, я использую версию 16, и это отражено во всех инструкциях в этом разделе, включая видео. Я предлагаю вам использовать версию 16 (или любую другую версию 16.x.y на данный момент).

После того как вы загрузили программу установки на свой компьютер и убедились, что контрольная сумма совпадает, запустите программу установки. Например, на своем Mac я дважды щелкаю программу установки пакетов (называемую node-v16.13.0.pkg) для запуска установщика пакета. Как это сделать я показываю в видео. Если вы используете Windows, дважды щелкните программу установки и следуйте инструкциям мастера установки.

Для Linux распакуйте tar-архив в стандартное расположение, например /usr/local/lib/nodejs , убедившись, что путь к каталогу bin Node.js совпадает с вашей переменной среды PATH. Более подробные инструкции см. в справке по установке Node.js на вики-сайте Node.js GitHub.

Теперь перейдите к разделу Проверка установки, чтобы убедиться, что Node.js и npm установлены правильно.

В будущем, когда вы захотите обновить свою версию Node.js, загрузите новый установщик, и он заменит текущую версию.

При использовании этого метода установки одновременно может быть установлена только одна версия Node.js и npm. Если вы хотите установить несколько версий и переключаться между ними (например, для проверки совместимости), я рекомендую вам использовать nvm (подробности см. в разделе «Использование nvm для установки Node.js только в MacOS и Linux»).< /p>

Используйте Homebrew для установки Node.js на MacOS

Homebrew – это лучший способ управления различными пакетами на вашем Mac. Всякий раз, когда мне нужно установить знакомый пакет Linux, я сначала проверяю, доступен ли он в виде «формулы» Homebrew, прежде чем пытаться установить пакет другим способом (за редкими исключениями, такими как использование nvm для управления Node.js, который я покажу вам). в следующем разделе).

Чтобы узнать больше о Homebrew и о том, как его установить, посетите страницу установки Homebrew.

Чтобы установить текущую версию Node.js и npm через Homebrew, откройте окно терминала на Mac и введите следующую команду:

Тем не менее, я настоятельно рекомендую вам установить определенные основные версии Node.js на практике, потому что это заставляет вас точно знать, какую именно версию вы устанавливаете. Если конкретная основная версия, которую вы устанавливаете, окажется текущей версией, то Homebrew автоматически свяжет ее для вас (это означает, что он создаст символические ссылки на node и npm в вашем PATH на текущую версию в Homebrew Cellar). Кроме того, вы можете переключаться между установленными версиями, отключая одну и связывая другую с помощью команд brew unlink и brew link (хотя вы должны использовать это с осторожностью, как я покажу вам позже в этом разделе).

Чтобы установить последнюю версию Node.js 16, введите команду brew install node@16. Вы увидите такой вывод:

Теперь перейдите к разделу Проверка установки, чтобы убедиться, что Node.js и npm установлены правильно.

Совет. Homebrew всегда устанавливает текущую версию Node.js при использовании команды, как показано здесь. Если вы хотите установить конкретную основную версию Node.js, укажите номер основной версии следующим образом:

Вы увидите следующий вывод:

При этом устанавливается последняя версия Node.js 8, т. е. только последний второстепенный выпуск. Если устанавливаемая вами версия не является текущей версией Node.js (даже если это активная LTS), это будет установка «только для бочки». См. «Что означает только бочонок?» в FAQ по Homebrew для получения дополнительной информации.

В будущем для обновления Node.js используйте:

Если доступно обновление, оно автоматически применяется для вас.

Переключение между несколькими версиями

С помощью Homebrew вы можете одновременно установить несколько основных версий Node.js и npm, но только одна из них может быть активной. Если вы хотите переключаться между ними, вам нужно «отвязать» активную связанную версию и «связать» ту, которую вы хотите использовать.

На моем Mac это означает, что мне нужно пройти через несколько обручей (включая --force и --overwrite ), чтобы переключиться с версии 10 на версию 8, и более одного раза я случайно оставил свою систему в странное состояние (например, -bash: /usr/local/bin/npm: нет такого файла или каталога). Например, вот что мне нужно сделать, чтобы переключиться с Node.js 10 на Node.js 8 и обратно на Node.js 10:

Ой, какая боль! Однако, как видите, у меня получилось. Но в итоге мне пришлось переустановить Node.js 10, потому что отвязка от Node.js 8 привела к тому, что что-то пошло не так. Может я что-то не так сделал. Может быть, Хоумбрю просто не любит меня. Может быть, прошлой ночью было полнолуние. Кто знает?

Если вам действительно нужно безболезненно переключаться между версиями Node.js и npm, я настоятельно рекомендую вам использовать nvm. Кроме того, если вы хотите установить несколько версий major.minor.patch и переключаться между ними (скажем, для проверки совместимости), вы должны использовать nvm, потому что Homebrew поддерживает установку только последней версии major.minor.patch.

Как насчет проверки контрольной суммы? Homebrew автоматически проверяет контрольную сумму, что является еще одной причиной использовать его по сравнению с прямой установкой пакета.

Используйте nvm для установки Node.js только на MacOS и Linux

Извините, пользователи Windows: nvm официально поддерживается только в MacOS и Linux, но есть 2 альтернативы (ни одна из них официально не поддерживается командой nvm, хотя я получил эти ссылки с сайта nvm GitHub, так что подмигиваем) :

Другие неподдерживаемые платформы также перечислены в разделе «Важные примечания по nvm».

Установить nvm совсем несложно. Перейдите в репозиторий Creationix GitHub и прокрутите вниз до раздела «Установка» (или перейдите на страницу nvm GitHub. Скопируйте команду установки и вставьте ее в окно терминала или командную строку:

Для загрузки и установки требуется всего несколько секунд (менее 10 на моем Mac).

Сценарий установки вносит изменения в ваш .bash_profile (MacOS) или .profile (Linux), поэтому, когда сценарий завершится, вам нужно повторно запустить сценарий своего профиля, используя для этого ваш любимый метод. Мне лень, поэтому я просто закрываю окно терминала и открываю новое.

Убедитесь, что nvm установлен правильно, выполнив команду nvm --version. Вы должны увидеть такой вывод:

Чтобы установить Node.js и npm, выполните команду nvm install --lts, которая указывает nvm установить LTS-версию (на момент написания этой статьи это Node.js 8.11.2 и npm 5.6.0):

Теперь проверьте установку, следуя инструкциям в следующем разделе.

Переключение между несколькими версиями с помощью nvm

Вы можете установить несколько версий Node.js и npm (включая любую выпущенную комбинацию major.minor.patch) и переключаться между ними. Это отлично подходит для тестирования совместимости, например. Предположим, вы хотите установить Node.js 16 (на момент написания этой статьи это 16.13.0):

Затем вернитесь к Node.js 8 (предполагаю, что вы следовали этому руководству, а используемая версия – 10):

Посмотрите! Я могу заменить среду выполнения Node на PATH с помощью простой команды. Довольно круто.

Обратите внимание, что версия npm также обновлена, чтобы соответствовать загруженной вами версии Node. Если вы не укажете иное, Node.js и npm являются своего рода пакетом услуг (и это обычно хорошо).

Чтобы увидеть все доступные параметры, просто введите nvm, и появится этот экран справки:

Вы также можете ознакомиться с документацией по NVM.

Проверьте установку

После установки Node.js и npm убедитесь, что они установлены правильно:

Вы должны увидеть такой вывод:

Убедитесь, что /usr/local/bin находится в вашей переменной окружения PATH, иначе вывод будет таким:

Получить исходный код с GitHub

В GitHub я предоставил исходный код для каждого примера в этом руководстве.

Откройте окно терминала, перейдите в каталог, в который вы хотите поместить код, и введите команду git clone:

Затем перейдите в каталог Node.js/Course. Там вы можете найти все примеры, которые я показываю в этом руководстве.

Установить VS Code

Чтобы следовать всем руководствам в этом пути обучения, вам нужен редактор. Я использую VS Code уже пару лет, и он мне очень нравится. Он бесплатный, с открытым исходным кодом и имеет активное сообщество пользователей с множеством расширений, что означает, что вы, вероятно, найдете множество различных расширений для вашего любимого языка, платформы или формата файла. Кроме того, VS Code построен на платформе Electron, в которой используется Node.js.

Конечно, вы можете использовать любой редактор, который вам нравится. Для руководств из этой серии я использую VS Code, поэтому все скриншоты и видеозаписи, которые вы видите, относятся к VS Code.

Чтобы установить VS Code, перейдите на страницу Visual Studio Code. Ваш браузер должен автоматически определить вашу платформу и предварительно заполнить раскрывающийся список соответствующей загрузкой, или вы можете использовать раскрывающийся список, чтобы выбрать любую другую загрузку, которая вам нравится. Тем не менее, я рекомендую вам посетить страницу Загрузка кода Visual Studio, где вы также можете получить контрольную сумму SHA256 для загрузки. Чтобы увидеть контрольную сумму, нажмите на ссылку внизу страницы «Просмотр хэшей SHA-256», которая развернется и покажет список хэшей для каждого файла.

Скачиваемый файл зависит от платформы. Для MacOS загруженный файл представляет собой ZIP-архив, содержащий файл приложения MacOS. Скопируйте файл в папку с приложениями, чтобы при необходимости легко найти его позже.

Если вы работаете в Windows, этот файл является установщиком. Инструкции по его установке находятся на странице установки VS Code для Windows.

Если вы используете Linux, инструкции по установке можно найти на странице VS Code Setup для Linux.

Установив VS Code, запустите его. Вам обязательно стоит заглянуть на Marketplace, где есть МНОЖЕСТВО подключаемых модулей.

Чтобы установить подключаемый модуль, щелкните значок Marketplace, найдите нужный подключаемый модуль и нажмите «Установить». На рис. 1 показаны некоторые из установленных расширений:

Рис. 1. Установленные расширения

Запуск Node.js в VS Code

VS Code подключается к среде выполнения Node.js, поэтому вы можете запускать свой код из VS Code. Выполните следующие действия:

Перейдите в каталог, в который вы клонировали код.
В VS Code выберите «Файл» > «Открыть», выберите подкаталог IBM-Code/Node.js/Course в этом расположении и нажмите «Открыть».
Перейдите на вкладку "Файл", разверните папку Unit-2 и щелкните файл example1.js, чтобы открыть его в редакторе.
Перейдите на вкладку "Отладка".
Нажмите "Выполнить".

Файл JavaScript запускается в окне отладки. Когда все будет готово, вы должны увидеть что-то похожее на рис. 2.

Рис. 2. Окно отладки VS Code

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

Node.js – это платформа для создания быстрых и масштабируемых серверных приложений с использованием JavaScript. Node.js — это среда выполнения, а npm — диспетчер пакетов для модулей Node.js.

Visual Studio Code поддерживает языки JavaScript и TypeScript, а также отладку Node.js. Однако для запуска приложения Node.js вам потребуется установить среду выполнения Node.js на свой компьютер.

Чтобы приступить к работе с этим пошаговым руководством, установите Node.js для своей платформы. Диспетчер пакетов Node включен в дистрибутив Node.js. Вам нужно будет открыть новый терминал (командную строку), чтобы инструменты командной строки node и npm находились в вашем PATH.

Чтобы убедиться, что Node.js правильно установлен на вашем компьютере, откройте новый терминал и введите node --version, и вы должны увидеть установленную текущую версию Node.js.

Linux: существуют специальные пакеты Node.js для различных версий Linux. См. Установка Node.js с помощью диспетчера пакетов, чтобы найти пакет Node.js и инструкции по установке, адаптированные для вашей версии Linux.

Подсистема Windows для Linux. Если вы используете Windows, WSL — отличный способ разработки Node.js. Вы можете запускать дистрибутивы Linux в Windows и устанавливать Node.js в среду Linux. В сочетании с расширением Remote — WSL вы получаете полную поддержку редактирования и отладки VS Code при работе в контексте WSL. Чтобы узнать больше, перейдите к разделу «Разработка в WSL» или ознакомьтесь с учебным пособием «Работа в WSL».

Привет, мир

Давайте начнем с создания простейшего приложения Node.js "Hello World".

Создайте пустую папку с именем "hello", перейдите в нее и откройте VS Code:

Совет. Вы можете открывать файлы или папки непосредственно из командной строки. Период '.' относится к текущей папке, поэтому VS Code запустится и откроет папку Hello.

На панели инструментов проводника нажмите кнопку "Новый файл":

и назовите файл app.js :

Используя расширение файла .js, VS Code интерпретирует этот файл как JavaScript и оценивает его содержимое с помощью языковой службы JavaScript. Дополнительные сведения о поддержке JavaScript см. в разделе о языке VS Code JavaScript.

Создайте простую строковую переменную в app.js и отправьте содержимое строки на консоль:

Обратите внимание, что при вводе console. IntelliSense на объекте консоли был автоматически представлен вам.

Также обратите внимание, что VS Code знает, что msg — это строка, основанная на инициализации «Hello World». Если вы наберете msg. вы увидите, что IntelliSense показывает все строковые функции, доступные в msg .

Поэкспериментировав с IntelliSense, отмените все дополнительные изменения из приведенного выше примера исходного кода и сохраните файл ( ⌘S (Windows, Linux Ctrl+S )).

Запуск Hello World

Запускать app.js с помощью Node.js очень просто. В терминале просто введите:

Вы должны увидеть вывод "Hello World" на терминал, а затем Node.js вернется.

Интегрированный терминал

VS Code имеет встроенный терминал, который можно использовать для запуска команд оболочки. Вы можете запускать Node.js прямо оттуда и не переключаться с VS Code при работе с инструментами командной строки.

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

Отладка Hello World

Как упоминалось во введении, VS Code поставляется с отладчиком для приложений Node.js. Давайте попробуем отладить наше простое приложение Hello World.

Чтобы установить точку останова в app.js , поместите курсор редактора на первую строку и нажмите F9 или щелкните в левом поле редактора рядом с номерами строк. В желобе появится красный кружок.

Чтобы начать отладку, выберите Run View на панели действий:

Теперь вы можете щелкнуть зеленую стрелку панели инструментов "Отладка" или нажать клавишу F5, чтобы запустить и отладить "Hello World". Ваша точка останова будет достигнута, и вы сможете просмотреть и выполнить простое приложение. Обратите внимание, что VS Code отображает строку состояния другого цвета, чтобы указать, что он находится в режиме отладки, и отображается КОНСОЛЬ ОТЛАДКИ.

Теперь, когда вы увидели VS Code в действии с "Hello World", в следующем разделе показано использование VS Code с полнофункциональным веб-приложением Node.js.

Примечание. Мы закончили с примером «Hello World», поэтому выйдите из этой папки, прежде чем создавать приложение Express. Вы можете удалить папку «Hello», если хотите, так как она не требуется для остальной части пошагового руководства.

Экспресс-приложение

Express – это очень популярная платформа приложений для создания и запуска приложений Node.js. Вы можете сформировать (создать) новое приложение Express с помощью инструмента Express Generator. Express Generator поставляется в виде модуля npm и устанавливается с помощью инструмента командной строки npm npm .

Совет. Чтобы убедиться, что npm правильно установлен на вашем компьютере, введите npm --help в терминале, и вы увидите документацию по использованию.

Установите Express Generator, запустив в терминале следующее:

Переключатель -g устанавливает экспресс-генератор глобально на вашем компьютере, чтобы вы могли запускать его откуда угодно.

Теперь мы можем создать новое приложение Express под названием myExpressApp, выполнив:

При этом создается новая папка myExpressApp с содержимым вашего приложения. Параметры --view pug указывают генератору использовать механизм шаблонов pug.

Чтобы установить все зависимости приложения (опять же поставляемые в виде модулей npm), перейдите в новую папку и выполните npm install:

На этом этапе мы должны проверить, работает ли наше приложение. Сгенерированное приложение Express имеет файл package.json, который включает стартовый скрипт для запуска node ./bin/www . Это запустит приложение Node.js.

В терминале в папке приложения Express запустите:

Отличное редактирование кода

Закройте браузер и в терминале в папке myExpressApp остановите сервер Node.js, нажав CTRL+C .

Теперь запустите VS Code:

Примечание. Если вы использовали встроенный терминал VS Code для установки генератора Express и формирования шаблона приложения, вы можете открыть папку myExpressApp из работающего экземпляра VS Code с помощью команды «Файл» > «Открыть папку».< /p>

Документация Node.js и Express прекрасно объясняет, как создавать многофункциональные приложения с использованием платформы и фреймворка. Visual Studio Code поможет вам более продуктивно разрабатывать приложения такого типа, предоставляя удобные возможности редактирования кода и навигации.

VS Code использует файлы объявления типов TypeScript (типы) (например, node.d.ts ) для предоставления метаданных в VS Code о платформах на основе JavaScript, которые вы используете в своем приложении. Файлы объявления типов написаны на TypeScript, поэтому они могут выражать типы данных параметров и функций, что позволяет VS Code предоставлять широкие возможности IntelliSense. Благодаря функции Automatic Type Acquisition вам не нужно беспокоиться о загрузке этих файлов объявлений типов, VS Code установит их автоматически.

Вы также можете написать код, ссылающийся на модули в других файлах. Например, в app.js нам нужен модуль ./routes/index, который экспортирует класс Express.Router. Если вы вызовете IntelliSense для index , вы увидите форму класса Router.

Отладка приложения Express

Вам потребуется создать файл конфигурации отладчика launch.json для приложения Express. Щелкните значок «Выполнить» на панели действий, а затем значок «Настройка шестеренки» в верхней части представления «Выполнение», чтобы создать файл launch.json по умолчанию. Выберите среду Node.js, убедившись, что для свойства type в конфигурациях установлено значение «node» . Когда файл создается впервые, VS Code ищет в package.json сценарий запуска и использует это значение в качестве программы (в данном случае «$\\bin\\www») для конфигурации программы запуска.

Сохраните новый файл и убедитесь, что в раскрывающемся меню конфигурации в верхней части представления «Выполнение» выбран пункт «Запустить программу». Откройте app.js и установите точку останова в верхней части файла, где создается объект приложения Express, щелкнув поле слева от номера строки. Нажмите F5, чтобы начать отладку приложения. VS Code запустит сервер в новом терминале и достигнет установленной нами точки останова. Оттуда вы можете проверять переменные, создавать часы и выполнять код пошагово.

Разверните приложение

Если вы хотите узнать, как развернуть свое веб-приложение, ознакомьтесь с руководствами по развертыванию приложений в Azure, где мы покажем, как запустить ваш веб-сайт в Azure.

Дальнейшие шаги

С Visual Studio Code можно исследовать гораздо больше, попробуйте следующие темы:

Изучите этапы разработки и отладки проекта JavaScript Node.js с помощью Visual Studio.

Подготовьте среду

Установите Git. Visual Studio Code интегрируется с git, чтобы обеспечить управление Source Control на боковой панели.

Добавьте необходимые переменные среды. В примерах в этой статье используется строка подключения к базе данных mongoDB.

Если у вас нет доступной базы данных mongoDB, вы можете:

Выберите запуск этого локального проекта в конфигурации с несколькими контейнерами, где одним из контейнеров является база данных mongoDB. Установите расширение Docker and Remote — Containers, чтобы получить конфигурацию с несколькими контейнерами, в одном из которых работает локальная база данных mongoDB.
Выберите создание ресурса Azure Cosmos DB для базы данных MongoDB. Узнайте больше из этого руководства.

Клонировать проект

Для начала клонируйте образец проекта, выполнив следующие действия:

Откройте код Visual Studio.

Нажмите F1, чтобы отобразить палитру команд.

В приглашении палитры команд введите gitcl , выберите команду Git: Clone и нажмите Enter.

Выберите (или создайте) локальный каталог, в который вы хотите клонировать проект.

Установить зависимости

С этим проектом Node.js вы должны сначала убедиться, что все зависимости проекта установлены из npm.

Нажмите Ctrl + Shift + `, чтобы отобразить встроенный терминал Visual Studio Code.

Используйте следующую команду для установки зависимостей:

Навигация по файлам и коду проекта

Чтобы сориентироваться в кодовой базе, давайте поэкспериментируем с некоторыми примерами некоторых возможностей навигации, предоставляемых Visual Studio Code.

Введите .js, чтобы отобразить все файлы JavaScript/JSON в проекте вместе с родительским каталогом каждого файла

Выберите server.js, который является сценарием запуска для приложения.

Наведите указатель мыши на отметку времени в строке 11. Эта возможность быстро проверять переменные, модули и типы в файле полезна при разработке ваших проектов.

Щелкнув мышью переменную, например временную метку, вы увидите все ссылки на эту переменную в одном файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите «Найти все ссылки».

Использование автодополнения кода Visual Studio с mongoDB

Откройте файл data.js

В строке 84 введите новое использование переменной db, введя db. . Visual Studio Code отображает доступные члены API, доступные в db .

Автозаполнение работает, потому что Visual Studio Code использует TypeScript за кулисами — даже для JavaScript — для предоставления информации о типе, которая затем может использоваться для информирования списка завершения по мере ввода. Это автоматическое получение типизированных данных работает для более чем 2000 сторонних модулей, таких как React, Underscore и Express.

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

Запуск локального приложения Node.js

После изучения кода пришло время запустить приложение. Чтобы запустить приложение из Visual Studio Code, нажмите F5. При запуске кода с помощью клавиши F5 (режим отладки) Visual Studio Code запускает приложение и отображает окно консоли отладки, в котором отображается стандартный вывод для приложения.

Кроме того, к вновь запущенному приложению подключается консоль отладки, поэтому вы можете вводить выражения JavaScript, которые будут оцениваться в приложении, а также включать автозаполнение. Чтобы увидеть это поведение, введите в консоли process.env:

Отладка локального приложения Node.js

Помимо возможности запускать приложение и взаимодействовать с ним через встроенную консоль, вы можете устанавливать точки останова непосредственно в коде. Например, введите Ctrl + P, чтобы отобразить средство выбора файлов. Когда появится средство выбора файлов, выберите файл server.js.

Установите точку останова в строке 53, которая является оператором if в маршруте для добавления нового элемента. Чтобы установить точку останова, просто щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

В дополнение к стандартным точкам останова Visual Studio Code поддерживает условные точки останова, которые позволяют настроить, когда приложение должно приостанавливать выполнение. Чтобы установить условную точку останова, щелкните правой кнопкой мыши область слева от строки, выполнение которой вы хотите приостановить, выберите «Добавить условную точку останова» и укажите либо выражение JavaScript (например, foo = «bar»), либо счетчик выполнения, который определяет условие, при котором вы хотите приостановить выполнение.

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

После того как приложение было приостановлено, вы можете навести указатель мыши на выражения кода, чтобы просмотреть их текущее значение, проверить локальные переменные/контрольные значения и стек вызовов, а также использовать панель инструментов отладки для пошагового выполнения кода. Нажмите F5, чтобы возобновить выполнение приложения.

Локальная отладка полного стека в Visual Studio Code

Внешний и внутренний интерфейс написаны с использованием JavaScript. Таким образом, пока вы сейчас отлаживаете внутренний (Node/Express) код, в какой-то момент вам может понадобиться отладить внешний (Angular) код.

Хотя вы могли запускать и отлаживать код Node.js без какой-либо конфигурации Visual Studio Code, для отладки интерфейсного веб-приложения вам необходимо использовать launch.json файл, который указывает Visual Studio Code, как запускать приложение.

Этот пример приложения содержит файл launch.json со следующими настройками отладки:

Visual Studio Code удалось обнаружить, что скриптом запуска приложения является server.js.

Открыв файл launch.json, выберите Добавить конфигурацию (внизу справа) и выберите Chrome: запуск с userDataDir.

Добавление новой конфигурации запуска для Chrome позволяет отлаживать интерфейсный код JavaScript.

Вы можете навести указатель мыши на любой из указанных параметров, чтобы просмотреть документацию о том, что делает этот параметр. Кроме того, обратите внимание, что Visual Studio Code автоматически определяет URL-адрес приложения. Обновите свойство webRoot до $/public, чтобы отладчик Chrome знал, где найти интерфейсные ресурсы приложения:

Чтобы одновременно запускать и отлаживать интерфейсную и серверную части, необходимо создать составную конфигурацию запуска, которая сообщает Visual Studio Code, какой набор конфигураций следует запускать параллельно. .

Добавьте следующий фрагмент в качестве свойства верхнего уровня в файл launch.json (как одноуровневое свойство существующего свойства конфигурации).

Строковые значения, указанные в массиве components.configurations, относятся к именам отдельных записей в списке конфигураций. Если вы изменили эти имена, вам потребуется внести соответствующие изменения в массив. Например, перейдите на вкладку отладки и измените выбранную конфигурацию на Full-Stack (название составной конфигурации) и нажмите F5, чтобы запустить ее.

Нажмите Ctrl+P и введите (или выберите) todos.js, который является основным контроллером Angular для внешнего интерфейса приложения.

Установите точку останова в строке 11, которая является точкой входа для новой создаваемой записи списка дел.

Вернитесь к запущенному приложению, добавьте новую запись в список дел и обратите внимание, что теперь код Visual Studio приостановил выполнение в коде Angular.

Как и при отладке Node.js, вы можете наводить указатель мыши на выражения, просматривать локальные/контрольные значения, оценивать выражения в консоли и т. д.

Есть две интересные вещи, на которые стоит обратить внимание:

На панели стека вызовов отображаются два разных стека: Node и Chrome, а также указывается, какой из них в настоящее время приостановлен.

Вы можете переключаться между интерфейсным и внутренним кодом: нажмите F5, что запустится и сработает точка останова, ранее установленная в экспресс-маршруте.

Благодаря этой настройке вы теперь можете эффективно отлаживать передний, задний или полный код JavaScript непосредственно в Visual Studio Code.

Кроме того, концепция составного отладчика не ограничивается только двумя целевыми процессами и не ограничивается только JavaScript. Поэтому, если вы работаете над приложением микрослужбы (которое потенциально может быть многоязычным), вы можете использовать точно такой же рабочий процесс (после того, как вы установили соответствующие расширения для языка/фреймворка).

Node.js – это платформа для создания быстрых и масштабируемых серверных приложений с использованием JavaScript. Node.js — это среда выполнения, а NPM — это диспетчер пакетов для модулей Node.js.

VS Code имеет встроенную поддержку языков JavaScript и TypeScript, а также отладку Node.js. Однако для запуска приложения Node.js вам потребуется установить среду выполнения Node.js на свой компьютер.

Linux: существуют специальные пакеты Node.js для различных версий Linux. См. Установка Node.js с помощью диспетчера пакетов, чтобы найти пакет Node.js и инструкции по установке, адаптированные для вашей версии Linux.

Совет. Чтобы проверить, правильно ли установлен Node.js на вашем компьютере, введите node --help из терминала, и вы увидите документацию по использованию.

Привет, мир

Давайте начнем с создания простейшего приложения Node.js "Hello World".

Создайте пустую папку с именем "Hello", перейдите в нее и откройте VS Code:

Совет. Вы можете открывать файлы или папки непосредственно из командной строки. Период '.' относится к текущей папке, поэтому VS Code запустится и откроет папку Hello.

На панели инструментов проводника нажмите кнопку "Новый файл":

и назовите файл app.js :

С помощью файла .js, VS Code интерпретирует этот файл как JavaScript и будет оценивать его содержимое с помощью языковой службы JavaScript.

Создайте простую строковую переменную в app.js и отправьте содержимое строки на консоль:

Обратите внимание, что при вводе console. IntelliSense на объекте консоли был автоматически представлен вам. При редактировании файлов JavaScript VS Code автоматически предоставит вам IntelliSense для DOM.

Также обратите внимание, что VS Code знает, что msg — это строка, основанная на инициализации «hello world». Если вы наберете msg. вы увидите, что IntelliSense показывает все строковые функции, доступные в msg .

Поэкспериментировав с IntelliSense, отмените все дополнительные изменения из приведенного выше примера исходного кода и сохраните файл ( kb(workbench.action.files.save) ).

Запуск Hello World

Запускать app.js с помощью Node.js очень просто. В терминале просто введите:

Вы должны увидеть вывод "Hello World" на терминал, а затем Node.js вернется.

Отладка Hello World

Как упоминалось во введении, VS Code поставляется с установленным отладчиком Node.js. Давайте попробуем отладить наше простое приложение.

Чтобы установить точку останова в app.js, поместите курсор редактора на первую строку и нажмите kb(editor.debug.action.toggleBreakpoint) или просто щелкните в левом поле редактора рядом с номерами строк. В желобе появится красный кружок.

Теперь нам нужно настроить отладчик для этой простой рабочей области. Выберите представление отладки на боковой панели:

Нажмите значок шестеренки «Настроить» в верхней части окна «Отладка», чтобы создать файл конфигурации launch.json по умолчанию, и выберите Node.js в качестве среды отладки. Этот файл конфигурации позволяет указать, как запускать приложение, какие аргументы передавать, рабочий каталог и многое другое. Новый файл launch.json создается в специальной папке VS Code .vscode в корне вашей рабочей области.

С созданной конфигурацией запуска Node.js по умолчанию теперь вы можете щелкнуть зеленую стрелку на панели инструментов отладки или нажать kb(workbench.action.debug.start), чтобы запустить и отладить «Hello World». Ваша точка останова будет достигнута, и вы сможете просмотреть и выполнить простое приложение. Обратите внимание, что VS Code отображает оранжевую строку состояния, указывающую, что он находится в режиме отладки, и отображается КОНСОЛЬ ОТЛАДКИ.

Экспресс

Express – это очень популярная платформа приложений для создания и запуска приложений Node.js. Вы можете сформировать (создать) новое приложение Express с помощью инструмента Express Generator. Express Generator поставляется в виде модуля NPM и устанавливается с помощью инструмента командной строки NPM npm .

Совет. Чтобы убедиться, что npm правильно установлен на вашем компьютере, введите npm --help в терминале, и вы увидите документацию по использованию.

Установите Express Generator, запустив в терминале следующее:

Теперь мы можем создать новое приложение Express под названием myExpressApp, выполнив:

При этом создается новая папка myExpressApp с содержимым вашего приложения. Чтобы установить все зависимости приложения (опять же поставляемые в виде модулей NPM), перейдите в новую папку и выполните npm install :

В терминале в папке приложения Express запустите:

Удобство редактирования кода

Закройте браузер и в терминале в папке myExpressApp остановите сервер Node.js, нажав kbstyle(CTRL+C) .

Теперь запустите VS Code:

Узел.js и документации Express отлично объясняют, как создавать многофункциональные приложения с использованием платформы и фреймворка. Visual Studio Code поможет вам более продуктивно разрабатывать приложения такого типа, предоставляя удобные возможности редактирования кода и навигации.

Ранее мы видели IntelliSense, с помощью которого языковая служба JavaScript может делать выводы о вашем исходном коде. Далее мы увидим, что с небольшой дополнительной настройкой и настройкой Visual Studio Code может предоставить еще более подробную информацию и поддержку сборки.

Добавление файла конфигурации jsconfig.json

Когда VS Code обнаруживает, что вы работаете с файлом JavaScript, он проверяет, есть ли в вашей рабочей области файл конфигурации JavaScript jsconfig.json. Если он не найдет его, вы увидите зеленую лампочку в строке состояния, предлагающую создать его.

Нажмите на зеленую лампочку и примите приглашение создать файл jsconfig.json:

Если у вас не включено автоматическое сохранение, сохраните файл, нажав kb(workbench.action.files.save) .

Присутствие этого файла позволяет VS Code понять, что все файлы в этом корне должны рассматриваться как часть одного проекта. В следующем разделе мы увидим, что это важно для расширения IntelliSense путем добавления типов (файлов определения типов) в рабочую область. Этот файл конфигурации также позволяет вам указать такие параметры, как компиляторOptions и папки, которые вы хотите, чтобы языковая служба JavaScript исключала (игнорировала). Только что созданный файл jsconfig.json по умолчанию сообщает языковой службе JavaScript, что вы пишете код, совместимый с ES6, и хотите игнорировать папки зависимостей и временного содержимого.

IntelliSense и типизация

VS Code может использовать файлы определения TypeScript (например, node.d.ts ) для предоставления метаданных в VS Code о платформах на основе JavaScript, которые вы используете в своем приложении. Поскольку файлы определений TypeScript написаны на TypeScript, они могут выражать типы данных параметров и функций, что позволяет VS Code предоставлять расширенные возможности IntelliSense.

Typings, менеджер определений типов для TypeScript, упрощает поиск и установку файлов определений TypeScript в рабочую область. Этот инструмент может загружать запрошенные определения из различных источников, включая репозиторий DefinitelyTyped. Как и в случае с экспресс-генератором, мы установим инструмент командной строки Typings глобально с помощью NPM, чтобы вы могли использовать этот инструмент в любом создаваемом вами приложении.

Совет. В Typings есть несколько параметров для настройки места и способа загрузки файлов определений. В терминале запустите typings --help для получения дополнительной информации.

Вернитесь к файлу app.js и обратите внимание, что если вы наведете указатель мыши на глобальный объект Node.js __dirname , VS Code не узнает тип и отобразит любой .

Теперь с помощью командной строки Typings извлеките файлы определения типов Node.js и Express:

Префикс dt~ указывает инструменту Typings искать в репозитории DefinitelyTyped файлы определений указанного типа.

Совет. Вы можете загрузить несколько файлов определений, объединив их в командной строке, как видно из приведенного выше экспресс-ввода. Нам нужно установить типизацию для Express, а также его ссылки.

Примечание: не беспокойтесь, если во время установки вы увидите справочные сообщения типизации INFO. Инструмент Typings очищает ненужные /// ссылки в загруженных файлах типизации.

Примечание. Убедитесь, что файл jsconfig.json находится в корне вашей рабочей области, как описано в предыдущем разделе, чтобы VS Code подхватил установленные файлы типизации.

Вы также можете написать код, ссылающийся на модули в других файлах. Например, в app.js нам нужен модуль ./routes/index, который экспортирует класс Express.Router. Если вы активируете IntelliSense для маршрутов, вы увидите форму класса Router.

Отладка экспресс-приложения

Как и ранее для "Hello World", вам потребуется создать файл конфигурации отладчика launch.json для приложения Express. Щелкните значок «Отладка» на панели просмотра, а затем значок «Настройка шестеренки» в верхней части представления «Отладка», чтобы создать файл launch.json по умолчанию. Снова выберите среду Node.js.Когда файл создается впервые, VS Code ищет в package.json сценарий запуска и использует это значение в качестве программы (в данном случае это $/bin/www ) для конфигурации запуска. Вторая конфигурация подключения также создается, чтобы показать вам, как подключиться к запущенному приложению Node.js.

Сохраните новый файл и убедитесь, что в раскрывающемся меню конфигурации в верхней части представления «Отладка» выбран пункт «Запуск». Откройте app.js и установите точку останова в верхней части файла, где создается объект приложения Express, щелкнув поле слева от номера строки. Нажмите kb(workbench.action.debug.start), чтобы начать отладку приложения. VS Code запустит сервер в новом терминале и достигнет установленной нами точки останова. Оттуда вы можете проверять переменные, создавать часы и выполнять код пошагово.

Расширения

Сообщество постоянно разрабатывает все более и более полезные расширения для Node.js. Вот несколько популярных расширений, которые могут оказаться полезными.

- Откройте репозиторий/документацию пакетов Node.js прямо из VS Code. - Фрагменты для JavaScript в синтаксисе ES6. - Интегрирует ESLint в VS Code. - Интегрирует JSHint в VS Code. — Добавляет теги JSDoc @param и @return для выбранных сигнатур функций в JS и TS. - Украсьте уродливый JSON внутри VS Code. - Это расширение позволяет запускать js-beautify в VS Code.

Дальнейшие шаги

С Visual Studio Code можно исследовать гораздо больше, попробуйте следующие темы:

Читайте также: