Как настроить 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, которое будет использовать установленный линтер. Есть разные способы интеграции линтера с расширением. Мы рассмотрим установку линтера глобально в системе.
- Установите Node.js, используя пакетный менеджер вашей операционной системы.
- Установите eslint командой npm install -g eslint . Вероятно, вам понадобится использовать sudo .
- Установите плагины, которые конфигурируют 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 init» через VS Code
Не получается запустить git init в VS Code, выдаёт сбой. Node.js я скачал. Подскажите, пожалуйста, что не так. Может дело в плагинах или неправильной установке.
Отслеживать
задан 7 июл 2022 в 9:46
user503974 user503974
VS Code нуждается в пути установки Node.js в системных переменных PATH. Добавьте C:\Program Files\nodejs в PATH
7 июл 2022 в 9:53
Я добавил path, но команда npm init все равно не работает. Ввожу в powershell.
– user503974
7 июл 2022 в 10:09
откройте окно powershell из панели задач windows и введите команды: node -v , npm -v. Они должны вам выдать номера версий, если работают, то всё должно работать и в VS Code. Если нет, то надо скачать и установить версию x64
7 июл 2022 в 10:21
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
VS Code нуждается в пути установки Node.js в системных переменных PATH. Добавьте C:\Program Files\nodejs в PATH.
Отслеживать
7,722 13 13 золотых знаков 25 25 серебряных знаков 54 54 бронзовых знака
ответ дан 7 июл 2022 в 10:10
1,938 1 1 золотой знак 11 11 серебряных знаков 9 9 бронзовых знаков
Сначала проверьте работают ли команды npm в терминале Если нет, то думаю следует переустановить node.js. Но если команды работают, то попробуйте через Windows PowerShell(администратор) написать это Set-ExecutionPolicy Unrestricted -Scope CurrentUser и потом ответить yes Чтоб найти Windows PowerShell(администратор) для тех кто не может найти, к иконке значка Пуск подводите мышь и нажимаете правую кнопку мыши и появится окно там можете выбрать Windows PowerShell(администратор) Этот метод помог мне исправить такую ошибку
Отслеживать
ответ дан 22 ноя 2022 в 20:40
1 1 1 бронзовый знак
22 ноя 2022 в 21:14
Выдавало такую же ошибку в терминале VS Code. Попробовал ввести команды node -v и npm -v в powershell они у меня сработали. Потом перезагрузил компьютер. Запустил VS Code и у меня получилось в терминале выполнить команду npm init -y.
Отслеживать
ответ дан 10 сен в 12:10
1 1 1 бронзовый знак
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.