Начало работы с веб-разработкой с помощью Visual Studio Code
Выполните начальные действия по разработке веб-сайтов, создав простой веб-проект в Visual Studio Code, содержащий веб-страницу, CSS-файл и файл JavaScript. Узнайте, как использовать средства разработчика в браузере для проверка вашей работы.
Цели обучения
В этом модуле вы узнаете, как:
- Создавать базовую веб-страницу с помощью HTML.
- Применять стили к элементам страницы с помощью CSS.
- Создавать темы с помощью CSS.
- Добавление возможности переключения между темами с помощью JavaScript
- Проверять веб-сайт с помощью средств разработчика браузера.
Предварительные требования
- Microsoft Visual Studio Code
- Опыт работы с одним или несколькими языками программирования и языком разметки, например HTML
- Компьютер под управлением одной из следующих операционных систем:
- Windows: Windows 10 или 11
- Mac: macOS 10.15 или более поздней версии
- Linux: Ubuntu, Debian, Red Hat, Fedora или SUSE
«Параметры», «Текстовый редактор», «HTML (веб-формы)», «Проверка»
Чтобы настроить проверку синтаксиса HTML-разметки в редакторе для текущего файла, перейдите на страницу параметров Проверка. Чтобы открыть эту страницу, выберите в строке меню Инструменты>Параметры и перейдите к разделу Текстовый редактор>HTML (веб-формы)>Проверка.
Проверка
- Использовать тип документа для определения схемы проверки Схема позволяет определить, какие элементы, атрибуты и регистр текста допустимы в выбранной схеме. Кроме того, вы можете определить теги и атрибуты, доступные в IntelliSense. Выберите этот параметр, если вы хотите, чтобы Visual Studio использовало содержимое страницы и html-элемент для определения схемы. Например, если вы выбрали этот параметр, а страница содержит объявление , Visual Studio использует схему HTML5. Но если тег html имеет атрибут xmlns, такой как , в Visual Studio используется схема XHTML5.
- Target when no doctype found (Выбрать целевую схему, если тип документа не найден) Выберите схему, чтобы проверить соответствие, если нет на странице.
- Показать ошибки Установите этот флажок, чтобы включить проверку. Если флажок снят, редактор не будет выделять ошибки при проверке. Остальные флажки позволяют выполнить точную настройку проверки, указав отдельные типы ошибок, которые редактор должен отмечать.
Примечание. Некоторые схемы не предоставляют параметры для пометки отдельных типов ошибок. Например, при выборе XHTML 1.1 в качестве схемы целевого объекта все флажки параметров будут сняты. В этом случае выделяются все типы ошибок.
См. также
Начало работы, щелкнув правой кнопкой мыши HTML-файл
Используйте это руководство, чтобы узнать, как открыть и закрыть Средства разработки, щелкнув правой .html кнопкой мыши файл demo To Do в Обозреватель Visual Studio Code, не запуская веб-сервер.
Шаг 1. Установка средств разработки и необходимых компонентов
- Если вы еще этого не сделали, выполните действия, описанные в разделе Установка расширения DevTools для Visual Studio Code, а затем выполните следующие действия. Для этого руководства не требуется устанавливать и запускать веб-сервер, но рекомендуется.
Шаг 2. Запустите средства разработки, щелкнув правой кнопкой мыши HTML-файл
Щелкнуть файл правой кнопкой .html мыши в Обозреватель Visual Studio Code — это main способ открыть средства разработки, если веб-страница не требует запуска на веб-сервере.
- В отличие от кнопки Запустить экземпляр , этот подход открывает средства разработки в режиме отладки.
- В отличие от кнопки Запустить проект , которую мы будем использовать позже, этот подход не требует создания launch.json файла.
Мы продемонстрируем, открыв демонстрационное веб-приложение :
- В Visual Studio Code выберите Файл>Открыть папку.
- Перейдите в каталог, в который вы клонировали репозиторий Demos, откройте конкретный каталог для приложения demo-to-do , например C:\Users\username\Documents\GitHub\Demos\demo-to-do\ , и нажмите кнопку Выбрать папку :
- Выберите Панель> действий Обозреватель (
) > правой кнопкой мыши index.html , а затем выберите Открыть в браузере Edge>Открыть с помощью средств разработки: 
Шаг 3. Упорядочивание вкладок
Чтобы сэкономить место, используйте кнопку Закрыть средства разработки или Открыть средства разработки и кнопку Переключить экранную трансляцию , чтобы переключить (открыть или закрыть) вкладки DevTools.
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :
Вкладка Edge DevTools: Browser (Инструменты разработки для Edge: браузер ) закрывается. - На вкладке Edge DevTools снова нажмите кнопку Переключить экранную трансляцию . Откроется вкладка Edge DevTools: Browser ( Браузер ).
- В правом верхнем углу вкладки Edge DevTools: Браузер нажмите кнопку Закрыть средства разработки :
- В правом верхнем углу вкладки Edge DevTools: Browser нажмите кнопку Открыть средства разработки .
- Перетащите вкладку Edge DevTools: Browser, чтобы закрепить ее в любом месте Visual Studio Code, например группировать с помощью редактора исходного кода.
Шаг 4. Изменение CSS в средствах разработки, автоматическое обновление файла .css
На вкладке Edge DevTools на вкладке Стили инструмента >Элементы можно изменять селекторы CSS, правила и значения. Флажок css зеркало редактирования установлен по умолчанию, поэтому .css файл автоматически редактируется, но изменения не сохраняются, поэтому вы можете решить, следует ли сохранять изменения.
- В инструменте Элементы на вкладке Стили щелкните значение CSS, например размер шрифта текста.
- Измените значение CSS, например с помощью колесика мыши или нажатия клавиш СТРЕЛКА ВВЕРХ и СТРЕЛКА ВНИЗ. Откроется связанный .css файл, например to-do-styles.css и прокручивается до строки, определяющей значение CSS, и автоматически изменяет .css файл, но не сохраняет изменения:
- .css Закройте файл. Visual Studio Code выводится запрос на сохранение изменений.
- Нажмите кнопку Не сохранять .
Шаг 5. Пошаговое выполнение кода JavaScript в отладчике
- Выберите панель действий> Обозреватель ().
- В каталоге demo-to-do щелкните to-do.js , чтобы открыть его. Прокрутите changeTask вниз до функции и щелкните влево от номера строки, чтобы задать точку останова:
- Если боковая панель Выполнения и отладки не отображается, выберите Просмотреть>выполнение. Боковая панель запуска и отладки содержит панель контрольных значений и другие панели отладчика.
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , введите задачу, например тест. Отладчик Visual Studio Code приостанавливает работу в точке останова to-do.js в файле:
- На панели инструментов Отладка или с помощью меню Выполнить или нажатием клавиш выполните несколько строк кода в to-do.js .
- В демонстрационном приложении, отображаемом на вкладке Edge DevTools: Browser , щелкните кружок «Готово» рядом с тестовой задачей. Отладчик Visual Studio Code приостанавливается в точке останова to-do.js в файле.
Шаг 6. Закрытие средств разработки
Чтобы завершить отладку и закрыть вкладки Edge DevTools :
- На панели инструментов Отладка нажмите кнопку Остановить (SHIFT+F5). Или в меню Выполнить выберите Остановить отладку: Вкладка Edge DevTools закрывается, а вкладка Edge DevTools: Browser (Средства разработки для Edge: браузер ) закроется.
- Закрытие средств разработки в открывании средств разработки и в браузере DevTools.
Вы завершили работу с руководством «Начало работы, щелкнув правой кнопкой мыши HTML-файл». Рекомендуется также выполнить другие руководства. См. статью Начало работы с расширением DevTools для Visual Studio Code.
См. также
- Открытие средств разработки и браузера DevTools
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Github:
- demo-to-do — демонстрационного веб-приложения, работающего на сервере github.io .
- Исходный код для демонстрации
- Репозиторий MicrosoftEdge/Demos
Как в visual studio code запустить html
Самый простой способ — открыть папку с файлами через проводник, выбрать необходимый файл, щелкнуть по нему правой кнопкой мыши и выбрать в разделе «Открыть с помощью» VS Code. Далее можно заняться редактированием файла. Вы увидите результат вёрстки в браузере, но это не слишком удобно — при любых изменениях придётся переходить в браузер и обновлять страницу. Можно немного облегчить этот вопрос с помощью установки расширения в VS Code — Live Server . Давайте настроим всё так, чтобы наша страничка открывалась сама и обновлялась, если вы что-то изменили в разметке или стилях. Для установки расширения нужно в VS Code нажать кнопку которая откроет магазин дополнений, вбить в поиске название — и нажать Install. Другой способ — скачать Live Server из магазина расширений по ссылке выше, но это менее удобно.
После установки расширения и запуска вашего HTML-файла нужно нажать кнопку «Go live», в результате откроется окно браузера с вашей страницей. При попытке изменения файла — будет происходить автоматическое обновление страницы браузера.
- В левом верхнем углу вкладки Edge DevTools нажмите кнопку Переключить экранную трансляцию :