Как запустить HTML-файлы в коде Visual Studio

Создавайте, открывайте и сохраняйте HTML-файлы

Откройте код Visual Studio. Программа имеет значок, похожий на синюю ленту, и обычно находится в меню «Пуск» Windows (Windows), папке «Приложения» (Mac) или меню «Приложения» (Linux). Щелкните значок Visual Studio Code, чтобы запустить программное обеспечение.

Если вы еще не установили его, вы можете бесплатно загрузить Visual Studio Code. Просто нажмите кнопку «Загрузить» на веб-сайте и откройте установочный файл прямо в веб-браузере или в папке «Загрузки». Затем следуйте инструкциям для завершения процесса установки.

Откройте или создайте новый HTML-файл. Примените один из следующих шагов, чтобы открыть или создать новый файл:

Чтобы создать новый файл, нажмите «Файл» в верхней строке меню. Затем нажмите «Новый файл». Начните вводить HTML-код.

Чтобы открыть существующий файл, нажмите «Файл» в верхней строке меню. Затем выберите Открыть файл. Перейдите к HTML-файлу, который хотите открыть, и щелкните его, чтобы выбрать. Наконец, нажмите «Открыть».

Сохраните файл в формате HTML. Когда вы будете готовы запустить HTML-файл в Visual Studio Code, вам сначала необходимо сохранить файл в формате HTML. После сохранения файла вы можете запустить его в любом веб-браузере. Выполните следующие действия, чтобы сохранить HTML-файл в Visual Studio Code:

Нажмите «Файл» в верхней строке меню.

Нажмите «Сохранить как».

Введите имя файла в поле «Имя файла».

В раскрывающемся меню рядом с пунктом «Сохранить как тип» выберите «HTML».

Нажмите Сохранить.

Использовать терминал

Откройте код Visual Studio. Программа имеет значок, похожий на синюю ленту, и обычно находится в меню «Пуск» Windows (Windows), папке «Приложения» (Mac) или меню «Приложения» (Linux). Щелкните значок Visual Studio Code, чтобы запустить программное обеспечение.

Откройте или создайте новый HTML-файл. Если файл HTML еще не открыт, откройте существующий файл или создайте новый и сохраните его в формате HTML. Если файл HTML открыт, его можно просмотреть, щелкнув вкладку файла HTML в верхней части экрана.

Откройте новое окно терминала. Для этого щелкните значок «Терминал» в верхней части экрана, затем нажмите «Новый терминал». Терминал — единственный способ запуска HTML-файлов в Visual Studio Code без использования расширений. Это также самый сложный способ.

Или вы можете нажать «Просмотр» вверху и выбрать «Терминал».

Введите cda вместе с путем к файлу HTML и нажмите ↵ Enter. Вы будете перенаправлены к местоположению HTML-файла. Например, если файл HTML находится в папке «Документы», введите cd UsersusernameDocuments и нажмите Enter (не забудьте заменить «имя пользователя» своим именем пользователя).

Если файл HTML сохранен на диске с буквенным именем, отличным от имени диска операционной системы, вам нужно будет перейти на этот диск в командной строке, прежде чем перейти к файлу HTML. Чтобы продолжить, просто введите букву диска (например, D: для диска D:) и нажмите Enter.

Если вы не знаете, где сохранен файл HTML, вы можете щелкнуть правой кнопкой мыши вкладку файла HTML в верхней части экрана и выбрать «Копировать путь». Войдите в терминал cdinto и сразу вставьте путь. Удалите имя файла в конце пути и нажмите Enter.

Если в имени какой-либо папки в пути к HTML-файлу есть пробел, Терминал не сможет перейти к этой папке. Используйте проводник (Windows) или Finder (Mac), чтобы перейти к папкам с пробелами в именах, и переименуйте их, чтобы они не оставались (например, если есть папка «HTML Files», вам нужно будет изменить ее на «HTML_Files».)

Введите startто же имя HTML-файла и нажмите ↵ Enter. Например, если вы хотите запустить индексный файл HTML, введите start index.html и нажмите Enter. HTML-файл запустится в отдельном окне, и вы сможете просмотреть его.

Чтобы закрыть предварительный просмотр, просто щелкните значок «x» в верхней части окна.

Используйте расширение «Предварительный просмотр HTML»

Откройте код Visual Studio. Программа имеет значок, похожий на синюю ленту, и обычно находится в меню «Пуск» Windows (Windows), папке «Приложения» (Mac) или меню «Приложения» (Linux). Щелкните значок Visual Studio Code, чтобы запустить программное обеспечение.

Нажмите кнопку «Расширения». Эта кнопка имеет значок из 4 квадратов и расположена в левой части строки меню. Появится меню поиска расширений.

Введите «Предварительный просмотр HTML» в строке поиска. Панель поиска находится в верхней части меню «Расширения», которое появляется слева. Появится список расширений, соответствующих введенному вами ключевому слову. «Предварительный просмотр HTML» — это расширение для Visual Studio Code, которое позволяет просматривать HTML-файлы из Visual Studio Code в режиме разделенного экрана или в полноэкранном режиме.

Нажмите расширение «Предварительный просмотр HTML». Этот виджет был создан Томасом Хоконом Таунсендом и будет отображаться первым в списке. Предварительный просмотр HTML имеет оранжевый значок щита с цифрой «5» посередине (логотип HTML 5).

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

Откройте или создайте новый HTML-файл. Если файл HTML еще не открыт, откройте существующий файл или создайте новый и сохраните его в формате HTML. Если файл HTML открыт, его можно просмотреть, щелкнув вкладку файла HTML в верхней части экрана.

Нажмите кнопку предварительного просмотра со значком разделенного экрана и увеличительным стеклом слева. Эта кнопка расположена в правом верхнем углу экрана. Предварительный просмотр HTML-файла появится на разделенном экране в Visual Studio Code.

Удерживая клавишу Alt, нажмите кнопку предварительного просмотра, чтобы просмотреть HTML-код в полноэкранном режиме.

Чтобы закрыть предварительный просмотр, просто щелкните значок «x» на карточке предварительного просмотра в верхней части экрана.

Используйте расширение «открыть в браузере»

Откройте код Visual Studio. Программа имеет значок, похожий на синюю ленту, и обычно находится в меню «Пуск» Windows (Windows), папке «Приложения» (Mac) или меню «Приложения» (Linux). Щелкните значок Visual Studio Code, чтобы запустить программное обеспечение.

Нажмите кнопку «Расширения». Эта кнопка имеет значок из 4 квадратов и расположена в левой части строки меню. Появится меню поиска расширений.

Введите «Открыть в браузере» в строке поиска. Панель поиска находится вверху меню «Расширения» слева. Появится список расширений, соответствующих ключевому слову поиска. «Открыть в браузере» — это расширение для Visual Studio Code, которое позволяет открывать HTML-файлы в обычном веб-браузере прямо в Visual Studio Code.

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

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

Откройте или создайте новый HTML-файл. Если файл HTML еще не открыт, откройте существующий файл или создайте новый и сохраните его в формате HTML. Если файл HTML открыт, его можно просмотреть, щелкнув вкладку файла HTML в верхней части экрана.

Щелкните правой кнопкой мыши в любом месте HTML-кода. Появится контекстное меню.

Нажмите «Открыть в браузере по умолчанию». HTML-файл откроется в веб-браузере по умолчанию, и вы сможете просмотреть его.

Или вы можете нажать «Открыть в другом браузере» и дважды щелкнуть веб-браузер, который хотите использовать.

Если вас попросят выбрать браузер по умолчанию, выберите браузер, в котором вы хотите открыть файл, и нажмите «ОК».

Марвин Фрай

Обновление от 5 июня 2024 г.