Как запускать код в Visual Studio 2017
Обновлено: 05.07.2024
Code – это кроссплатформенный текстовый редактор, разработанный Microsoft на основе платформы Electron. Visual Studio Code — это бинарный дистрибутив репозитория Code, выпущенного под лицензией MIT, — репозиторий OSS со специфическими настройками Microsoft и выпущенный под проприетарной лицензией. Подробнее о смешанном лицензировании см. в этом комментарии GitHub. Существует также управляемый сообществом бинарный выпуск под лицензией MIT под названием VSCodium с отключенной по умолчанию телеметрией.
Содержание
Установка
Доступны следующие варианты Visual Studio Code:
- Code – OSS — выпуск с открытым исходным кодом, созданный на основе официального репозитория code-oss.
- Visual Studio Code — бинарный выпуск под торговой маркой Microsoft.
- VSCodium — бинарный выпуск, созданный сообществом и лицензированный MIT.
Различия между "Code — OSS" (с открытым исходным кодом) и "Visual Studio Code" (сборка Microsoft с закрытым исходным кодом) можно найти здесь.
Поддержка расширений
Код и пакеты vscodium-bin AUR / vscodium AUR / vscodium-git AUR настроены на использование реестра Open VSX, поддерживаются фондом Eclipse. Это объясняет, почему Code-OSS не может найти определенные расширения.
- вручную установите расширение из его файла .vsix, который можно получить в Microsoft Visual Studio Code Marketplace;
- попросить сопровождающего загрузить его расширение в реестр Open VSX;
- добавьте Microsoft Visual Studio Code Marketplace, используя один из следующих пакетов относительно используемой сборки: code-marketplaceAUR / vscodium-bin-marketplaceAUR / vscodium-marketplaceAUR . Эти пакеты устанавливают хук Pacman, который исправляет файл product.json, как показано в этом комментарии Github, после каждого обновления пакета. Обратите внимание, что такое использование Microsoft Marketplace не соответствует его условиям использования.
Использование
Запустите код, чтобы запустить приложение (или, если вы используете другие выпуски, запустите code-git для code-git AUR или codium для vscodium-bin AUR / vscodium AUR / vscodium-git AUR ).
Если по какой-либо причине вы хотите запустить несколько экземпляров Visual Studio Code, можно использовать флаг -n.
Конфигурация
код хранит настройки в ~/.config/Code - OSS/User/settings.json .
visual-studio-code-bin AUR хранит настройки в ~/.config/Code/User/settings.json .
vscodium AUR и связанные пакеты хранят свои настройки в ~/.config/VSCodium/User/settings.json .
При переходе с Code на Codium (или наоборот) каталог настроек можно копировать или перемещать, поскольку они используют большую часть кодовой базы, поэтому настройки совместимы.
Интегрированный терминал
Вид > Встроенный терминал или Ctrl + ` открывает встроенный терминал. По умолчанию Bash используется без дополнительных аргументов, хотя это можно изменить. terminal.integrated.shell.linux задает используемую оболочку по умолчанию, а terminal.integrated.shellArgs.linux задает аргументы, которые будут переданы в оболочку.
Вы можете столкнуться со странными подсказками после установки аргументов интегрированной оболочки с помощью внешнего терминала. Удалите линию, чтобы решить проблему, или используйте внешний терминал.
Внешний терминал
Если вы используете Terminator в качестве терминала по умолчанию для Arch и у вас возникает ошибка в Visual Studio Code: невозможно запустить рабочий процесс отладчика (vsdbg) через терминал. spawn truecolor ENOENT , вы можете изменить терминал, который будет использоваться Visual Studio, на другой терминал (например, gnome-terminal ).
"terminal.external.linuxExec": "Ваш альтернативный терминал" устанавливает терминал по умолчанию, который будет использоваться для отладки exec.
Работает под управлением Wayland
Фактическая точность этой статьи или раздела оспаривается.
Если вы используете WM или DE на основе Wayland, вы можете заставить Visual Studio Code запускаться под Wayland (вместо XWayland), добавив параметры командной строки --enable-features=UseOzonePlatform --ozone-platform = вейленд . Например, вы можете попробовать запустить VSCode с помощью
Устранение неполадок
Общее меню не работает в KDE/Plasma
Visual Studio Code использует DBus для передачи меню в Plasma, попробуйте установить libdbusmenu-glib .
Невозможно переместить элементы в корзину
По умолчанию приложения Electron используют gio для удаления файлов. Вместо этого автоматически выбирается kioclient5, если обнаруживается Plasma. Можно использовать различные реализации корзины, установив переменную среды ELECTRON_TRASH.
Например, для удаления файлов с помощью Trash-cli :
На момент написания этой статьи Electron поддерживал kioclient5, kioclient, trash-cli, gio (по умолчанию) и gvfs-trash (устаревший). Дополнительная информация доступна на этой странице документации.
При использовании пакета с открытым исходным кодом отладка довольно незаметно завершается ошибкой. Консоль отладки просто покажет начальное сообщение:
Вы должны переключиться с моно на правильные реквизиты версии SDK.
Измените импорт, чтобы он выглядел следующим образом:
Ошибка OmniSharp, что не удается найти MSBuild
Во введении к OmniSharp отмечается, что пользователям Arch Linux следует установить пакет mono-msbuild. Без него вы можете получить сообщение об ошибке, например:
Возможно, вы все равно сможете выполнить сборку (возможно, в зависимости от того, установлен ли у вас моно).
Omnisharp поставляется со своей собственной моноверсией, поэтому, если он не может найти установленную, если вы хотите, чтобы omnisharp искал «глобальную» монофоническую версию, установленную на вашем компьютере, поместите это в свой settings.json:
Сохранение с помощью «Повторить попытку как Sudo» не работает
В двоичном выпуске visual-studio-code-bin AUR этой проблемы нет, и эта функция там работает.
Варианты клавиатуры или сопоставления клавиш не сопоставляются
Переключение раскладки клавиатуры в некоторых оконных менеджерах Linux не приводит к изменению низкоуровневых API-интерфейсов окна X, которые VS Code использует для чтения текущей раскладки клавиатуры. Это означает, что VS Code иногда читает одну из других настроенных раскладок клавиатуры, а не текущую активную. PR приветствуется.
Согласно вики, есть два возможных решения:
- убедитесь, что setxkbmap -query возвращает в качестве первой раскладки клавиатуры ту, с которой вы хотите работать в VS Code.
- используйте "keyboard.dispatch": "keyCode" в настройках и перезапустите VS Code. Это предотвратит попытки VS Code определить вашу раскладку клавиатуры.
Команда "." не найдена
В официальной сборке VS Code в файле product.json перечислены расширения, которым разрешено использовать определенные предлагаемые API, к которым обращаются расширения. Однако product.json отсутствует в коде сборки OSS. [1]
В приведенных ниже связанных проблемах могут потребоваться некоторые флаги для включения определенных API. [2] Вы можете либо запустить код с этими флагами, либо добавить соответствующие записи в раздел extensionAllowedProposedApi в файле product.json (код устанавливает это в /usr/lib/code/product.json).
Это также можно решить, установив пакет code-features AUR, который устанавливает хук pacman, исправляющий файл при каждом обновлении пакета. Кроме того, вы также можете рассмотреть возможность установки фирменных пакетов Microsoft: visual-studio-code-bin AUR , visual-studio-code-insiders-bin AUR .
Отсутствует API VS Live Share
Используйте приведенное выше решение, отредактировав product.json , или откройте VS Code с помощью:
Команда 'remote-containers.openFolder' не найдена
Команда 'GitHub Pull Requests: Configure Remotes. ' привело к ошибке (команда 'pr.configureRemotes' не найдена)
Откройте VS Code с помощью:
Git: ssh_askpass: exec(/usr/lib/ssh/ssh-askpass): Нет такого файла или каталога
Обратите внимание, что, например. ksshaskpass вам нужно будет связать его с /usr/lib/ssh/ssh-askpass, чтобы заставить VSCode найти его:
Символы обрезки во встроенном терминале
Слишком широкие символы могут обрезаться. Например, выделенный жирным курсивом текст трассировки стека Deno.
Этого можно избежать, установив для параметра "terminal.integrated.rendererType" значение "experimentalWebgl".
Размытый текст под Wayland
Нет такого интерфейса «org.freedesktop.Secret.Collection»
Аутентификация с Github не удалась при использовании VSCodium
При подключении учетной записи Github измените «vscodium» на «vscode» в URL-адресе, как показано в этом комментарии. Затем скопируйте токен идентификации в VSCodium. Если это все еще не удается, установите связку ключей, например gnome-keyring, или создайте новую связку ключей, как указано здесь, в документации по коду Visual Studio, и здесь, на Github.
Несовместимые диалоговые окна файлов
Как запустить программу, зависит от того, с чего вы начинаете, типа программы и от того, хотите ли вы запускать ее под отладчиком. В простейшем случае для сборки и запуска открытого проекта в Visual Studio:
- Нажмите F5, выберите "Отладка" > "Начать с отладкой" в меню Visual Studio или выберите зеленую стрелку "Пуск" и имя проекта на панели инструментов Visual Studio.
- Или, чтобы запустить без отладки, нажмите Ctrl + F5 или выберите "Отладка" > "Запустить без отладки" в меню Visual Studio.
Начать с проекта
Если код вашей программы уже находится в проекте Visual Studio, откройте этот проект. Для этого можно дважды щелкнуть или коснуться файла .csproj в проводнике Windows или выбрать «Открыть проект в Visual Studio» и найти файл .csproj. файл и выберите файл.
После загрузки проекта в Visual Studio, если ваше решение Visual Studio содержит более одного проекта, обязательно установите проект с методом Main в качестве запускаемого проекта.Чтобы задать запускаемый проект, щелкните правой кнопкой мыши имя проекта или узел в обозревателе решений и выберите в контекстном меню «Установить как запускаемый проект».
Чтобы запустить программу, нажмите Ctrl+F5, выберите "Отладка" > "Запустить без отладки" в верхнем меню или нажмите зеленую кнопку "Пуск".
Visual Studio попытается собрать и запустить ваш проект. В нижней части экрана Visual Studio выходные данные сборки отображаются в окне «Вывод», а все ошибки сборки отображаются в окне «Список ошибок».
Если сборка выполнена успешно, приложение запускается в соответствии с типом проекта. Консольные приложения запускаются в окне терминала, настольные приложения Windows запускаются в новом окне рабочего стола, а веб-приложения запускаются в браузере, размещенном на IIS Express.
Начать с кода
Если вы начинаете с листинга кода, файла кода или небольшого количества файлов, сначала убедитесь, что код представляет собой исполняемую программу из надежного источника. Любое приложение с методом Main, вероятно, является исполняемой программой. Вы можете использовать шаблон консольного приложения для создания проекта для работы с приложением в Visual Studio.
Список кода для одного файла
Несколько листингов кода или файлов на диске
Несколько файлов в папке
Если у вас есть папка с большим количеством файлов, сначала проверьте наличие файла проекта или решения. Программы, создаваемые Visual Studio, содержат файлы проектов и решений. В проводнике Windows найдите файлы с расширением .csproj или .sln. Дважды щелкните файл .csproj, чтобы открыть его в Visual Studio. См. раздел Начало работы с решением или проектом Visual Studio.
Если код взят из другой среды разработки, файла проекта нет. Откройте папку, выбрав Открыть > Папка в Visual Studio. См. раздел Разработка кода без проектов или решений.
Начать с репозитория GitHub или Azure DevOps
Если код, который вы хотите запустить, находится в репозитории GitHub или Azure DevOps, вы можете использовать Visual Studio, чтобы открыть проект непосредственно из репозитория. См. раздел Открытие проекта из репозитория.
Запустить программу
Чтобы начать сборку программы, нажмите зеленую кнопку "Пуск" на панели инструментов Visual Studio или нажмите F5 или Ctrl+F5. С помощью кнопки «Пуск» или F5 программа запускается под отладчиком.
Visual Studio попытается собрать и запустить код в вашем проекте. Если сборка завершилась неудачно, в следующих разделах приведены некоторые идеи о том, как обеспечить успешную сборку проекта.
Устранение неполадок
Добавить ссылки
Для правильной сборки код должен быть правильным и иметь правильные ссылки на библиотеки или другие зависимости. Красные волнистые подчеркивания в коде или записи в списке ошибок показывают ошибки еще до того, как вы скомпилируете и запустите программу. Если ошибки связаны с неразрешенными именами, вам, вероятно, потребуется добавить ссылку или директиву использования, или и то, и другое. Если в коде есть ссылки на отсутствующие сборки или пакеты NuGet, необходимо добавить эти ссылки в проект.
Visual Studio пытается помочь вам найти отсутствующие ссылки. Если имя не определено, в редакторе появляется значок лампочки. Нажмите на лампочку, чтобы просмотреть рекомендации по устранению проблемы. Возможные исправления:
- Добавить директиву using.
- Добавить ссылку на сборку.
- Установите пакет NuGet.
Добавить директиву using
Вот пример отсутствующей директивы using. Вы можете добавить с помощью System; в начало файла кода для разрешения неразрешенного имени Console :
Добавить ссылку на сборку
Вы можете найти сборки и добавить ссылки, следуя инструкциям в разделе Добавление или удаление ссылок с помощью диспетчера ссылок.
Добавить пакет NuGet
Если Visual Studio обнаружит отсутствующий пакет NuGet, появится лампочка и предложит установить пакет:
Если это не решит проблему или Visual Studio не сможет найти пакет, попробуйте найти его в Интернете. См. раздел Установка и использование пакета NuGet в Visual Studio.
Вы создали проект консольного приложения C++ и ввели свой код. Теперь вы можете собрать и запустить его в Visual Studio. Затем запустите его как отдельное приложение из командной строки.
Предпосылки
Установите и запустите Visual Studio с настольной разработкой с рабочей нагрузкой C++ на своем компьютере. Если он еще не установлен, выполните действия, описанные в разделе Установка поддержки C++ в Visual Studio.
Создайте "Hello, World!" проект и введите его исходный код. Если вы еще не выполнили этот шаг, выполните действия, описанные в разделе Создание проекта консольного приложения C++.
Если Visual Studio выглядит так, вы готовы к сборке и запуску своего приложения:
Чтобы запустить код, в строке меню выберите "Отладка", "Начать без отладки".
Откроется окно консоли, после чего запустится ваше приложение. Когда вы запускаете консольное приложение в Visual Studio, оно запускает ваш код, а затем печатает «Нажмите любую клавишу, чтобы продолжить…». чтобы дать вам возможность увидеть результат.
Поздравляем! Вы создали свой первый "Hello, world!" консольное приложение в Visual Studio! Нажмите клавишу, чтобы закрыть окно консоли и вернуться в Visual Studio.
Запустите свой код в командном окне
Обычно вы запускаете консольные приложения в командной строке, а не в Visual Studio. После создания приложения Visual Studio вы можете запустить его из любого командного окна. Вот как найти и запустить новое приложение в окне командной строки.
В обозревателе решений выберите решение HelloWorld (не проект HelloWorld) и щелкните правой кнопкой мыши, чтобы открыть контекстное меню. Выберите «Открыть папку в проводнике», чтобы открыть окно проводника в папке решения HelloWorld.
В окне проводника откройте папку Debug. Эта папка содержит ваше приложение, HelloWorld.exe и несколько других файлов отладки. Удерживая нажатой клавишу Shift, щелкните правой кнопкой мыши файл HelloWorld.exe, чтобы открыть контекстное меню. Выберите Копировать как путь, чтобы скопировать путь к вашему приложению в буфер обмена.
Чтобы открыть окно командной строки, нажмите Windows+R, чтобы открыть диалоговое окно «Выполнить». Введите cmd.exe в текстовое поле «Открыть», затем нажмите «ОК», чтобы открыть окно командной строки.
В окне командной строки щелкните правой кнопкой мыши, чтобы вставить путь к вашему приложению в командную строку. Нажмите Enter, чтобы запустить приложение.
Поздравляем, вы создали и запустили консольное приложение в Visual Studio!
Дальнейшие шаги
После создания и запуска этого простого приложения вы готовы к более сложным проектам. Дополнительные сведения см. в разделе Использование интегрированной среды разработки Visual Studio для разработки настольных систем на C++. Он содержит более подробные пошаговые руководства, в которых исследуются возможности Microsoft C++ в Visual Studio.
Руководство по устранению неполадок
Здесь вы найдете решения распространенных проблем при создании своего первого проекта C++.
Сборка и запуск кода в Visual Studio: проблемы
Если под чем-либо в редакторе исходного кода появляются красные волнистые линии, сборка может содержать ошибки или предупреждения. Убедитесь, что ваш код соответствует примеру в орфографии, пунктуации и регистре.
Запустите свой код в командном окне: проблемы
Если путь, указанный в проводнике, заканчивается на \HelloWorld\HelloWorld, вы открыли проект HelloWorld вместо решения HelloWorld. . Вас смутит папка Debug, в которой нет вашего приложения. Перейдите на уровень вверх в проводнике, чтобы перейти к папке решения, первой HelloWorld в пути. Эта папка также содержит папку Debug, и вы найдете там свое приложение.
Вы также можете перейти к папке отладки решения в командной строке, чтобы запустить приложение. Ваше приложение не будет запускаться из других каталогов без указания пути к приложению. Однако вы можете скопировать свое приложение в другой каталог и запустить его оттуда. Его также можно скопировать в каталог, указанный в переменной среды PATH, а затем запустить из любого места.
Если вы не видите Копировать как путь в контекстном меню, закройте меню и снова откройте его, удерживая нажатой клавишу Shift. Эта команда просто для удобства.Вы также можете скопировать путь к папке из строки поиска File Explorer и вставить его в диалоговое окно «Выполнить», а затем ввести имя своего исполняемого файла в конце. Это немного больше, но результат тот же.
В этой статье мы рассмотрим шаги, необходимые для загрузки популярного текстового редактора 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. Подведение итогов
Поздравляем! Вы успешно настроили текстовый редактор и готовы создавать веб-сайты на своем компьютере.
Читайте также: