Инструкции
Подготовка к уроку

Установка Visual Studio Code для создания сайтов|инструкция

Установка Visual Studio Code: готовим рабочее место для будущего веб-разработчика

Здравствуйте! Прежде чем мы начнем создавать интересные сайты и веб-приложения, необходимо подготовить наш главный инструмент — редактор кода. Мы будем использовать Visual Studio Code (сокращенно VS Code).
Эта инструкция поможет вам установить программу всего за 3 простых шага.

Шаг 1: Скачиваем установочный файл

1.Откройте браузер (Google Chrome, Yandex, Firefox или любой другой, которым вы пользуетесь).
2.Перейдите на официальный сайт Visual Studio Code. Самый простой способ — ввести в поисковой строке «скачать VS Code» или перейти по прямой ссылке: https://code.visualstudio.com/
3.Найдите большую кнопку для загрузки. Обычно сайт определяет вашу операционную систему. Если это не произошло, то выберите Вашу.
4.Дождитесь окончания загрузки. В вашей папке «Загрузки» появится файл с названием вроде VSCodeUserSetup-x64-....exe (для Windows) или VSCode-universal-darwin.zip (для macOS).

Шаг 2: Устанавливаем программу (для Windows)

Если у вас компьютер от Apple (macOS), пожалуйста, переходите сразу к следующему разделу инструкции.
1.Запустите скачанный файл. Для этого дважды кликните по нему левой кнопкой мыши.
2.Примите условия лицензионного соглашения. Установите флажок в пункте «Я принимаю условия соглашения» и нажмите «Далее».

3.Выберите дополнительные задачи. На одном из этапов установки появится окно «Выберите дополнительные задачи». Здесь очень важно отметить галочками следующие пункты:
  • Создать значок на рабочем столе (для быстрого доступа к программе).
  • Добавить действие "Открыть с помощью Code" в контекстное меню файла
  • Добавить действие "Открыть с помощью Code" в контекстное меню каталога
  • Зарегистрировать Code как редактор для поддерживаемых типов файлов
  • Добавить в PATH

4.Нажмите «Далее», а затем «Установить». Процесс инсталляции займет несколько минут.
5.Готово! После завершения установки можно снять галочку «Запустить Visual Studio Code», если вы не хотите открывать программу немедленно, и нажать «Завершить».

Шаг 2: Устанавливаем программу (для macOS)

Установка на компьютерах Apple выполняется еще проще.
  1. Распакуйте архив. Дважды кликните по загруженному zip-архиву. Рядом появится файл программы — Visual Studio Code.app.
  2. Перенесите программу в «Приложения». Чтобы программа была всегда доступна и корректно интегрировалась в систему, перетащите значок Visual Studio Code.app в папку «Программы» (Applications) в окне Finder.
  3. Готово! Теперь вы можете запускать VS Code из папки «Программы» или через Launchpad.

Шаг 3: Устанавливаем полезные расширения

Изначально VS Code — это мощный, но все же текстовый редактор. Его настоящая сила заключается в расширениях (Extensions). Это дополнительные модули, которые значительно упрощают и ускоряют работу. Давайте установим самые необходимые для веб-разработки.
  1. Запустите Visual Studio Code.
  2. Откройте вкладку расширений. На панели слева найдите иконку, изображающую четыре квадрата (один из них отделен от остальных). Это меню управления расширениями.
  3. Найдите и установите следующие модули. Вводите название в строку поиска и нажимайте синюю кнопку «Install» (Установить) напротив каждого нужного расширения.
  • Russian Language Pack for Visual Studio Code: Это расширение переведет весь интерфейс программы на русский язык. После его установки VS Code предложит перезагрузиться — необходимо согласиться.
  • Live Server: Очень полезный инструмент. Он создает локальный веб-сервер и позволяет мгновенно видеть все изменения, которые вы вносите в код, на веб-странице в браузере. Это избавляет от необходимости постоянно обновлять страницу вручную.
  • Prettier - Code formatter: Данное расширение будет автоматически форматировать ваш код, делая его аккуратным и читаемым в соответствии с общепринятыми стандартами.
Поздравляем! Ваше рабочее место для веб-разработки полностью настроено. Теперь можно приступать к созданию ваших первых сайтов!