РАЗДЕЛ 1 · УРОК 3

Установка инструментов: VS Code, Node.js, консоль браузера

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

⏱ ~25 минут 🛠️ Практическая установка 💻 Windows / Mac / Linux

🧰 Что мы устанавливаем и зачем

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

🔵

VS Code

Редактор кода. Здесь вы будете писать JavaScript. Это как Word, но для программистов — с подсветкой кода, умными подсказками и интеграцией с терминалом.

🟢

Node.js

Среда выполнения JS. Позволяет запускать JavaScript-файлы прямо в терминале, без открытия браузера. Нужен для работы с кодом вне браузера.

🔍

Консоль браузера

Встроенный инструмент разработчика в каждом браузере. Позволяет запускать JS прямо на странице, видеть ошибки, отлаживать код. Ничего не нужно устанавливать.

💡 Порядок важен: Сначала устанавливайте Node.js, потом VS Code. Node.js устанавливает npm — менеджер пакетов, который VS Code может подхватить автоматически. С браузерной консолью всё просто — она уже есть.

🟢 Шаг 1: Установка Node.js

Node.js — это движок, который позволит вам запускать JavaScript прямо в терминале, не открывая браузер. Кроме самого Node.js, вместе с ним устанавливается npm (Node Package Manager) — инструмент для управления сторонними библиотеками. npm нам понадобится позже.

Какую версию выбрать?

На сайте Node.js вы увидите две версии: LTS и Current.

✅ LTS (Long-Term Support)

Стабильная версия с долгосрочной поддержкой. Рекомендуется для обучения и рабочих проектов. Берите её.

Current

Последняя версия с новейшими функциями. Может содержать баги. Для обучения — не нужна.

Установка: Windows

Перейдите на сайт nodejs.org

Скачайте установщик LTS для Windows (файл с расширением .msi)

Запустите установщик. Нажимайте «Next» → «Next» → «Install». Всё по умолчанию. Галочку «Add to PATH» оставьте включённой — она важна!

После установки откройте PowerShell или Командную строку (Win + R, введите cmd, нажмите Enter) и проверьте:

node --version
npm --version

Вы увидите что-то вроде v20.11.0 и 10.2.4. Если видите версии — Node.js установлен успешно!

Установка: macOS

Перейдите на nodejs.org, скачайте LTS-версию для macOS (файл .pkg)

Запустите установщик, следуйте инструкциям

Откройте Терминал (Cmd+Space → «Терминал») и проверьте так же: node --version

💡 Продвинутый способ для macOS: Установите Homebrew (менеджер пакетов для macOS) и через него — Node.js: brew install node. Homebrew упрощает управление инструментами разработчика. Но для первого раза установщик с сайта — проще.

🔵 Шаг 2: Установка VS Code

Visual Studio Code (VS Code) — это редактор кода от Microsoft. Он бесплатный, с открытым исходным кодом, работает на Windows, macOS и Linux. По данным Stack Overflow, это самый популярный инструмент среди разработчиков в мире.

Почему именно VS Code, а не просто Блокнот?

Подсветка синтаксиса — ключевые слова, строки, числа подсвечиваются разными цветами. Код становится гораздо легче читать
Автодополнение — когда начинаете вводить слово, VS Code предлагает варианты. Меньше опечаток, быстрее набор
Встроенный терминал — можно запускать код прямо из редактора, не переключаясь
Отображение ошибок — многие ошибки подчёркиваются прямо в редакторе, как в Word
Расширения — огромная библиотека плагинов для любых задач

Как установить

Зайдите на code.visualstudio.com

Нажмите «Download» — сайт сам определит вашу операционную систему

Установите: на Windows — запустите .exe и следуйте мастеру; на macOS — перетащите иконку в Applications

Запустите VS Code. Выберите русский язык при первом запуске или установите расширение «Russian Language Pack»

Полезные расширения для JavaScript

После установки VS Code, зайдите в раздел Extensions (значок квадратиков на боковой панели или Ctrl+Shift+X) и установите:

Prettier

Автоматически форматирует код при сохранении. Ваш код всегда будет аккуратным без усилий.

ESLint

Находит и подчёркивает ошибки в коде прямо в редакторе. Как проверка орфографии, только для JS.

Live Server

Запускает HTML-файл в браузере и автоматически обновляет при изменениях. Незаменим при работе с DOM.

Создайте первый проект

Сделайте это прямо сейчас, чтобы проверить, что всё работает:

1. Создайте папку на компьютере: например, Documents/js-practice

2. В VS Code нажмите: Файл → Открыть папку → выберите созданную папку

3. Создайте файл: нажмите иконку «новый файл» в панели слева, назовите его hello.js

4. Напишите в файле:

console.log("Привет, VS Code!")

5. Откройте встроенный терминал: Вид → Терминал (или Ctrl+` — это обратный апостроф)

6. В терминале напечатайте:

node hello.js

Если в терминале появилось Привет, VS Code! — установка прошла успешно. Поздравляю!

🔍 Шаг 3: Консоль браузера — инструменты разработчика

Консоль разработчика — это встроенный инструмент в каждом современном браузере. Устанавливать ничего не нужно. Она позволяет:

Запускать JavaScript прямо на странице, в реальном времени
Видеть вывод console.log() из вашего кода
Просматривать ошибки — красным, с указанием файла и строки
Изучать структуру DOM (HTML-дерево страницы)
Отслеживать сетевые запросы

Как открыть консоль

🌐 Chrome / Edge

Нажмите F12
или Ctrl+Shift+I (Windows)
или Cmd+Opt+I (Mac)
Перейдите на вкладку Console

🦊 Firefox

Нажмите F12
или Ctrl+Shift+I
Перейдите на вкладку Консоль

🧭 Safari (Mac)

Сначала: Safari → Настройки → Дополнения → «Показывать меню Разработчика»
Затем: Cmd+Opt+C

После открытия инструментов разработчика вы увидите несколько вкладок. Нас сейчас интересует вкладка Console (Консоль). Это текстовое поле внизу, куда можно вводить JavaScript-код и сразу видеть результат.

Попробуйте прямо сейчас

Откройте консоль в браузере, кликните на поле ввода (там будет мигающий курсор) и введите:

1 + 1

Нажмите Enter. Браузер тут же ответит: 2. Это JavaScript посчитал за вас. Теперь попробуйте:

console.log("Привет из консоли!")

Снова Enter. Вы увидите вывод: Привет из консоли! — и внизу строку undefined (это нормально — это возвращаемое значение самого console.log). Консоль — это ваша игровая площадка для быстрого тестирования кода.

🎯 Привычка хорошего разработчика: Держите консоль открытой во время разработки. Все ошибки, все предупреждения, весь вывод console.log() — всё будет здесь. Если что-то «не работает» — первое, что нужно сделать, это открыть консоль и посмотреть на красные сообщения.

🏁 Проверяем: всё готово?

Давайте убедимся, что ваша рабочая среда готова к работе. Пройдите по чеклисту:

✅

Node.js установлен

В терминале: node --version выводит версию (например, v20.x.x)

✅

npm установлен

npm --version выводит версию — устанавливается вместе с Node.js

✅

VS Code установлен и открыт

Можете создать файл .js и запустить его через встроенный терминал

✅

Консоль браузера открывается по F12

На вкладке Console можете вводить JS и видеть результат

🤔 Что-то не работает? Самые частые проблемы: 1) Node.js не в PATH — переустановите с галочкой «Add to PATH» и перезапустите терминал. 2) Терминал не видит node — закройте его и откройте заново после установки. 3) На macOS требует пароль при установке — это нормально, введите пароль компьютера.

✅ Итоги урока

Node.js — устанавливается с nodejs.org, всегда берите LTS-версию. Проверка: node --version
VS Code — лучший редактор для JavaScript. Скачивается с code.visualstudio.com
Полезные расширения: Prettier (форматирование), ESLint (ошибки), Live Server (автообновление в браузере)
Консоль браузера — открывается через F12. Вкладка Console — ваша площадка для JS-экспериментов
Держите консоль открытой во время разработки — все ошибки будут видны сразу
Встроенный терминал VS Code (Ctrl+`) позволяет запускать node файл.js не выходя из редактора

В следующем уроке — пишем первый настоящий код: изучим console.log(), запустим JavaScript в браузерной консоли и через Node.js, и разберём, что происходит под капотом. 🎉

Инструменты разработчика

6 вопросов