Обучение созданию сайтов (Часть 1)

Знакомство с VS Code

Установка Visual Studio Code

Сначала мы зайдем на сайт Visual Studio Code, чтобы скачать файл установки. Выберем Download. Дождитесь, пока файл скачается, и запустите его. Следуйте мастеру установки.

На шаге 2 можно поставить галочку у пункта “Создать значок на Рабочем столе”.

После нажатия на кнопку “Установить”, дождитесь окончания установки.

Интерфейс и плагины

Интерфейс программы выглядит следующим образом:

1. Название файла и папки, с которыми вы работаете; 2. Проводник - инструмент для поиска, создания и открытия файлов и папок.Здесь вы обнаружите все файлы, которые находятся в вашей рабочей папке; 3. Поиск и замена; 4. Инструменты для работы с системами контроля версий (это специальные сервисы для того, чтобы несколько разработчиков могли с удобством работать над одним проектом); 5. Запуск (для программирования на JavaScript); 6. Плагины; 7. Учетные записи; 8. Настройки.

Полезные плагины:

1. Русский язык. Зайдите в раздел “Плагины” и напишите в строке поиска “russian”. Выберите нужный плагин и установите его. По окончании установки перезапустите программу. Зайдите в раздел “Плагины” заново. Этот плагин должен появиться в списке установленных. C помощью плагина “russian” у вас появиться языковой пакет для русского языка, который содержит локализацию интерфейса VS Code.

2. Live Server. С помощью него вы можете написать что-то в файле, сохранить и сразу увидеть в браузере, что поменялось.

3. CSS Peek. Позволяет быстро найти CSS, прописанные для тега или идентификатора.

4. Prettier - Code formatter - плагин для красивой расстановки отступов у тегов.

5. Auto Rename Tag - автоматически переименовывает закрывающий тег.

Рабочая область, создание папок и файлов

Рабочая область - это объект, в котором показываются все папки, в которых вы работаете. Зайдите в Visual Studio Code и выберите в меню Файл пункт “Добавить папку в рабочую область”. Выберите нужную папку. После этого папка отобразится в Проводнике.

Для создания папок щелкните по названию рабочей области правой кнопкой мыши и выберите “Новая папка”.

Назовите ее. Видно, что названия вложенных папок немного сдвинуты вправо. Так легче понять, где что находится.

Файлы создаются аналогично папкам с помощью правой кнопки мыши:

ctrl + пробел

Когда мы пишем первую букву, программа предлагает нам возможные варианты служебных слов в выпадающих списках. Нужное слово можно выбрать с помощью мышки или с помощью клавиш со стрелочками и Enter. Если нужно слово не появилось сразу, допишите еще буквы.

Выпадающий список можно вызвать в любой момент с помощью ctrl + пробел и выбрав HTML sample.