Как установить npm в vs code

Расширения VS Code и пакеты npm

Прошу прощения за наивный вопрос — я новичок в js. Искал, где мог, но объяснения не нашел. Видать, слишком простой вопрос, что должен быть понятен «по умолчанию». Однако, оным остался озадачен, оконфужен окончательно! Вопрос про расширения VS Code и пакеты npm, в частности ESLint: 1.Установить расширение ESLint в VS Code, это не тоже самое, что установить пакет npm («npm install eslint —save-dev»)? 2.Надо сделать и то, и другое? 3.Они взаимно дополняют друг друга? 4.И, в целом, в чем разница между установкой расширения VS Code и соответствующим (одноименным) пакетом npm? 5.Спасибо!

Отслеживать
задан 11 фев 2021 в 20:49
35 4 4 бронзовых знака
Это равносильно установить расширение с/с++ но не иметь компилятора.
– user206435
11 фев 2021 в 21:56
Понятно! Спасибо!
11 фев 2021 в 22:10

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Установка пакета в npm — это то, с чем Ваш код сможет работать. eslint позволит Вам с командрой строки запускать проверку кода.

Одноименный плагин для VSCode (не только для eslint) — это обычно красивая оболочка, что бы было приятно видеть результаты прямо в коде (в редакторе кода), что бы был красиво подчеркнут код, поменять настройки и тому подобное. Обычно такие плагины для редактора не включают в себя одноименный nmp модуль. А часто совсем не связаны между собой.

Если почитать описания плагина, то все стает на свои места

The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn’t provide one the extension looks for a global install version. If you haven’t installed ESLint either locally or globally do so by running npm install eslint in the workspace folder for a local install or npm install -g eslint for a global install.

Короткий перевод — ищет в текущем проекте, если нет — глобально, если и там нет — устновите сами.

Короткий ответ на 1,2,3 — да.

Как настроить VS Code для разработки на JavaScript

Visual Studio Code – популярный бесплатный редактор кода, созданный Microsoft’ом для программистов. VS Code никак не связан с Visual Studio. VS Code работает быстрее Атома, активно развивается и легко расширяется плагинами.

• отладчик кода
• встроенный терминал
• удобные инструменты для работы с Git
• подсветка синтаксиса для множества популярных языков и файловых форматов
• удобная навигация
• встроенный предпросмотр Markdown
• умное автодополнение
• встроенный пакетный менеджер

Пакетный менеджер нужен для установки и удаления пакетов расширений (плагинов). Для удобной разработки на JavaScript для бэкенда и фронтенда нужно установить несколько пакетов.

Для установки нового пакета зайдите в выпадающее меню «View» на вкладку «Extensions» и введите название пакета в строке поиска, а затем нажмите кнопку «Install».

Babel и ES6

VS Code содержит понятие «сборки проекта». Редактор можно настроить таким образом, чтобы сборка JavaScript-проекта заключалась в конвертации кода из ES6 в читаемый ES5 с Source Maps с помощью Babel.

Добавьте таск (задание) в файл tasks.json в директории .vscode в корне вашего проекта:

 "version": "2.0.0", "type": "shell", "tasks": [  "label": "watch", "command": "$/node_modules/.bin/babel src --out-dir dist -w --source-maps", "group": "build", "isBackground": true > ] > 

Теперь комбинация клавиш Shift+Ctrl+B (Windows/Linux) или Shift+CMD+B (macOS) запустит сборку.

Стандарты кодирования

Eslint – это утилита, проверяющая стандарты кодирования на JavaScript. Стандарт де-факто в мире JS.

Нужно сначала установить eslint в системе, а потом установить расширение VS Code, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.

1. Установите Node.js, используя пакетный менеджер вашей операционной системы.
2. Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
3. Установите плагины, которые конфигурируют eslint . Без них (по умолчанию) eslint ничего не проверяет.

npm install -g eslint-config-airbnb-base eslint-plugin-import 

extends: - 'airbnb-base' env: node: true browser: true 

Автоматическое дополнение

VS Code содержит мощную систему анализа кода для автодополнений и подсказок – IntelliSense.

IntelliSense работает сразу, но для настройки деталей нужно создать конфигурационный файл jsconfig.json .

jsconfig.json

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

 "compilerOptions":  "target": "ES6" >, "exclude": [ "node_modules", "**/node_modules/*" ] > 

Здесь можно настроить, например, какие директории стоит исключить из системы автодополнений IntelliSense. VS Code совместим с node, webpack, bower, ember и другими популярными инструментами. Полная документация по jsconfig доступна на сайте VS Code.

Отладка

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

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

• Debugger for Chrome
• Debugger for Firefox
• Debugger for Edge

Подробнее об отладке можно узнать на сайте VS Code.

Ссылки

Курс по настройке окружения для работы в современной экосистеме JavaScript.

Почему при команде npm -v через VScode terminal вылазит ошибка?

При запуске в CMD версию показывает, но с какой-то помаркой на CALL:

Делая тоже самое в VScode выдает какие-то ошибки:

Из-за этого не могу создать окружение для React проекта. Второй день пытаюсь найти ответы, но их нет нигде. То что я запускаю узнать версию через -v, а не —version никак не влияет на результат.
Есть догадка, что проблема с тем, что не запускаются bat/cmd файлы от имени пользователя. Но на эту проблему я тоже не могу найти адекватный ответ.

• Вопрос задан более года назад
• 1123 просмотра

1 комментарий

Простой 1 комментарий

Downloads

Download the Node.js source code or a pre-built installer for your platform, and start developing today.

Recommended For Most Users
Latest Features

Windows Installer (.msi)	32-bit	64-bit		ARM64
Windows Binary (.zip)	32-bit	64-bit		ARM64
macOS Installer (.pkg)	64-bit / ARM64
macOS Binary (.tar.gz)	64-bit		ARM64
Linux Binaries (x64)	64-bit
Linux Binaries (ARM)	ARMv7		ARMv8
Source Code	node- v20.9.0 .tar.gz

Additional Platforms

• Signed SHASUMS for release files(How to verify)
• All download options
• Installing Node.js via package manager
• Previous Releases
• Nightly builds
• Unofficial builds
• Building Node.js from source on supported platforms
• Installing Node.js via binary archive
• Install on Windows Subsystem for Linux (WSL)

Copyright OpenJS Foundation and Node.js contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.