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

Обновлено: 21.11.2024

Когда дело доходит до веб-разработки, путь каждого веб-разработчика начинается с написания веб-страниц в формате HTML, но многие люди застревают в процессе настройки своей среды разработки для запуска фрагментов кода HTML. Поэтому в этой статье давайте узнаем, как запускать HTML в коде Visual Studio на компьютерах с Windows 10.

Видеоруководство: как запускать HTML в Visual Studio Code в Windows 10

Если вам сложно запускать HTML-код в Visual Studio Code на компьютере с Windows 10, полное руководство можно найти в приведенном ниже видео.

Шаг 1. Настройте Visual Studio Code для запуска HTML-кода

1) Откройте Visual Studio Code, нажмите кнопку расширения и выполните поиск «code runner», выберите первый вариант из списка Jun Han и нажмите на маленький зеленый значок кнопку установить.

с этим расширением вы можете запустить код, нажав Ctrl+Alt+N, и остановить его, нажав Ctrl+Alt+M

2) Теперь откройте настройки кода, нажав файл, затем настройки, затем настройки .

3) После этого нажмите кнопку открыть настройки JSON, чтобы изменить настройки кода в коде Visual Studio.

4) В файле JSON введите « code-runner.executorMap » в фигурных скобках и нажмите Enter.

5) Снова нажмите Enter, чтобы создать новую строку, и вставьте приведенный ниже фрагмент в файл JSON, как показано на изображении ниже.

Прежде чем продолжить этот шаг, убедитесь, что на вашем компьютере с Windows 10 установлен Google Chrome.

6) Теперь сохраните внесенные изменения, нажав «Ctrl +S», и закройте все окна, открытые в коде Visual Studio.

7) После этого создайте новый файл, нажав «Ctrl+N», и сохраните его под любым именем. В нашем случае это « subscribe.html».

Ключевой момент, на который следует обратить внимание, это то, что вы всегда должны добавлять расширение «. html » к файлу HTML, иначе код не будет быть в состоянии обнаружить файл HTML.

8) вставьте приведенный ниже HTML-код, сохраните файл, нажав « Ctrl+S », и нажмите маленькую кнопку воспроизведения, чтобы запустить HTML-код, теперь вы будете автоматически перенаправлены на Google Chrome и созданная вами веб-страница будут отображаться.

9) Если вы видите что-то вроде изображения ниже в Google Chrome, поздравляем, вы успешно выполнили свой HTML-код.

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. Подведение итогов

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

Как просмотреть свой HTML-код в браузере с новым кодом Microsoft Visual Studio?

С Notepad++ у вас есть возможность запускать в браузере. Как я могу сделать то же самое с Visual Studio Code?

27 ответов 27

Для Windows: откройте браузер по умолчанию – протестировано на VS Code версии 1.1.0

Ответить как на открытие определенного файла (имя жестко задано), так и на открытие ЛЮБОГО другого файла.

Шаги:

Используйте ctrl + shift + p (или F1 ), чтобы открыть палитру команд.

Введите Задачи: Настроить задачу или в более ранних версиях Настроить Task Runner. При его выборе откроется файл tasks.json. Удалите отображаемый скрипт и замените его следующим:

Не забудьте изменить раздел "args" файла tasks.json на имя вашего файла. Это всегда будет открывать этот конкретный файл, когда вы нажмете F5.

Вы также можете установить это, чтобы открыть любой файл, открытый в данный момент, используя ["$"] в качестве значения для "args". Обратите внимание, что $ выходит за пределы <. >, поэтому [""] неверно.

Вернитесь к своему HTML-файлу (в данном примере это "text.html") и нажмите Ctrl + Shift + B, чтобы просмотреть страницу в веб-браузере.

Configure Task Runner больше не присутствует в VSC 1.24.0 — Control-Shift-P не возвращает результатов для этой строки.

VS Code имеет расширение Live Server, которое поддерживает запуск одним щелчком мыши из строки состояния.

Некоторые функции:

Запуск в один клик из строки состояния
Обновление в реальном времени
Поддержка вложения отладки Chrome

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

@InvisibleDev — чтобы заставить это работать на Mac, попробуйте использовать это:

Если у вас уже открыт Chrome, он запустит ваш HTML-файл в новой вкладке.

Открыть боковую панель расширений ( Ctrl + Shift + X )

Найдите открыть в браузере и установите его

Щелкните правой кнопкой мыши на HTML-файле и выберите "Открыть в браузере" ( Alt + B )

Если вы хотите, чтобы перезагрузка выполнялась в реальном времени, вы можете использовать gulp-webserver, который будет следить за изменениями вашего файла и перезагружать страницу, таким образом, вам не придется каждый раз нажимать F5 на своей странице:

Вот как это сделать:

Откройте командную строку (cmd) и введите

npm install --save-dev gulp-webserver

Введите Ctrl+Shift+P в VS Code и введите Configure Task Runner. Выберите его и нажмите ввод. Он откроет для вас файл tasks.json. Удалите все из него и введите только следующий код

tasks.json

В корневой каталог вашего проекта добавьте gulpfile.js и введите следующий код:

gulpfile.js

Теперь в VS Code введите Ctrl+Shift+P и введите "Выполнить задачу", когда вы введете ее, вы увидите выбранную задачу "веб-сервер" и нажмите клавишу ввода.

Ваш веб-сервер теперь будет открывать вашу страницу в браузере по умолчанию. Теперь любые изменения, которые вы будете вносить в свои страницы HTML или CSS, будут автоматически перезагружены.

Вот информация о том, как настроить gulp-webserver для порта экземпляра и какую страницу загрузить.

Вы также можете запустить свою задачу, просто нажав Ctrl+P и набрав веб-сервер задачи

Мне пришлось запустить npm install -g gulp , npm install -g gulp-webserver и добавить переменную среды NODE_PATH, указывающую на мои AppData\npm\node_modules. Затем я смог запустить задачу веб-сервера, однако при запуске браузера я получаю 404. Есть идеи, что мне не хватает?

Неважно, просто нужно было изменить «приложение» в вашем примере на «.». (поэтому он обслуживается из текущего каталога).

Один комментарий к ответу: если вы хотите запустить html-файл в своем браузере, который будет автоматически перезагружаться при изменении, ваш gulpfile.js должен выглядеть так, с '.' вместо «приложения». Code = var gulp = require('gulp'), webserver = require('gulp-webserver'); gulp.task('веб-сервер', функция () < gulp.src('.') .pipe(webserver(< резервный вариант: 'index.html', livereload: true, open: true >)); >);

Это потрясающе. Спасибо, что объяснили это как ценный вариант. Я также применил немного ответов Крилла и Фрииса, чтобы заставить это работать. Но это так!

Я получал сообщение "Cannot GET/", потому что скопировал gulpfile.js, не настроив строку gulp.src('app') так, чтобы она фактически указывала на мой источник (который был не /app, а '.'). Работает идеально. Спасибо!

Теперь вы можете установить расширение View In Browser. Я протестировал его на Windows с Chrome, и он работает.

версия vscode: 1.10.2

Вот версия 2.0.0 для текущего документа в Chrome с сочетанием клавиш:

Для работы на веб-сервере:

В Linux вы можете использовать команду xdg-open, чтобы открыть файл в браузере по умолчанию:

Спасибо! Я пользователь Linux и чувствовал себя потерянным. Хочу добавить, что для запуска в браузере нужно нажать Ctrl+Shift+b. Для меня мнемоника была «b = браузер». :-)

Нажмите на этот левый нижний значок управления. Нажмите «Расширения» или «Ярлык» Ctrl+Shift+X

Затем выполните поиск в расширении с помощью этого ключевого предложения «Открыть в браузере по умолчанию». Вы найдете это расширение. Мне так лучше.

Теперь щелкните правой кнопкой мыши html-файл, и вы увидите «Открыть в браузере по умолчанию» или сочетание клавиш Ctrl+1, чтобы увидеть html-файл в браузере.

Сочетание клавиш Ctrl+1 разумно перезаписывает Ctrl+1 по умолчанию, открывая браузер при работе с html в проводнике, в противном случае он устанавливает курсор в текущем редакторе.

Я просто повторно публикую шаги, которые я использовал из блога msdn. Это может помочь сообществу.

Это поможет вам настроить локальный веб-сервер, известный как lite-server с VS Code, а также поможет вам разместить ваши статические HTML-файлы на локальном хосте и отладить код Javascript.

<р>1. Установите Node.js

Если он еще не установлен, скачайте его здесь

Он поставляется с npm (менеджером пакетов для получения и управления вашими библиотеками разработки)

<р>2. Создайте новую папку для своего проекта

Где-нибудь на диске создайте новую папку для своего веб-приложения.

<р>3. Добавьте файл package.json в папку проекта

Затем скопируйте/вставьте следующий текст:

<р>4. Установите веб-сервер

В окне терминала (командная строка в Windows), открытом в папке вашего проекта, выполните следующую команду:

Это установит lite-server (определено в package.json), статический сервер, который загружает index.html в ваш браузер по умолчанию и автоматически обновляет его при изменении файлов приложения.

<р>5. Запустите локальный веб-сервер!

(Предполагая, что в папке вашего проекта есть файл index.html).

В том же окне терминала (командная строка в Windows) выполните следующую команду:

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

lite-server следит за вашими файлами и обновляет страницу, как только вы вносите изменения в любые файлы html, js или css.

И если в VS Code настроено автоматическое сохранение (меню Файл/Автосохранение), вы увидите изменения в браузере по мере ввода!

Примечания:

Вот и все. Теперь перед любым сеансом кодирования просто введите npm start, и все готово!

Первоначально опубликовано здесь, в блоге msdn. Кредиты принадлежат автору: @Laurent Duveau

Появилось официальное расширение от команды VS Code под названием "Live Preview"

Установите расширение Live Preview от Microsoft.
Откройте файл HTML из рабочей области, файлы за пределами текущей рабочей области не работают.
Выполнить команду > Просмотр в реальном времени: Показать предварительный просмотр (внешний браузер)

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

Если вы работаете только на Mac, этот файл tasks.json:

<р>. это все, что вам нужно, чтобы открыть текущий файл в Safari, при условии, что его расширение «.html».

Создайте tasks.json, как описано выше, и вызовите его с помощью ⌘ + shift + b .

Если вы хотите, чтобы он открывался в Chrome, выполните следующие действия:

Это сделает то, что вы хотите, например, открытие в новой вкладке, если приложение уже открыто.

Для Mac — открывается в Chrome — протестировано в VS Code версии 1.9.0

Используйте Command + shift + p, чтобы открыть палитру команд.

Введите «Настроить средство запуска задач». Когда вы сделаете это в первый раз, VS Code предоставит вам меню прокрутки вниз, если оно действительно выберет «Другое». Если вы делали это раньше, VS Code просто направит вас прямо к tasks.json.

Один раз в файле tasks.json. Удалите отображаемый скрипт и замените его следующим:

Вернитесь к HTML-файлу и нажмите Command + Shift + b, чтобы просмотреть страницу в Chrome.

Решение в один клик: просто установите расширения, открываемые в браузере, из магазина Visual Studio.

Если вы введете >, он покажет вам команды показа и запуска

Или в вашем случае с HTML, я думаю, F5 после открытия палитры команд должен открыть отладчик.

Открытие файлов в браузере Opera (в 64-разрядной версии Windows). Просто добавьте эти строки:

Обратите внимание на формат пути в строке "command":. Не используйте формат "C:\path_to_exe\runme.exe".

Чтобы запустить эту задачу, откройте html-файл, который хотите просмотреть, нажмите F1, введите task opera и нажмите Enter

мой скрипт бегуна выглядит так:

и он просто открывает мой проводник, когда я нажимаю ctrl shift b в моем файле index.html

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

Обратите внимание, что я ничего не вводил в аргументы для Edge, потому что Edge — это мой браузер по умолчанию, он просто дал ему имя файла.

EDIT: также вам не нужны -incognito или -private-window. просто мне нравится смотреть в приватном окне

Я копировал только часть задач. "args":["/C"] - это то, что заставляет это работать. Из любопытства, что это делает?

Вот версия 2.0.0 для Mac OSx:

Для Mac задайте следующее содержимое файла tasks.json (в папке .vscode) и откройте его с помощью SHFT+COMMAND+B.

Следующее работало в версии 1.53.2 на Windows 10 ->

выберите запуск активного файла в меню терминала
Он выполнил HTML-файл в пограничном браузере по умолчанию

Ctrl + F1 откроет браузер по умолчанию. в качестве альтернативы вы можете нажать Ctrl + shift + P, чтобы открыть командное окно и выбрать «Просмотр в браузере». HTML-код необходимо сохранить в файл (несохраненный код в редакторе - без расширения не работает)

Какую версию Visual Studio Code вы используете? Эти команды не работают в моей только что обновленной версии 1.8.1. Ctrl + F1 ничего не делает, и у меня нет параметра «Просмотр в браузере» в палитре команд. Может быть, у вас есть что-то помимо установленных по умолчанию или дополнительных задач в файле tasks.json?

вероятно, большинство из них смогут найти решение из приведенных выше ответов, но, видя, что у меня ничего не работает (vscode v1.34), я решил поделиться своим опытом. если хотя бы один человек сочтет это полезным, классный пост, не зря, amiirte?

в любом случае, мое решение ( windows ) создано поверх решения @noontz. его конфигурации могло быть достаточно для более старых версий vscode, но не для 1.34 (по крайней мере, я не мог заставить ее работать...).

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

<р>Так. рабочий tasks.json для пользователей Windows, использующих vscode 1.34:

Обратите внимание, что свойство problemMatcher не требуется для того, чтобы это работало, но без него вам придется выполнить дополнительный ручной шаг. пытался прочитать документы по этому свойству, но я слишком туп, чтобы понять. надеюсь, кто-нибудь придет и научит меня, но да, заранее спасибо за это. все, что я знаю, это -- включите это свойство, и ctrl+shift+b откроет текущий HTML-файл на новой вкладке Chrome, без проблем.

Чт Нгхием

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

В этой статье я расскажу вам, как начать работу и настроить VS Code для веб-разработчиков.

Вот видео, которое вы можете посмотреть, если хотите дополнить эту статью:

Видео по настройке кода VS

Введение в VS Code

Загрузить код Visual Studio

Вкладка приветствия VS Code

После того как вы установите и откроете его, первое, что вы увидите, — это вкладка «Добро пожаловать». Здесь вы найдете 5 разделов:

Вкладка "Приветствие"

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

Недавние: вы можете найти все недавно открытые папки

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

Настройка. Вы видите, что можете устанавливать настройки и сочетания клавиш из других редакторов кода, таких как Vim или Atom. Так что, если вы уже привыкли использовать эти редакторы, вы можете проверить их.

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

Цветовая тема

Обучение: здесь вы найдете 3 варианта. Первым пунктом в списке является «Найти и выполнить все команды». При этом мы можем найти и запустить все доступные команды. Мы будем использовать это часто, поэтому я рекомендую вам запомнить сочетание клавиш, а именно Command/Control + Shift + P .

Второй пункт – Обзор интерфейса. Если мы выберем его, мы увидим наиболее распространенные элементы в пользовательском интерфейсе, а также ярлык для переключения элементов:

Обзор интерфейса

Последний вариант — это игровая площадка интерактивного редактора. Здесь вы можете найти основные функции VS Code с инструкциями и примерами.

Давайте выберем, например, Эммета. С помощью Emmet мы можем писать ярлыки, а затем превращать их в фрагмент кода.

Скажем, например, что мы хотим создать элемент неупорядоченного списка с 3 элементами внутри, и каждый элемент имеет имя класса "фрукты". Мы можем ввести ul>li.fruit*3 и нажать Tab .

Эммет в интерактивном редакторе Playground

Вы также можете видеть, что в существующем примере ( ul>li.item$*5 ) они попытались создать элемент неупорядоченного списка и 5 элементов с именем класса элемента внутри. Но имя класса также имеет нумерацию:

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

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

Проводник файлов VS Code

Затем перейдите в Проводник, выбрав первую вкладку на боковой панели навигации или нажав Command/Control + Shift + E .

Здесь вы можете открыть существующую папку, но давайте создадим новую папку и новый файл. Вместо открытия нового окна давайте откроем терминал в VS Code. Вы можете выбрать кнопку ошибки и предупреждения в строке состояния, а затем выбрать вкладку «Терминал» или использовать сочетание клавиш Control + ` .

Сейчас я нахожусь в своем домашнем каталоге. Давайте создадим новую папку, набрав mkdir vscode-tutorials и зайдем в нее с помощью cd vscode-tutorials .

Теперь мы хотим открыть эту папку, поэтому мы можем нажать кнопку открытия папки и перейти к каталогу папки, но это много работы. Поэтому вместо этого в терминале мы можем сказать code . . Теперь вы можете столкнуться с ошибкой: bash: code: command not found .

Терминал в VS Code

Чтобы исправить это, мы можем открыть палитру команд и найти команду Shell Command: Install code в пути и выбрать ее. Теперь, если мы вернемся к терминалу и наберем код. , откроется новое окно VS Code с созданной папкой.

Хорошо, теперь мы хотим создать новый файл. В разделе папки мы можем щелкнуть значок нового файла или щелкнуть правой кнопкой мыши и выбрать новый файл. Назовем файл index.html, внутри него напечатаем восклицательный знак (!) и нажмем tab или enter. С Emmet он создаст HTML-шаблон.

Генерация HTML с помощью Emmet в VS Code

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

Это очень полезная функция VS Code. Но мы не хотим постоянно искать Format Document и хотим, чтобы он форматировался всякий раз, когда мы сохраняем файл.

Вы также заметили, что отступ теперь равен 4 пробелам, что, на мой взгляд, многовато. Итак, давайте изменим его на 2. А для этого мы можем перейти в настройки или использовать сочетание клавиш Command/Control + , .

На вкладке «Часто используемые» мы можем изменить размер вкладки на 2, а в разделе «Текстовый редактор/форматирование» мы можем выбрать «Форматировать при сохранении». Теперь при каждом сохранении файлы будут правильно отформатированы.

Расширения кода VS

Последнее, что я хочу показать вам, это расширения. Вы можете выбрать вкладку расширений на боковой панели навигации или с помощью сочетания клавиш: Command/Control + Shift + X .

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

Есть множество расширений на выбор. Но первое расширение, которое нам нужно установить, это Live Server. При этом у нас может быть локальный сервер, который перезагружает статические веб-страницы.

Live Server Extension

Например, если мы перейдем к нашему index.html, откроем палитру команд и найдем Live Server: Open with Live Server, вы увидите, что открывается новая вкладка в браузере.

И если мы создадим новый элемент в нашем HTML, например

Заключение

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

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

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

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