Вивчай
Домашнє завдання #4 · Node.js, npm, package.json та VS Code
100 балів+30 бонусbeginner

Домашнє завдання #4: Налаштування VS Code та npm

Тема: Налаштування професійного середовища розробки

Мета завдання

Налаштувати VS Code та npm у проєкті з попереднього ДЗ. Після цього завдання у тебе буде повністю готове робоче середовище для веб-розробки.

Що потрібно зробити

Ось як виглядає весь процес — від npm init до git push:

Повний робочий процес: npm init, Prettier, npm run format, git pushПовний робочий процес: npm init, Prettier, npm run format, git push

1. Відкрити проєкт з ДЗ #3 у VS Code

cd my-portfolio
code .

2. Ініціалізувати npm та створити package.json

npm init -y

Після створення — відредагуй package.json:

  • Зміни name на назву свого проєкту
  • Додай description — короткий опис проєкту
  • Додай author — своє ім'я

3. Встановити Prettier та налаштувати

npm install --save-dev prettier

Створи файл .prettierrc в корені проєкту:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2
}

4. Додати npm scripts

Відкрий package.json і зміни секцію scripts:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "start": "echo 'Відкрий index.html у браузері через Live Server'"
  }
}

Перевір, що команди працюють:

npm run format
npm run format:check

5. Встановити розширення VS Code

Встанови ці розширення:

РозширенняДля чого
Live ServerЛокальний сервер з автооновленням
PrettierАвтоформатування коду
Auto Rename TagАвтоперейменування HTML-тегів

Увімкни автоформатування:

  1. Відкрий Settings (Ctrl+, або Cmd+,)
  2. Увімкни Format On Save
  3. Встанови Default Formatter → Prettier

6. Перевірити роботу

  1. Відкрий index.html у VS Code
  2. Набери ! та натисни Tab (Emmet) — має з'явитися HTML-шаблон
  3. Збережи файл (Ctrl+S) — Prettier має автоматично відформатувати
  4. Натисни Go Live (кнопка внизу VS Code) — сторінка має відкритися у браузері

7. Закомітити та запушити

git add .
git commit -m "Додано npm, Prettier та налаштування проєкту"
git push

Як здати завдання

  1. Переконайся, що на GitHub видно оновлений проєкт з package.json
  2. Надішли посилання на репозиторій

Критерії оцінювання

Критерій
Є package.json з правильними полями (name, description, author)✓
Prettier встановлений як devDependency✓
Є файл .prettierrc✓
Є npm scripts: format та format:check✓
node_modules/ додано в .gitignore✓
Код відформатований Prettier✓

Бонусні завдання

  • +10 балів: Додай ще один script "info", який виводить назву та версію проєкту (використай echo)
  • +10 балів: Встанови пакет live-server як devDependency і додай script "dev": "live-server" — тепер npm run dev запустить локальний сервер!
  • +10 балів: Створи файл .vscode/extensions.json зі списком рекомендованих розширень — коли хтось відкриє проєкт у VS Code, йому запропонують їх встановити

Пов'язані уроки