Установка 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.Найдите большую кнопку для загрузки. Обычно сайт определяет вашу операционную систему. Если это не произошло, то выберите Вашу.
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.Примите условия лицензионного соглашения. Установите флажок в пункте «Я принимаю условия соглашения» и нажмите «Далее».
2.Примите условия лицензионного соглашения. Установите флажок в пункте «Я принимаю условия соглашения» и нажмите «Далее».
3.Выберите дополнительные задачи. На одном из этапов установки появится окно «Выберите дополнительные задачи». Здесь очень важно отметить галочками следующие пункты:
- Создать значок на рабочем столе (для быстрого доступа к программе).
- Добавить действие "Открыть с помощью Code" в контекстное меню файла
- Добавить действие "Открыть с помощью Code" в контекстное меню каталога
- Зарегистрировать Code как редактор для поддерживаемых типов файлов
- Добавить в PATH
4.Нажмите «Далее», а затем «Установить». Процесс инсталляции займет несколько минут.
5.Готово! После завершения установки можно снять галочку «Запустить Visual Studio Code», если вы не хотите открывать программу немедленно, и нажать «Завершить».
Шаг 2: Устанавливаем программу (для macOS)
Установка на компьютерах Apple выполняется еще проще.
- Распакуйте архив. Дважды кликните по загруженному zip-архиву. Рядом появится файл программы — Visual Studio Code.app.
- Перенесите программу в «Приложения». Чтобы программа была всегда доступна и корректно интегрировалась в систему, перетащите значок Visual Studio Code.app в папку «Программы» (Applications) в окне Finder.
- Готово! Теперь вы можете запускать VS Code из папки «Программы» или через Launchpad.
Шаг 3: Устанавливаем полезные расширения
Изначально VS Code — это мощный, но все же текстовый редактор. Его настоящая сила заключается в расширениях (Extensions). Это дополнительные модули, которые значительно упрощают и ускоряют работу. Давайте установим самые необходимые для веб-разработки.
- Запустите Visual Studio Code.
- Откройте вкладку расширений. На панели слева найдите иконку, изображающую четыре квадрата (один из них отделен от остальных). Это меню управления расширениями.
- Найдите и установите следующие модули. Вводите название в строку поиска и нажимайте синюю кнопку «Install» (Установить) напротив каждого нужного расширения.
- Russian Language Pack for Visual Studio Code: Это расширение переведет весь интерфейс программы на русский язык. После его установки VS Code предложит перезагрузиться — необходимо согласиться.
- Live Server: Очень полезный инструмент. Он создает локальный веб-сервер и позволяет мгновенно видеть все изменения, которые вы вносите в код, на веб-странице в браузере. Это избавляет от необходимости постоянно обновлять страницу вручную.
- Prettier - Code formatter: Данное расширение будет автоматически форматировать ваш код, делая его аккуратным и читаемым в соответствии с общепринятыми стандартами.
Поздравляем! Ваше рабочее место для веб-разработки полностью настроено. Теперь можно приступать к созданию ваших первых сайтов!
