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

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

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

Налаштувати npm та Prettier у репозиторії курсу. Після цього завдання Prettier автоматично форматуватиме код у всіх твоїх майбутніх ДЗ — один раз налаштував, користуєшся весь курс.

Що ти вже маєш

Репозиторій my-web-course, склонований на комп'ютер у ДЗ #3. Усі налаштування з цього ДЗ робляться в корені репозиторію — вони спрацюють для всього курсу.

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

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

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

1. Відкрити репозиторій курсу у VS Code

cd my-web-course
code .

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

У корені репозиторію:

npm init -y

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

• Зміни name на my-web-course
• Додай 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 ."
  }
}

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

npm run format
npm run format:check

npm run format пройдеться по всіх твоїх HTML-файлах з ДЗ #1-3 і відформатує їх — подивись у git diff, що змінилося!

5. Створити README для ДЗ

Створи папку hw-04/ з файлом README.md: 2-3 речення про те, що налаштовано (npm, Prettier, які скрипти є та як їх запускати).

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

Зроби мінімум 3 коміти по ходу роботи (наприклад: "Ініціалізовано npm", "Додано Prettier з конфігурацією", "Відформатовано код попередніх ДЗ") та запуш:

git push

Налаштуй для себе (не оцінюється)

Ці налаштування живуть на твоєму комп'ютері, а не в репозиторії — чекер їх не побачить. Але саме вони роблять щоденну роботу комфортною, тому дуже радимо:

Розширення VS Code:

Автоформатування при збереженні:

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

Перевір, що все працює:

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

Як здати

1. Робота — в публічному GitHub-репозиторії курсу my-web-course: package.json та .prettierrc в корені, README — у папці hw-04/
2. Мінімум 3 коміти з осмисленими повідомленнями (не "fix"/"update")
3. Переконайся, що node_modules/ НЕ потрапила на GitHub
4. Надішли посилання на репозиторій

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

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