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

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

Створи файл hello.js:

const name = "Світ";
console.log(`Привіт, ${name}!`);
console.log("Node.js працює 🎉");

Запусти:

node hello.js
# Привіт, Світ!
# Node.js працює 🎉

Ось і все — ти щойно запустив JavaScript на своєму комп'ютері, без жодного браузера.

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

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

Хочеш працювати з датами? Є пакет. Хочеш валідувати email? Є пакет. Хочеш створити веб-сервер? Теж є.

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

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

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

# Створюємо папку проєкту
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": {
    "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 index.js",
    "hello": "echo Привіт від npm!",
    "build": "echo Збираю проєкт..."
  }
}

Запуск:

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

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

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

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

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

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

Інтерфейс

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

Відкрити термінал у VS Code: 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 — вбудована магія

Emmet вже є у VS Code. Просто набери скорочення та натисни Tab:

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

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

# 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. Встановлюємо інструменти для розробки
npm install --save-dev prettier

# 6. Додаємо script у package.json (вручну):
# "format": "prettier --write ."

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

# 8. Пушимо на GitHub (якщо є remote)
git push

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

Шпаргалка

Підсумок

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

Що далі?

Блок 1 завершено! Ми маємо всі інструменти: термінал, Git, GitHub, Node.js, npm та VS Code. Далі — домашнє завдання, де ти застосуєш все це на практиці. А потім починаємо Block 2: HTML — створюємо перші веб-сторінки!