Установка редактора кода

Введение

Прежде чем писать код, нужен инструмент. Когда пишете письмо, берёте ручку. Когда работаете с документами, открываете Word. А когда пишете код, включаете специальный редактор кода, и он становится вашей мастерской на ближайшие годы.

Редактор кода это не просто место, где набираете текст. Обычный Word не понимает, что происходит в коде. Он видит текст и думает: «Ага, сейчас добавлю красивый шрифт, выровняю по центру». В итоге код превращается в кашу. Редактор кода устроен иначе. Он знает язык программирования. Видит ключевое слово, раскрашивает одним цветом. Видит функцию, подсвечивает другим. Как учитель, который проверяет работу и подчёркивает ошибки красным, только здесь всё наоборот, правильное подсвечивается.

Если откроете файл с кодом в Word, он попытается его «улучшить». Добавит свои символы, исправит кавычки на красивые, может вставить невидимые пробелы. Весь код сломается, а вы будете сидеть и думать: «Я ничего не менял, но всё сломалось!» Знакомая история для каждого программиста.

Представьте библиотеку. Библиотекарь не просто хранит книги, он знает, где каждая стоит. Ищете книгу про историю, он показывает полку. Редактор кода работает так же. Начинаете писать слово, он предлагает закончить. Ищете функцию, он показывает, где она определена. Это называется автодополнение и навигация. Как подсказки в телефоне, только умнее в сто раз.

Самый популярный редактор называется VS Code. Его сделала Microsoft, да, та самая компания с Windows. Он бесплатный, работает на любой системе. VS Code стал стандартом, потому что простой снаружи, но мощный внутри. Как швейцарский нож, только для кода.

VS Code и первая страница

Скачиваете VS Code с официального сайта. После установки открываете программу. Перед вами пустой экран с панелью слева. В центре большое пространство для кода. Справа пока ничего нет, это место для расширений и дополнительной информации.

Создаёте папку на компьютере. Называете её, например, «myfirstsite». Открываете VS Code, выбираете File, потом Open Folder. Находите папку и открываете. Слева появляется структура папки. Если она пустая, видите только название.

Нажимаете на иконку нового файла рядом с названием папки. Появляется поле для имени. Пишете index.html. Расширение .html говорит компьютеру: «Это файл с кодом на HTML, не трогай его своим форматированием». Жмёте Enter. Файл создался, появился в панели слева. Кликаете на него. В центре экрана открылось пустое место для кода.

Пишете первую строку кода:

Смотрите, что случилось. Слово в угловых скобках раскрасилось синим. Текст внутри остался обычным. Это синтаксис хайлайтинг, подсветка синтаксиса. VS Code показывает: синее это команда, обычный текст это содержимое. Как если бы в учебнике правила выделяли жирным, а примеры оставляли обычным шрифтом.

Сохраняете файл. Жмёте Ctrl+S на Windows или Cmd+S на Mac. Файл сохранился. Название перестало быть белым и стало серым. Белый цвет это предупреждение: «Файл не сохранён, все изменения пропадут, если закроете программу».

Теперь открываете файл в браузере. Находите index.html в своей папке на компьютере. Двойной клик, и он откроется в дефолтном браузере. Можете кликнуть правой кнопкой и выбрать конкретный браузер, например Chrome.

На экране написано «Привет, мир!». Ровно то, что вы написали в коде. Браузер прочитал HTML файл, увидел тег заголовка и показал текст большими буквами. Магия? Нет, просто браузер понимает язык HTML.

Вы создали первый сайт. Одна строка кода, но она работает. На экране перед вами результат. В редакторе слева лежит исходник. Это основной цикл разработки, который будет повторяться тысячи раз. Пишете код, сохраняете, смотрите в браузере. Что-то не так? Меняете код, сохраняете, обновляете браузер. И так по кругу, пока не получится то, что задумали.

Со временем привыкнете к VS Code и начнёте пользоваться горячими клавишами. Вместо мыши будете нажимать комбинации клавиш, и работа ускорится раза в три. Но пока просто привыкайте. Откройте редактор, создайте файл, напишите код, посмотрите результат в браузере. Это и есть вся магия.

Перед следующим разделом предлагаем открыть дизайн сайта в Figma, который будем создавать по ходу учебника. В конце не только напишем его код, но и выгрузим в интернет, чтобы не держать компьютер постоянно включённым. И тогда каждый сможет увидеть ваше творение.