Как использовать Visual Studio 2019

Обновлено: 05.07.2024

Советы, рекомендации и приемы по настройке Visual Studio для работы с Unreal Engine

Выберите операционную систему:

Unreal Engine (UE) предназначен для плавной интеграции с Visual Studio (VS), что позволяет вам быстро и легко вносить изменения в код своих проектов и сразу же видеть результаты после компиляции. Настройка VS для работы с UE может помочь повысить эффективность и общий пользовательский опыт для разработчиков, использующих UE.

В этом документе описаны основы настройки рабочего процесса Unreal Engine-Visual Studio. Хотя в этом документе основное внимание уделяется использованию самых последних версий UE и VS, вы можете просмотреть нашу справочную страницу Visual Studio Legacy, чтобы получить помощь по использованию более старых версий UE и VS.

Перед настройкой рабочего процесса Unreal Engine-Visual Studio

В следующей таблице указано, какие версии VS интегрированы с бинарной версией UE.

Версия Unreal Engine

Версия Visual Studio

4.25 или выше

VS 2019 (по умолчанию)

4.22 или выше

ПРОТИВ 2017/ПРОТИВ 2019

4.15 или выше

4.10–4.14

от 4,2 до 4,9

Запустите предварительный установщик Unreal Engine

При установке UE из Epic Launcher или при клонировании из GitHub автоматически запускается установщик UE. Однако, если вы устанавливаете или синхронизируете UE из Perforce, вам нужно будет вручную запустить предварительный установщик, прежде чем запускать какие-либо инструменты UE, которые вы создали локально. Этот установщик находится по адресу [UERootLocation]\Engine\Extras\Redist\en-us] в кодовой базе.

Параметры новой установки Visual Studio

Если вы устанавливаете VS в первый раз, убедитесь, что у вас включены следующие параметры.

Инструменты C++

Чтобы добавить инструменты C++ в установку VS, убедитесь, что в разделе "Рабочие нагрузки" выбран вариант "Разработка игр с C++", а также эти дополнительные параметры.

Инструменты профилирования C++

C++ AddressSanitizer (необязательно)

SDK для Windows 10 (10.0.18362 или новее)

Включите установщик UE

Чтобы включить установщик UE при установке VS, найдите боковую панель «Сводка» справа, разверните «Разработка игр с C++» и в разделе «Необязательно» убедитесь, что установлен флажок для установщика Unreal Engine, чтобы включить его.

Отладка

Дополнительную информацию о поддержке отладки см. в разделе отладки на нашей странице Visual Studio Legacy.

В этом пошаговом руководстве вы узнаете, как загрузить и установить Visual Studio 2019. Сначала мы рассмотрим системные требования для Visual Studio 2019. Затем мы покажем вам, как загрузить Visual Studio 2019 и, наконец, мы узнаем, как установить Visual Studio 2019.

Оглавление

Выпуск Visual Studio 2019

Visual Studio 2019 поставляется в трех версиях. Сообщество, профессионалы и предприятия

Процесс загрузки и установки очень прост и аналогичен загрузке и установке Visual Studio 2017. Вы можете одновременно запускать и 2017, и Visual Studio 2019.

Важные ссылки

Системные требования для Visual Studio 2019

Поддерживаемые ОС

Windows 10

Минимальная версия – 1703.
Поддерживаемые версии: Домашняя, Профессиональная, Образовательная и Корпоративная.
(LTSC и S не поддерживаются)

Windows 8.1

Установите обновление: 2919355
Поддерживаемые версии: Core, Professional и Enterprise

Windows 7 SP1

Поддерживаемые версии: Home Premium, Professional, Enterprise, Ultimate

Windows Server 2016

Windows Server 2019

Windows Server 2012 R2

Установите обновление: 2919355
Поддерживаемые версии: Essentials, Standard, Datacenter

Оборудование

Это минимальные требования к оборудованию для запуска Visual Studio 2019

Вам нужен процессор с тактовой частотой 1,8 ГГц или выше.
Четырехъядерный процессор или лучше
Минимум 2 ГБ ОЗУ. Но рекомендуется 8 ГБ ОЗУ (12,5 ГБ, если вы работаете на виртуальном ПК)
Минимум 800 МБ свободного места для базовой установки. Полная установка занимает около 210 ГБ на жестком диске.
Для скорости и производительности жесткого диска установите Visual Studio 2019 и ОС Windows на SSD-накопитель.
Минимальное разрешение экрана 720p (1280 x 720). Рекомендуется разрешение экрана WXGA (1366 x 768) или выше.

Другие требования

Загрузить Visual Studio 2019

Установите Visual Studio 2019

1. Установка необходимых компонентов

Перед началом установки установите следующие компоненты

Убедитесь, что у вас установлен dotnet framework 4.5. Его можно скачать по следующей ссылке

Если вы используете Windows 8.1 или Windows Server 2012 R2, вам необходимо установить обновление 2919355

2. Скачать Visual Studio 2019

Вы можете скачать его по следующим прямым ссылкам

В противном случае вы можете скачать его по ссылке Загрузки Visual Studio 2019

3. Начало установки Visual Studio 2019

Нажмите правой кнопкой мыши и выберите «Запуск от имени администратора» загруженного файла, чтобы начать установку

< бр />

У вас будет запрошено разрешение на продолжение. Нажмите Да, чтобы продолжить установку.

4. Условия лицензии на программное обеспечение

Далее вам будет предложено принять условия лицензии на программное обеспечение и Заявление о конфиденциальности. Нажмите «Продолжить», чтобы продолжить установку.

5. Установщик загружает необходимые файлы

Установщик загружает необходимые файлы для установки Visual Studio 2017. Этот процесс займет несколько минут

6. Выберите, что установить

Установщик запросит функции, которые вы хотите установить. Здесь у вас есть четыре варианта

Рабочие нагрузки
Отдельные компоненты
Языковые пакеты
Место установки

Выберите рабочие нагрузки

Первый вариант — выбрать рабочие нагрузки.

Выберите отдельные компоненты (необязательно)

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

Выберите необходимые компоненты

Выберите языковые пакеты (необязательно)

Язык автоматически подбирается из языка, настроенного в операционной системе. Вы можете изменить его на этой вкладке.

< /p>

Выберите место установки

Последняя вкладка — это место установки. Измените местоположение, если хотите

7. Установка

Теперь нажмите кнопку «Установить», чтобы начать установку Visual Studio 2019.

Установщик загрузит каждый компонент из Интернета и начнет установку. Это займет некоторое время в зависимости от скорости вашего интернета.

После завершения установки вы увидите сообщение об успешном завершении установки и возможность зарегистрироваться

Если вы устанавливаете Visual Studio в первый раз, вам будет предложено войти

Регистрация

Далее появится окно входа в систему, вы можете войти или нажать «Зарегистрироваться», чтобы создать новую учетную запись. Если вы хотите продолжить без входа в систему, нажмите «Не сейчас, возможно, позже» и продолжите. Вы можете войти позже, выбрав Справка -> Зарегистрировать продукт.

Обратите внимание, что срок действия версии Community истекает через 30 дней, если вы не зарегистрируете свою копию

Обзор

Мы узнали, как загрузить и установить Visual Studio 2019. Мы узнали, каковы системные требования и предварительные условия, необходимые для установки

Последние функции Visual Studio 2019 и способы их использования.

Visual Studio 2019 стала общедоступной сегодня и содержит множество новых функций, призванных повысить продуктивность разработчиков.

Подробнее об инновациях

Microsoft использовала этот выпуск для организации совместной работы в реальном времени и интеграции GitHub непосредственно в Visual Studio, а также для упрощения рефакторинга и отладки кода и использования машинного обучения для улучшения интеллектуальных предложений кода и поиска.

По результатам опроса разработчиков Stack Overflow, проведенного в прошлом году, Visual Studio была названа второй по популярности интегрированной средой разработки (IDE), используемой программистами для создания программного обеспечения.

Аманда Сильвер, партнер-директор по управлению программами в Microsoft, сказала, что новые функции в Visual Studio 2019 основаны на устранении «самых больших проблем» для разработчиков в различных областях, от совместной работы в команде до развертывания программного обеспечения на нескольких платформах.

«Это действительно вдохновило выпуск Visual Studio 2019», — сказала она, добавив, что Visual Studio сегодня подходит для разработки на широком спектре языков программирования.

Еще одним улучшением по сравнению с Visual Studio 2017 является производительность. Сильвер заявил, что время, необходимое для открытия проекта, запуска тестирования и других распространенных задач, должно быть «значительно улучшено».

Вот лучшие новые функции Visual Studio 2019 и способы их использования. (Примечание. Эта статья о Visual Studio 2019 доступна для бесплатной загрузки в формате PDF.)

Прямой доступ к Visual Studio

Live Share позволяет нескольким разработчикам сотрудничать и совместно редактировать один и тот же код в Visual Studio 2019 в режиме реального времени.

До 35 разработчиков могут одновременно работать над кодом, а Live Share можно использовать для совместной работы пользователей Visual Studio 2019 и более простого редактора кода Visual Studio.

"Мы обнаружили, что это невероятно меняет то, как разработчики на самом деле занимаются разработкой", — сказал Сильвер, добавив, что это было особенно полезно для групп, изучающих программирование.

Visual Studio 2019 по умолчанию встраивает функцию Live Share в Visual Studio с помощью кнопки Live Share в интегрированной среде разработки, как показано ниже в левой части экрана.

Поделиться сеансом с другим разработчиком относительно просто: нужно просто нажать кнопку Live Share и нажать «Начать сеанс совместной работы».

Затем вам нужно нажать «Пригласить участников», при этом ссылка на сеанс Live Share будет скопирована в ваш буфер обмена, которую затем можно будет отправить другим пользователям Visual Studio, которых вы хотите пригласить. Как видите, сеансы также можно сделать доступными только для чтения, нажав кнопку во всплывающем уведомлении.

Вы можете увидеть, как Live Share встроен в VS из этого примера при отладке кода. Это исключение в коде вызывает диалоговое окно с параметром «Начать сеанс Live Share».

Опять же, при выборе этого параметра в буфер обмена копируется ссылка, которую затем можно отправить другому пользователю Virtual Studio для запуска сеанса Live Share, который затем сможет приступить к редактированию кода.

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

Помимо редактирования кода, разработчики смогут выполнять и другие действия, например добавлять точки останова для отладки.

Умный IntelliCode

Visual Studio 2019 обновляет интеллектуальные предложения IntelliCode, добавляя более широкий спектр помощи на основе искусственного интеллекта для функций автозаполнения и автоматического форматирования.

Обновление IntelliCode означает, что предложения будут персонализированы для каждого пользователя, давая им рекомендации на основе их кода.

"Мы действительно стараемся сделать так, чтобы вы могли писать наиболее продуктивный код как можно быстрее и чтобы вы могли учиться на том, что ваша команда и другие пишут, пока вы печатаете", – сказал Сильвер.

Ниже вы можете увидеть новую функцию IntelliCode в действии и то, как она использует обученную модель машинного обучения для прогнозирования наиболее вероятного элемента, который будет вставлен в определенную точку кода.

Например, щелчок внутри круглых скобок при вызове метода может привести к тому, что IntelliCode предложит вероятный параметр для передачи этому методу, в приведенном ниже примере правильно предполагается, что подходящим первым параметром будет банановая переменная, содержащая экземпляр класса Banana. .

Предложение помечается пользователем, перемещая его в верхнюю часть раскрывающегося списка предложений и помечая звездочкой.

IntelliCode теперь также будет работать с языками XAML и C++.

Новый поиск

Новое окно поиска Visual Studio в верхней части экрана предназначено для поиска чего угодно в Visual Studio, включая пункты меню, окна инструментов, настройки и многое другое.

Инструмент использует нечеткую логику, цель которой - вернуть правильную информацию, даже если вы сделаете опечатку.

Например, чтобы изменить шрифт, вы должны ввести «шрифт» в поле, которое откроет меню «Параметры» с выбранными шрифтами и цветами, без необходимости погружаться в меню, чтобы найти правильные настройки.

Еще один пример того, как можно использовать окно поиска, — это поиск новых классов, как показано ниже, где при поиске по запросу "добавить класс" в поле поиска открывается диалоговое окно "Добавить новый элемент".

Выберите «Класс» в верхней части меню и введите название класса в поле «Имя», в данном случае это класс под названием «банан».

Окно этого нового класса откроется автоматически.

Очистка кода

Visual Studio можно настроить для проверки кода на соответствие стилю кода, определенному вами или вашей командой, с помощью новой функции очистки кода.

Чтобы настроить очистку кода, нажмите маленькую стрелку рядом со значком метлы в нижней части Visual Studio и выберите «Настроить очистку кода».

Как видите, Code Cleanup можно настроить на использование нескольких профилей стилей кода.

После выбора нужного профиля очистку всего документа можно выполнить, щелкнув значок метлы Code Cleanup.

Репозитории GitHub доступны в начальном окне

Как видите, теперь вы можете клонировать или извлекать репозиторий GitHub прямо из начального окна.

Этот параметр позволяет вставить URL-адрес репозитория GitHub или получить доступ к репозиториям Azure DevOps.

"Сегодня, когда люди начинают новый проект, они, как правило, сначала обращаются к репозиторию Git, поэтому мы действительно хотели убедиться, что это в первую очередь касается опыта разработчиков в новом продукте", – сказал Сильвер.< /p>

Расширение запроса на вытягивание

Это добавляет кнопку запроса на вытягивание на боковую панель Team Explorer в Visual Studio.

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

На боковой панели также перечислены все запросы на вытягивание, сделанные для вашего собственного кода.

При нажатии на каждый запрос появляется возможность открыть запрос, просмотреть описание запроса, комментарии к обсуждению, а также параллельное сравнение измененных файлов с выделенными изменениями, как показано ниже.

Если вас устраивают предложенные изменения в коде, запрос на вытягивание можно одобрить из Visual Studio.

Меньше сбоев при отладке больших приложений C++

Одна новая функция должна помочь разработчикам C++, отлаживающим очень большие приложения, например видеоигры.

"Мы взяли больше того, что делает Visual Studio, и сделали его асинхронным, поэтому он выполняется в другом потоке", – сказал Сильвер.

"Одна из важных особенностей Visual Studio 2019, которая действительно нравится разработчикам C++, создающим крупномасштабные приложения C++, заключается в том, что мы переместили отладчик вне процесса".

Она сказала, что коммерческие команды в таких компаниях, как Tableau Software, Adobe и Epic Games, заявили, что эти изменения привели к «ночному и дневному улучшению» при работе с большими кодовыми базами.

Изменения должны привести к гораздо меньшему количеству сбоев из-за нехватки памяти при отладке очень больших баз кода по сравнению с предыдущими версиями Visual Studio.

Здесь вы можете увидеть отладку игры Gears of War 4 для Xbox в Visual Studio 2017 — пример приложения C++ с большим объемом памяти.

Использование памяти увеличивается очень быстро: devenv.exe потребляет 2 ГБ ОЗУ после пяти минут отладки кода, быстро приближаясь к ошибке нехватки памяти.

Напротив, объем памяти, используемый для отладки той же базы кода в VS 2019, значительно меньше: около 418 МБ потребляется через пять минут.

"По сути, основной процесс занимает не так много памяти, поэтому если раньше вы сталкивались с исключениями из-за нехватки памяти в отладчике, вы больше не столкнетесь с такой ситуацией", – сказал Сильвер.

"Раньше отладка больших игр класса ААА или крупных приложений независимых поставщиков ПО могла длиться около 10 минут, а затем возникали ошибки, и приходилось начинать заново. в течение нескольких часов».

Новые способы отладки кода

Эти точки останова позволяют Visual Studio наблюдать за определенным свойством объекта, даже если оно выходит за пределы области действия, и останавливать приложение при изменении этого свойства, чтобы его можно было проверить.

Чтобы установить точку останова данных, вы можете найти интересующий вас объект с помощью нового инструмента поиска, как показано ниже.

Далее перейдите в раскрывающиеся меню, чтобы найти свойство объекта, которое вы хотите отслеживать.

Щелкните правой кнопкой мыши это свойство и выберите "Разрывать при изменении значения".

Затем нажмите кнопку "Продолжить" в верхней части экрана или нажмите клавишу F5, после чего приложение продолжит работу до тех пор, пока это свойство не будет изменено, и вы получите уведомление о том, когда и где произошло это изменение.

Эта функция может использоваться по-разному, например для определения места изменения глобального объекта или добавления или удаления объекта из списка.

Например, чтобы переместить метод в интерфейс, реализуемый классом, нажмите «CTRL + .». Откроется раскрывающееся меню, в котором вы можете выбрать параметр «Подтянуть» для этого метода, а затем интерфейс, к которому вы хотите подтянуть метод, как показано ниже.

Чтобы обернуть параметры метода, снова выберите метод, нажмите «CTRL + .» и выберите «Обернуть каждый параметр» в раскрывающемся меню.

Если вы хотите узнать больше о Visual Studio 2019, вы также можете посетить платформу онлайн-обучения Pluralsight, которая в партнерстве с Microsoft предлагает новый бесплатный курс Visual Studio 2019 до 22 апреля, или LinkedIn Learning, где есть новый Курс Visual Studio 2019, который будет бесплатным до 2 мая.

< /p>

Информационный бюллетень об инновациях

Будьте в курсе умных городов, искусственного интеллекта, Интернета вещей, виртуальной и дополненной реальности, робототехники, дронов, автономного вождения и других крутых технологических инноваций.

Visual Studio Code — один из самых популярных и мощных текстовых редакторов, используемых сегодня разработчиками программного обеспечения.

В этой статье мы рассмотрим шаги, необходимые для загрузки популярного текстового редактора Visual Studio Code, также называемого VS Code. К концу статьи вы сможете создать в Visual Studio Code папку, содержащую HTML-документ, который можно открыть в веб-браузере.

Я. Введение

Что такое «текстовые редакторы»?

Текстовые редакторы, также называемые редакторами кода, представляют собой приложения, используемые разработчиками для написания кода. Они могут выделить и отформатировать ваш код, чтобы его было легче читать и понимать. Если вы использовали Codecademy, вы уже знакомы с текстовым редактором. Это область, в которой вы пишете свой код.

Использование текстового редактора является частью создания вашей "среды разработки", набора инструментов, которые вы используете для работы над проектами кодирования.Это позволит вам взять то, чему вы научились на Codecademy, и применить это на практике, когда вы работаете над проектами на своем компьютере. Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но также означает, что вы выросли как разработчик и готовы начать работать самостоятельно — отличная работа!

Текстовые редакторы, предназначенные для написания кода, имеют ряд преимуществ:

Подсветка синтаксиса для конкретного языка
Автоматический отступ кода
Цветовые схемы в соответствии с вашими предпочтениями и облегчают чтение кода.
Подключаемые модули или дополнительные программы для обнаружения ошибок в коде.
Древовидное представление или визуальное представление папок и файлов проекта для удобной навигации по проекту.
Сочетания клавиш или их комбинации для ускорения разработки

Возможно, вы также читали или слышали об интегрированных средах разработки или «интегрированных редакторах разработки». IDE позволяет не только редактировать, но также компилировать и отлаживать код с помощью одного приложения или интерфейса. Хотя текстовый редактор, который мы рекомендуем, не считается IDE, он имеет множество функций, подобных IDE, которые упрощают жизнь разработчика, не требуя большого количества ресурсов, которые обычно требуются для IDE. Лучшее из обоих миров!

Выбор текстового редактора

На выбор предлагается несколько текстовых редакторов. Например, Visual Studio Code — один из самых популярных текстовых редакторов, используемых разработчиками. (Это Visual Studio Code, а не Visual Studio, который немного отличается. Нам нужен первый, тот, в названии которого есть «Code».) Другими популярными текстовыми редакторами, о которых вы, возможно, слышали, являются Atom и Sublime Text.

Бесплатно
Открытый исходный код (это означает, что код программы можно просматривать, изменять и публиковать)
Функции, подобные IDE
Поддерживается большим сообществом пользователей и Microsoft

Когда вы продвинетесь в своей карьере программиста, вы можете попробовать другие редакторы кода, чтобы увидеть, какие функции лучше всего подходят для вашего личного рабочего процесса разработки.

II. Установка кода Visual Studio

Итак, мы выбрали наш текстовый редактор, теперь нам просто нужно установить его на наш компьютер!

Видеоинструкции

В этом видео показано, как загрузить и установить Visual Studio Code. Письменные инструкции приведены ниже.

Этапы установки

Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похожим, и использование Visual Studio Code на всех них будет одинаковым.

Посетите веб-сайт Visual Studio Code, чтобы загрузить последнюю версию Visual Studio Code.

Вы должны увидеть, что отображается операционная система вашего компьютера, но если она неверна, нажмите стрелку вниз и найдите параметр, соответствующий вашей операционной системе, в раскрывающемся меню, а затем щелкните значок стрелки вниз в разделе «Стабильная».< /p>

Пользователи Windows: будет загружена последняя версия Visual Studio Code в виде файла .exe.

Пользователи Mac: будет загружена последняя версия Visual Studio Code для Mac в виде ZIP-файла.

Пользователи Linux: .deb и .rpm — это разные типы файлов для хранения данных. Мы предлагаем вам скачать файл .deb, чтобы автоматические обновления работали так, как предлагает документация Visual Studio Code.

После завершения загрузки файла Visual Studio Code его необходимо установить. Найдите файл Visual Studio Code в файловом менеджере — программе, позволяющей просматривать файлы и папки на вашем компьютере.

Пользователи Windows: откройте файл .exe, щелкнув его, и запустите программу установки. Продолжайте нажимать «Далее», а затем «Готово».

Пользователям Mac: загруженный ZIP-файл должен находиться в папке «Загрузки». Откройте файл. Если вы видите это сообщение, выберите «Открыть».

Пользователям Linux: загруженный файл должен находиться в папке «Загрузки».

Найдите его в файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения с графическим интерфейсом или выполните следующие команды по одной в терминале:

Убедитесь, что ваше приложение Visual Studio Code сохранено в месте, где, как вы знаете, вы легко сможете его найти.

Пользователи Windows: он будет автоматически помещен в меню "Пуск".

Пользователи Mac: нажмите и перетащите значок Visual Studio Code из папки "Загрузки" в папку "Приложения".

Пользователи Linux: он должен появиться на панели задач программ.

Вот и все, вы успешно установили текстовый редактор и готовы приступить к написанию кода!

III. Практика: используйте Visual Studio Code для запуска проекта вне платформы

По мере прохождения различных уроков и путей в Codecademy вам может понадобиться создать проект на своем компьютере, а не в учебной среде Codecademy. Это может быть непросто, но это увлекательный шаг, сигнализирующий о том, что вы готовы работать самостоятельно.

Для этого нам понадобится текстовый редактор, который мы установили выше. Давайте на минутку попробуем Visual Studio Code.

Что такое «папки разработки»?

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

Большинство разработчиков хранят свои проекты в удобном для поиска каталоге (который вы, возможно, привыкли называть «папкой»). Здесь, в Codecademy, мы рекомендуем называть этот каталог проектами. Он будет хранить все ваши проекты кодирования. Всякий раз, когда вы создаете новый проект, независимо от того, насколько он мал, вы всегда должны создавать новую папку внутри каталога ваших проектов. Вы обнаружите, что проекты из одного файла могут быстро превратиться в большие проекты с несколькими папками.

Практика: создадим проект

Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в Visual Studio Code и создать свой первый HTML-проект «Hello World».

Мы рекомендуем вам просмотреть приведенное выше видео, а затем выполнить описанные ниже действия.

1. Создайте папку разработки.

Перейдите к папке с помощью файлового менеджера или терминала. Убедитесь, что это папка, которую вы посещаете регулярно и будете помнить. Создайте новую папку под названием проекты.

Пользователи Mac: это может быть ваша учетная запись пользователя или папка «Домашняя».

Пользователи Windows: вы можете сохранить это на диск C.

Пользователям Linux: вы можете сохранить это в папке пользователя в папке «Домашняя».

В папке проектов создайте новую папку с именем HelloWorld. Все, что вы добавите в эту папку, станет частью вашего проекта HelloWorld.

2. Откройте код Visual Studio

3. Откройте папку разработки

Нажмите значок «Проводник» в меню слева, затем нажмите кнопку «Открыть папку» и выберите папку разработки. Это запустит ваш файловый менеджер.

Перейдите к папке HelloWorld и выберите Открыть. Папка откроется на боковой панели Visual Studio Code. На данный момент в папке не должно быть содержимого. Мы добавим файл на следующем шаге.

4. Добавьте файл.

Прежде чем вы научитесь добавлять файлы в папку проекта, важно понять назначение расширений файлов. Расширение файла — это суффикс имени файла (последние 3 или 4 символа в имени файла, которым предшествует точка) и описывает тип содержимого, содержащегося в файле. Например, расширение HTML-файла — .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как HTML-документ. После того как Visual Studio Code загрузит папку проекта, вы можете добавлять файлы. Шаги ниже описывают, как добавить файлы. Не беспокойтесь о том, чтобы сделать это на своем собственном компьютере. Мы вернемся к этому позже.

На панели проводника Visual Studio Code щелкните имя папки разработки. Вы увидите четыре значка справа от имени папки. Щелкните значок «Новый файл». Введите имя нового файла с соответствующим расширением (например, .html, .css, .csv). Крайне важно указать правильное расширение файла, чтобы такие программы, как линтеры, знали, как интерпретировать его содержимое. Когда закончите, нажмите Enter.

5. Начинайте программировать!

Скопируйте и вставьте следующий стандартный HTML-код:

Почаще сохраняйте файл с помощью функции автоматического сохранения и отслеживайте изменения с помощью системы контроля версий, если вы знаете, как ею пользоваться. (Чтобы включить автосохранение, нажмите «Файл», а затем «Автосохранение». Когда оно включено, вы увидите галочку рядом с «Автосохранение».) Это уменьшит вероятность потери несохраненной работы.

Расширения файлов и подсветка синтаксиса

Синтаксис – это набор правил, которые говорят нам, как создавать правильно написанный код. Visual Studio Code и другие текстовые редакторы могут интерпретировать расширения файлов и обеспечивать подсветку синтаксиса для конкретного языка. Подсветка синтаксиса — это инструмент, облегчающий чтение кода. Взгляните на свой файл index.html. Текст и теги разного цвета. Вот как Visual Studio Code выделяет синтаксис .html. С каждым новым языком, который вы изучаете, Visual Studio Code будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также отличаться от того, как ваш код выделяется в Codecademy.

Необязательно: измените цветовую схему

Хотя Visual Studio Code поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы сделают чтение всех этих строк кода легким для ваших глаз. (Попробуйте низкоконтрастные темные темы, такие как «Solarized Dark» или «Dracula Dark».)

Для этого выберите «Цветовая тема» на странице приветствия при первом открытии Visual Studio Code или нажмите «Код» в строке меню в верхней части окна рабочего стола, затем нажмите «Настройки», а затем «Цветовая тема». Вы также можете искать цветовые темы для установки с помощью меню «Расширения».

6. Просмотрите свой HTML-файл в браузере

На этом этапе ваш файл готов для просмотра в веб-браузере. Следующие шаги следует предпринять вне Visual Studio Code:

Перейдите к файлу index.html в папке Hello World с помощью файлового менеджера или терминала.

Дважды щелкните или откройте index.html. Страница должна открыться в веб-браузере по умолчанию. Восхищайтесь своей работой на втором месте — вы создали свой первый проект с помощью Visual Studio Code.

Расширьте возможности Visual Studio Code

Если вы уже освоились с предыдущими шагами, изучите следующие функции для дальнейшей настройки среды разработки. Вам не нужно использовать эти предложения для завершения проектов на Codecademy, но они могут помочь вам повысить эффективность при написании кода, и именно это делает Visual Studio Code таким полезным редактором!

Отладка кода в редакторе: правильно, вы можете запускать и тестировать код из редактора!

Контроль версий: вам не нужно переключаться на терминал на вашем компьютере, чтобы отслеживать изменения с помощью Git.

Встроенный терминал: вы можете запускать команды командной строки из своего редактора с помощью Visual Studio Code.

IV. Подведение итогов

Поздравляем! Вы успешно настроили текстовый редактор и готовы создавать веб-сайты на своем компьютере.

Читайте также: