Как работать с node js в vs code

Исправление пути npm в Windows 8 и 10

Много гуглили, пробовали переустановить node.js с помощью официального установщика, но мой путь npm по-прежнему не работает.

Это не работает

Я получаю сообщение об ошибке: отсутствует модуль npm-cli.js

Через 2 часа поиска в Google я обнаружил обходной путь
Вместо простого " npm " я набираю

Но как мне исправить установку nodejs, чтобы я мог просто набрать npm?

17 ответов

Вам необходимо добавить C:\Program Files\nodejs в переменную среды PATH. Для этого выполните следующие действия:

  1. Используйте чудо-кнопку глобального поиска для поиска «переменных среды»
  2. Нажмите «Изменить системные переменные среды»
  3. Щелкните «Переменные среды» в диалоговом окне.
  4. В поле «Системные переменные» найдите путь и отредактируйте его, включив C:\Program Files\nodejs . Убедитесь, что он отделен от других путей символом ; .

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

Отредактируйте переменные среды System и введите следующий путь:

Если у вас Windows, попробуйте этого чувака:

1.) Найдите переменные среды в поле поиска меню «Пуск».
2.) Щелкните по нему и перейдите к Environment Variables.
3.) Нажмите ПУТЬ , нажмите Edit
4.) Нажмите Создать и попробуйте скопировать и вставить это: C: \ Program Files \ nodejs \ node_modules \ npm \ bin

Если у вас возникла ошибка. Сделайте номер 4.) Нажмите «Создать», затем просмотрите папку bin

  • Вы также можете посетить эту ссылку для получения дополнительной информации.

Перейдите в панель управления -> Система -> Расширенные настройки системы, затем переменные среды.

Отсюда найдите переменную пути, перейдите в конец строки и вставьте «C: \ Program Files \ nodejs \ node_modules \ npm \ bin» (измените путь к каталогу, в котором вы его установили, например, если вы специально установили его где угодно меняй это)

Я использовал командлет и перешел по пути, по которому вы хотите переключить свои файлы npm. Введите npm root -g , чтобы узнать, по какому пути установлен ваш npm. Затем используйте префикс набора конфигурации npm , и ваш путь npm будет изменен на любой каталог, в котором вы сейчас находитесь.

Получить путь от npm:

npm config get prefix

И просто в качестве справки на будущее, это путь, который я добавил в Windows 10:

Обновить:

Если вы хотите добавить его для всех пользователей, просто добавьте следующий путь [от @ glenn-lawrence из комментариев]:

Я могу быть полным новичком, но я понятия не имел, что мне нужно сначала установить npm-cli. Я просто предположил, что он у меня уже есть.

Когда вы находитесь на Windows , но бежите VS Code в Windows Subsystem for Linux вот так

linux@user: /home$ code .

Вы действительно хотите установить NodeJs на Linux с

linux@user: /home$ sudo apt install nodejs

Установка NodeJs на Windows , изменение PATH и перезапуск не принесут вам никаких результатов.

Если вы не можете работать с пакетами npm, вероятно, у вас плохая конфигурация с пакетами установки npm, попробуйте следующее:

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

Добавить Путь к среде

C: \ Program Files \ nodejs \ node.exe; C: \ Users [ваше имя пользователя] \ AppData \ Roaming \ npm

У меня была эта проблема на 2 компьютерах в моем доме с Windows 10 на каждом. Проблема началась, когда мне пришлось изменить несколько переменных среды для проектов, над которыми я работал над Visual Studio 2017 и т. Д. После нескольких месяцев, когда я вернулся к использованию node js и npm, у меня снова возникла эта проблема, и ни одно из вышеперечисленных решений не помогло. Я видел комментарий Шона к решению Яра и смешал оба решения: 1) в окне переменных среды у меня была одна дополнительная переменная, которая содержала это значение:% APPDATA% \ npm. Я удалил его, и проблема исчезла!

Шаги 1 в пользовательской переменной и системной переменной

Затем проверьте оба node -v и npm -v затем попробуйте обновить npm i -g npm

Если после успешной установки npm и вы хотите установить VueJS, то это то, что вам следует сделать

После выполнения следующей команды (от имени администратора)

npm install —global vue-cli

Он поместит vue.cmd в следующий каталог C:\Users\YourUserName\AppData\Roaming\npm

Вы увидите это в своем каталоге.

Теперь, чтобы использовать vue как команду в cmd. Откройте cmd от имени администратора и выполните следующую команду.

setx /M path "%path%;%appdata%\npm"

Теперь перезапустите cmd и снова запустите vue. Он должен работать нормально, и тогда вы сможете приступить к разработке с помощью VueJS.

Надеюсь, это поможет.

Я делал это в Windows 10,

  1. Искать переменные среды в поиске Windows
  2. В результате появится опция «Изменить системные переменные среды».
  3. Откройте его, выберите «Путь» и нажмите «Изменить», затем нажмите «Создать», добавьте путь к вашей папке nodeJS, т.е. на моем компьютере он установлен в c:\programfiles\nodejs\node_modules\npm\bin
  4. После добавления нажмите «ОК», затем закройте

Теперь вы можете написать свою команду в командной строке или в PowerShell.

Если вы используете WIndows 10, выберите PowerShell с богатым пользовательским интерфейсом.

Измените путь для узла js в переменной окружения.

setting environment variable

Это сработало для меня: 1. npm root -g (чтобы увидеть, что текущий npm установлен) 2. npm config set prefix (для изменения пути)

Установленный диспетчер версий узла (NVM) для Windows: https://github.com/coreybutler/nvm-windows

Я использую Windows 10 — 64 бит, поэтому запускаю . Команды:

  • nvm arch 64 (чтобы по умолчанию использовать 64-битный исполняемый файл)
  • nvm list (чтобы перечислить все доступные версии узлов)
  • nvm install 8.0.0 (чтобы загрузить версию узла 8.0.0 — можете выбрать любой)
  • nvm use 8.0.0 (для использования этой конкретной версии)

В моем случае мне пришлось просто переключиться на версию 8.5.0 , а затем снова переключиться на 8.0.0 , и это было исправлено. Очевидно, NVM устанавливает переменные PATH всякий раз, когда вы делаете этот переключатель.

Как использовать Visual Studio Code для разработки и отладки Node.js

Ознакомьтесь с инструкциями по разработке и отладке проекта на JavaScript в Node.js с помощью Visual Studio.

Подготовка среды

Установите git. Интеграция Visual Studio Code с git предоставляет возможность управления Системой управления версиями на боковой панели.

Получите строку подключения к базе данных mongoDB.

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

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

Клонирование примера проекта на локальный компьютер

Чтобы приступить к работе, скачайте пример проекта, как описано ниже.

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

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

В командной строке палитра команд введите gitcl , выберите команду gitcl и нажмите клавишу Ввод.

Команда gitcl в строке командной палитры Visual Studio Code

При появлении запроса на ввод URL-адреса репозиториявведите , а затем нажмите клавишу Ввод.

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

Обозреватель Visual Studio Code

Использование встроенного терминала bash для установки зависимостей

В этом проекте Node.js сначала необходимо установить все зависимости проекта из npm.

Нажмите клавишу CTRL ` , чтобы отобразить встроенный терминал Visual Studio Code.

Введите yarn и нажмите клавишу yarn .

Выполнение команды yarn в Visual Studio Code

Переход к файлам и коду проекта

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

Нажмите клавиши CTRL P.

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

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

Наведите указатель мыши на переменную database (импортирована в строку 6), чтобы просмотреть ее тип. Эта возможность быстро проверять переменные, модули и типы в файле удобна при разработке проектов.

Просмотр типа в Visual Studio Code наведением указателя мыши

Нажмите кнопку мыши в пределах диапазона переменной, например database, чтобы просмотреть все ссылки на эту переменную в том же файле. Чтобы просмотреть все ссылки на переменную в проекте, щелкните переменную правой кнопкой мыши и в контекстном меню выберите Найти все ссылки.

Поиск всех ссылок с помощью Visual Studio Code

Вы также можете просмотреть определение переменной, даже если оно находится в другом файле. Например, щелкните правой кнопкой мыши database.localUrl (строка 12) и в контекстном меню выберите Показать определение.

Отображение определения переменной в Visual Studio Code

Использование функции автозаполнения в mongoDB

Строка подключения MongoDB программно задана в объявлении свойства database.localUrl . Выполнив инструкции из этого раздела, вы измените код, чтобы получить строку подключения из переменной среды. Вы также узнаете о функции автозаполнения Visual Studio Code.

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

Если при вводе кода вручную (вместо копирования и вставки) поставить точку после process , Visual Studio Code отобразит список доступных элементов глобального API process Node.js.

VS Code: переменные среды с process.env

Автозаполнение работает, потому что Visual Studio Code использует TypeScript в фоновом режиме (даже для JavaScript), чтобы передавать информацию о вводе, которая может передаваться в список завершения при вводе. Visual Studio Code может определить, что проект является проектом Node.js, и автоматически скачать файл вводимых элементов TypeScript для Node.js из NPM. Файл вводимых элементов позволяет получить автозаполнение для других глобальных значений Node.js, например Buffer и setTimeout , а также все встроенные модули, такие как fs и http .

Кроме встроенных API-интерфейсов Node.js, функция автоматического получения значений также поддерживает более 2000 модулей сторонних производителей, таких как React, Underscore и Express. Например, чтобы отключить Mongoose от сбоев в примере приложения, если он не может подключиться к настроенному экземпляру базы данных MongoDB, вставьте следующую строку кода в строку 13:

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

Автозаполнение автоматически отображает элементы API

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

Выполнение локального приложения Node.js

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

Мониторинг StdOut приложения в консоли отладки

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

Ввод кода в консоль отладки

Вы смогли запустить приложение нажатием клавиши F5, так как открытый сейчас файл является файлом JavaScript (server.js). Поэтому Visual Studio Code предполагает, что проект является приложением Node.js. Закройте все файлы JavaScript в Visual Studio Code и нажмите клавишу F5. В Visual Studio Code появится запрос на выбор среды:

Выбор среды выполнения

Откройте браузер и перейдите к http://localhost:8080 , чтобы просмотреть запущенное приложение. Введите сообщение в текстовое поле и добавьте или удалите несколько задач, чтобы понять, как работает приложение.

Добавление или удаление элементов списка дел в приложении

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

Кроме того что в Visual Studio Code можно запустить приложение и взаимодействовать с ним через консоль, вы также можете задавать точки останова непосредственно в коде. Например, нажмите CTRL P , чтобы открыть средство выбора файлов. Когда появится средство выбора файлов, введите route и выберите файл route .

Установите точку останова на строке 28, представляющей маршрут Express (вызывается, когда приложение пытается добавить запись из списка задач). Чтобы задать точку останова, щелкните область слева от номера строки в редакторе, как показано на следующем рисунке.

Настройка точки останова в Visual Studio Code

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

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

Visual Studio Code приостанавливает выполнение на точке останова

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

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

Как упоминалось выше, приложение со списком задач — это приложение MEAN, то есть приложение, интерфейс и серверная часть которого написаны с помощью JavaScript. То есть, если вы выполняете отладку серверного кода (Node/Express), в определенный момент может потребоваться отладить код интерфейса (Angular). Для этого в Visual Studio Code есть множество расширений, в том числе встроенная отладка Chrome.

Перейдите на вкладку расширения и введите в поле поиска:

Расширение отладки Chrome для Visual Studio Code

Выберите расширение с именем Отладчик для Chrome и выберите Установить. Установив расширение отладки Chrome, щелкните Перезагрузить, чтобы закрыть и снова открыть Visual Studio Code для активации расширения.

Перезагрузка Visual Studio Code после установки расширения отладки Chrome

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

Создание полностекового файла launch.json для Visual Studio Code

Чтобы создать файл launch.json, откройте вкладку Отладка, выберите значок шестеренки (на нем должна быть небольшая красная точка вверху) и среду node.js.

Настройка файла launch.json в Visual Studio Code

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

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

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

Добавление конфигурации Chrome в Visual Studio Code

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

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

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

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

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

Выполнение конфигурации в Visual Studio Code

Выполнение конфигурации запускает приложение Node.js (это можно увидеть в выходных данных консоли отладки) и Chrome (который настроен для перехода к приложению Node.js по адресу http://localhost:8080 ).

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

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

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

Отладка внешнего кода в Visual Studio Code

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

Необходимо обратить внимание на два важных момента.

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

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

После этого вы можете эффективно отладить внешний и внутренний код JavaScript или код полного стека JavaScript непосредственно в Visual Studio Code.

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

Начало работы с Node.js и терминалом?

3) Вот я создала папку helloworld.js с кодом console.log("Hello World!");
Но КАК . выполнить команду node helloworld.js ? Что сделать надо? В черной этой программе Windows PowerShell написать? Но оно мне ошибку выдает, говорит, что файл не найден.

До этого у меня на черном фоне получилось получить версии программ
PS C:\Users\Аня> node -v
v9.3.0
PS C:\Users\Аня> npm -v
5.5.1

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

Ваш адрес email не будет опубликован.