Node.js, npm та VS Code

Node.js npm та VS Code — організоване робоче місце розробника з монітором та клавіатурою

У попередніх уроках ми опанували термінал, Git та GitHub. Тепер час налаштувати останні інструменти — Node.js, npm та VS Code. Після цього уроку у тебе буде повний набір інструментів, як у професійного розробника.

Що таке Node.js?

До 2009 року JavaScript працював тільки в браузері. Хочеш запустити JS-код — відкривай Chrome. А потім Раян Дал (Ryan Dahl) створив Node.js — середовище, яке дозволяє запускати JavaScript на комп'ютері, без браузера.

Це змінило все: одна мова — і для сайтів, і для серверів, і для інструментів розробки.

Встановлення Node.js

1. Перейди на nodejs.org
2. Завантаж версію LTS (Long Term Support) — це стабільна версія, яку рекомендують для роботи
3. Встанови з налаштуваннями за замовчуванням

Перевір у терміналі:

node --version
# v22.x.x

npm --version
# 10.x.x

Бачиш версії? Чудово, Node.js встановлено. Зверни увагу — npm встановився автоматично разом з Node.js.

Запускаємо JavaScript без браузера

Давай спробуємо прямо зараз. Створи файл hello.js:

const name = "Світ";
console.log(`Привіт, ${name}!`);

// Трохи математики
const a = 10;
const b = 3;
console.log(`${a} + ${b} = ${a + b}`);
console.log(`${a} * ${b} = ${a * b}`);

Запусти:

Запуск JavaScript через Node.js — node hello.js

node hello.js
# Привіт, Світ!
# 10 + 3 = 13
# 10 * 3 = 30

Ти щойно запустив JavaScript на своєму комп'ютері, без жодного браузера. Поки що ми не будемо глибоко вивчати JS — це буде в Block 4. Але тепер ти знаєш, що Node.js дозволяє запускати JS-файли командою node файл.js.

npm — менеджер пакетів

npm (Node Package Manager) — це як App Store, але для коду. Замість того щоб писати все з нуля, ти завантажуєш готові бібліотеки (пакети), які створили інші розробники.

Хочеш працювати з датами? Є пакет dayjs. Валідувати email? Є validator. Створити веб-сервер? express. Для будь-якої задачі, швидше за все, вже є готовий пакет.

package.json — паспорт проєкту

Кожен проєкт на Node.js починається з файлу package.json. Це як паспорт: в ньому записано як називається проєкт, які пакети він використовує і які команди можна запустити.

Створюємо package.json

npm init та npm install — створення проєкту і встановлення пакетів

mkdir my-app
cd my-app

# Створюємо package.json з дефолтними значеннями
npm init -y

Відкрий створений файл — побачиш:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }
}

Встановлення пакетів

# Встановити пакет (додається в dependencies)
npm install dayjs

# Встановити пакет тільки для розробки (devDependencies)
npm install --save-dev prettier

# Видалити пакет
npm uninstall dayjs

Після npm install dayjs стались три речі:

1. З'явилася папка node_modules/ — тут живе код пакету
2. В package.json додався запис в dependencies
3. З'явився файл package-lock.json — він фіксує точні версії всіх пакетів

{
  "dependencies": {
    "dayjs": "^1.11.10"
  }
}

Чому node_modules НЕ комітять в Git?

Папка node_modules може містити тисячі файлів і важити сотні мегабайт. Але це не проблема — достатньо мати package.json. Будь-хто може виконати одну команду:

npm install

І npm завантажить все необхідне. Тому в .gitignore завжди є:

node_modules/

npm scripts — власні команди

Найкорисніша частина package.json — це scripts. Ти можеш створити свої команди-шорткати:

{
  "scripts": {
    "start": "node server.js",
    "hello": "echo Привіт від npm!",
    "format": "prettier --write ."
  }
}

Запуск:

# start та test — особливі, можна без "run"
npm start

# Всі інші — через "run"
npm run hello
npm run format

npx — запустити без встановлення

Іноді хочеш спробувати пакет, не встановлюючи його. Для цього є npx:

# Запускає пакет одноразово, без npm install
npx cowsay "Привіт!"

Побачиш корівку, яка "говорить" у терміналі. npx завантажить пакет тимчасово, запустить — і видалить. Корисно для одноразових інструментів.

VS Code — редактор коду

Visual Studio Code — найпопулярніший редактор коду у світі. Безкоштовний, швидкий, з тисячами розширень. Його використовують і студенти, і розробники в Google.

Встановлення

Завантаж з code.visualstudio.com та встанови.

Відкриваємо проєкт

Найзручніший спосіб — з терміналу:

# Відкрити поточну папку в VS Code
code .

Інтерфейс

┌──────────────────────────────────────────┐
│  Menu Bar                                │
├──────┬───────────────────────────────────┤
│      │                                   │
│ Side │         Editor                    │
│ Bar  │         (тут пишеш код)           │
│      │                                   │
│      ├───────────────────────────────────┤
│      │  Terminal (вбудований термінал)    │
└──────┴───────────────────────────────────┘

Вбудований термінал відкривається через Ctrl+** (або **Cmd+ на Mac). Тепер можеш писати код і запускати команди в одному вікні!

Обов'язкові розширення

Натисни іконку Extensions у Side Bar (або Ctrl+Shift+X) та встанови:

Налаштування Prettier

Після встановлення Prettier увімкни автоформатування:

1. Відкрий налаштування: Ctrl+, (або Cmd+,)
2. Знайди "Format On Save" → постав галочку
3. Знайди "Default Formatter" → обери "Prettier"

Тепер при кожному збереженні (Ctrl+S) код автоматично стає красивим і акуратним.

Гарячі клавіші VS Code

Ці шорткати зекономлять тобі багато часу:

Emmet — швидке написання HTML

Emmet вже вбудований у VS Code. Набери скорочення і натисни Tab:

Emmet економить дуже багато часу при написанні HTML — ти будеш активно використовувати його в наступних блоках.

Практика: зібрати все разом

Давай створимо повноцінний проєкт з усіма інструментами, які ми вивчили:

# 1. Створюємо проєкт
mkdir my-website && cd my-website

# 2. Ініціалізуємо Git та npm
git init
npm init -y

# 3. Створюємо файли
touch index.html style.css script.js

# 4. Створюємо .gitignore
echo "node_modules/" > .gitignore

# 5. Встановлюємо Prettier
npm install --save-dev prettier

# 6. Перший коміт
git add .
git commit -m "Ініціалізація проєкту: HTML/CSS/JS + npm + Git"

# 7. Відкриваємо в VS Code
code .

Тепер у VS Code:

• Відкрий index.html, набери ! і натисни Tab — отримаєш шаблон HTML
• Натисни Go Live внизу (від Live Server) — відкриється браузер з твоєю сторінкою
• Зміни щось у файлі, збережи — побачиш результат миттєво

Вітаю — ти маєш повний набір інструментів професійного розробника!

Шпаргалка

Підсумок

• Node.js — запускає JavaScript поза браузером
• npm — менеджер пакетів (App Store для коду)
• package.json — паспорт проєкту з описом залежностей та команд
• package-lock.json — фіксує точні версії пакетів (комітити!)
• node_modules — папка з пакетами (не комітити!)
• npx — запустити пакет одноразово, без встановлення
• VS Code — редактор коду з розширеннями, терміналом та Emmet

Що далі?

У наступному уроці дізнаємося про формати даних — JSON, Markdown, CSV та інші. Ти вже зустрічав package.json та README.md — час розібратися, що це за формати і навіщо вони потрібні.