Командний рядок та файлова система

Командний рядок — ноутбук з терміналом на робочому столі розробника

Бачив у фільмах, як хакери швидко друкують щось у чорному вікні з текстом? Так от, це не магія — це термінал. І зараз ти навчишся ним користуватися.

Навіщо потрібен термінал?

Зазвичай ти керуєш комп'ютером мишкою: клікаєш на папки, перетягуєш файли, натискаєш кнопки. Це графічний інтерфейс (GUI). Але є й інший спосіб — командний рядок (CLI, Command Line Interface). Тут ти пишеш команди текстом, а комп'ютер їх виконує.

Навіщо це програмісту?

• Швидкість — досвідчений розробник робить через термінал за секунди те, що мишкою зайняло б хвилину
• Автоматизація — можна написати скрипт, який виконає 100 дій за тебе
• Без альтернативи — Git, npm, запуск серверів — все це працює через термінал. Без нього в розробці нікуди

Як відкрити термінал?

Побачиш вікно з текстом і курсором, який чекає на твою команду. Щось на кшталт:

oleksiy@macbook ~ %

Це промпт — він показує хто ти, на якому комп'ютері, і в якій папці зараз знаходишся. Після нього вводиш команди.

Файлова система — шафа з полицями

Перш ніж вчити команди, давай зрозуміємо як влаштований комп'ютер зсередини.

Уяви свій комп'ютер як велику шафу. В ній є полиці (папки), а на полицях лежать речі (файли). Полиці можуть бути вкладені одна в одну — папка всередині папки.

/ (корінь — сама шафа)
├── Users/
│   └── oleksiy/
│       ├── Desktop/
│       │   └── homework.txt
│       ├── Documents/
│       └── Downloads/
│           └── photo.jpg
└── Applications/

Кожен файл має свою "адресу" — шлях від кореня до нього. Наприклад: /Users/oleksiy/Downloads/photo.jpg.

Навігація: де я? що тут є? куди піти?

Три найважливіші команди на старті:

pwd             # Де я зараз? (Print Working Directory)
ls              # Що тут є? (List — список файлів і папок)
cd Desktop      # Піти в папку Desktop (Change Directory)

Ось як це виглядає в реальному терміналі:

Навігація в терміналі: pwd, ls, cd

Спробуй прямо зараз — відкрий термінал і введи pwd. Побачиш щось таке:

/Users/oleksiy

Це твоя домашня директорія — місце, де живуть твої файли.

Команда cd — переміщення

cd Documents        # Зайти в папку Documents
cd ..               # Піднятися на рівень вище (назад)
cd ~                # Повернутися в домашню директорію
cd /                # Перейти в корінь файлової системи

.. — це "папка вище". Можна навіть комбінувати: cd ../../Desktop — піднятися на два рівні вгору, потім зайти в Desktop.

Команда ls — перегляд вмісту

ls              # Просто список файлів
ls -l           # Детальний список (розмір, дата, права)
ls -a           # Показати приховані файли (починаються з крапки)
ls -la          # Комбінація: детально + приховані

Створення та видалення

mkdir my-project        # Створити папку (Make Directory)
touch index.html        # Створити порожній файл
cat index.html          # Подивитися вміст файлу

cp index.html copy.html     # Копіювати файл
mv old.html new.html        # Перейменувати файл
mv file.txt Documents/      # Перемістити файл у папку Documents

rm file.txt             # Видалити файл
rm -r old-folder        # Видалити папку з усім вмістом

Лайфхаки, які зекономлять тобі нерви

Ці три трюки перетворять термінал з "незручної штуки" на зручний інструмент:

Tab-автодоповнення, історія команд та clear

Tab — автодоповнення

Починаєш набирати назву файлу чи папки і натискаєш Tab — термінал допише решту сам:

cd Doc          # натискаєш Tab →
cd Documents/   # термінал доповнив!

Якщо є кілька варіантів (наприклад, Documents і Downloads) — натисни Tab двічі, і побачиш список.

Стрілки вгору/вниз — історія команд

Натисни стрілку вгору ↑ — з'явиться попередня команда. Ще раз — ще більш рання. Не потрібно набирати одне й те саме двічі.

clear — очистити екран

Коли в терміналі стає забагато тексту:

clear       # Очистити екран (або Ctrl+L)

Абсолютні та відносні шляхи

Є два способи вказати "адресу" файлу.

Абсолютний шлях — повна адреса від кореня. Як поштова адреса з країною, містом і вулицею:

/Users/oleksiy/projects/my-site/index.html

Відносний шлях — від того місця, де ти зараз стоїш. Як сказати "другий поверх, кімната праворуч":

./index.html            # Файл тут, у поточній папці
../styles/main.css      # На рівень вище, потім у папку styles
images/photo.jpg        # У підпапці images

Практика: створюємо структуру проєкту

Давай створимо папки і файли для майбутнього вебсайту — все через термінал:

Створення структури проєкту через термінал

mkdir my-first-site
cd my-first-site
touch index.html about.html contact.html
mkdir css images
touch css/style.css

Перевір результат:

ls -la

У тебе має вийти така структура:

my-first-site/
├── index.html
├── about.html
├── contact.html
├── css/
│   └── style.css
└── images/

Вітаю — ти щойно створив каркас вебсайту, не відкривши жодного вікна з папками!

Шпаргалка команд

Підсумок

У цьому уроці ми навчилися:

• Термінал — текстовий інтерфейс для керування комп'ютером, без якого не обходиться жоден розробник
• Навігація — pwd, ls, cd — три базові команди для орієнтації
• Створення і видалення — mkdir, touch, cp, mv, rm
• Шляхи — абсолютні (від кореня) та відносні (від поточної позиції)
• Лайфхаки — Tab, стрілки, clear — щоб працювати в терміналі було зручно

Що далі?

У наступному уроці ми познайомимося з Git — системою контролю версій. Вона допоможе тобі ніколи не втрачати свій код і забути про файли типу проєкт_ФІНАЛ_v3_ТОЧНО_ОСТАННІЙ.zip.