Codemaid visual studio что это

Обновлено: 05.07.2024

Visual Studio Code – это популярная интегрированная среда разработки (IDE). Большой выбор плагинов, минималистичный дизайн и кроссплатформенная поддержка делают Visual Studio Code отличным выбором для разработчиков всех уровней. В этом мануале мы рассмотрим использование плагина Remote-SSH для удаленной разработки программного обеспечения. С помощью этого плагина можно редактировать файлы на локальной рабочей станции, а на удаленном сервере выполнять задачи разработки – запускать программы, модульные тесты или статический анализ.

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

В этом мануале мы подключим плагин Remote-SSH, настроим Visual Studio Code для выполнения кода на удаленном сервере и выполним на нем код из локальной установки.

Требования

Локальная машина разработки на Windows, MacOSX или Linux (данный мануал был протестирован на ChromeOS).
Платформа Visual Studio Code, которую можно загрузить и установить с официального сайта.
Пара ключей SSH. Инструкции для macOS и Linux вы найдете в мануале Установка SSH-ключей в Ubuntu 18.04.
Удаленный сервер Ubuntu 18.04, настроенный по этому мануалу.

1: Установка плагина Remote-SSH

В Extensions Marketplace можно скачать поддерживаемые и сторонние расширения для различных инструментов и языков программирования. Здесь нам нужно найти плагин Remote-SSH и установить его.

С левой стороны в интерфейсе IDE находится вертикальный ряд из пяти значков. Самый последний значок (четыре квадрата, один из которых расположен чуть выше остальных) отвечает за доступ к Extensions Marketplace.

Вы также можете получить доступ к этому разделу, нажав Ctrl+Shift+X. Когда вы откроете эту страницу, вы увидите список предлагаемых плагинов, которые можно установить.

Когда вы откроете Marketplace Extensions, введите Remote-SSH в строку поиска Search Extensions in Marketplace. Когда вы найдете этот плагин, выберите его, а затем нажмите зеленую кнопку Install, чтобы установить его.

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

2: Настройка плагина Remote-SSH и подключение к серверу

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

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

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

После установки Remote-SSH в левом нижнем углу интерфейса Visual Studio Code появится маленький зеленый прямоугольник. Если вы наведете указатель мыши на поле, всплывающее окно подскажет «Open a remote window». Найдите кнопку, которая выглядит как символы > и <, расположенные по диагонали друг от друга.

Нажмите эту кнопку, и вверху появится диалоговое окно. Выберите из списка Remote-SSH: Open Configuration File…

Следующее окно спросит вас, какой файл конфигурации вы хотите открыть. Если вы работаете в Windows, вы увидите два пути: один в вашем личном пользовательском каталоге и второй в месте установки SSH. Вы должны использовать файл в своем пользовательском каталоге при настройке сервера.

Выберите файл, и ваш редактор откроет файл config. Добавьте в него следующий код, чтобы определить соединение с вашим сервером (замените выделенные разделы данными о вашем сервере):

Вот как работает этот файл:

Host: имя вашего хоста. Это поле позволяет использовать короткое имя или аббревиатуру вместо полного IP-адреса или имени хоста при подключении к серверу.
HostName: фактическое имя хоста сервера, это либо IP-адрес, либо полный домен.
User: пользователь, с помощью которого вы создадите подключение.
IdentityFile: путь к вашему закрытому ключу SSH. В системах Mac и Linux он хранится в домашнем каталоге, в скрытом каталоге .ssh. Обычно он называется id_rsa. Если вы работаете в Windows, вы должны были указать место для сохранения этого файла, когда создавали его с помощью putty-gen.

Укажите соответствующие значения в файле и сохраните его.

Visual Studio Code настроен и готов подключиться к вашему серверу. Нажмите зеленую кнопку Open a remote window в нижнем левом углу и выберите Remote-SSH: Connect to Host…

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

Если вы впервые подключаетесь к этому серверу со своего компьютера, скорее всего, появится диалоговое окно и предложит вам проверить отпечаток ключа SSH.

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

ssh-keygen -l -f /etc/ssh/ssh_host_key.pub

Если этот отпечаток совпадает с тем, который вы видите в диалоговом окне Visual Studio Code, то вы подключаетесь к правильному серверу. Можно нажать Continue.

При создании нового соединения Visual Studio Code по умолчанию открывает новое окно. Вы увидите окно приветствия. Ваше соединение успешно создано, если вы видите «SSH: your_ip_address_or_hostname» в зеленом поле в нижнем левом углу. Это означает, что Visual Studio Code подключен и взаимодействует с вашим удаленным сервером.

Теперь вы можете запускать команды и код из вашего редактора.

3: Выполнение кода на удаленном сервере

Плагин Remote-SSH настроен, подключение создано. Давайте попробуем запустить код на удаленной машине. Откройте окно терминала, выбрав Terminal в панели навигации в верхней части интерфейса Visual Studio и кликнув New Terminal. Вы также можете открыть терминал при помощи клавиш CTRL+Shift+`. Этот терминал откроется на вашем удаленном сервере, а не на локальном компьютере.

Когда терминал откроется, введите следующую команду, чтобы запросить IP-адрес и убедиться, что вы подключены к удаленному серверу:

Вы увидите следующий вывод в своем терминале:

1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
inet 127.0.0.1/8 scope host lo
valid_lft forever preferred_lft forever
inet6 ::1/128 scope host
valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc fq_codel state UP group default qlen 1000
link/ether 16:cb:05:5b:30:f1 brd ff:ff:ff:ff:ff:ff
inet your_server_ip brd your_broadcast_address scope global eth0
valid_lft forever preferred_lft forever
.

Чтобы убедиться, что вы можете запускать код удаленно, создайте новый файл Python по имени hello.py в вашем редакторе. После подключения к удаленному серверу все файлы, созданные с помощью Visual Studio Code, будут сохранены на удаленном сервере (не на вашем локальном компьютере).

Добавьте следующие строки в файл:

print("Hello 8host!")

Чтобы запустить эту программу на своем сервере, откройте терминал в Visual Studio Code из меню или с помощью клавиш CTRL+Shift+`. Этот сеанс терминала подключен к вашему удаленному серверу. Введите следующую команду, чтобы запустить вашу программу hello.py:

Вывод вашей программы будет отображаться в терминале.

Вы также можете запустить файл из контекстного меню Debug, выбрав при этом опцию Run without Debugging.

Заключение

Теперь ваша установка Visual Studio Code настроена для разработки на удаленном сервере по SSH. Удаленное выполнение кода с помощью IDE дает много преимуществ, включая возможность быстро протестировать код в разных операционных системах и с различными характеристиками оборудования. Если у вас есть подключение к Интернету, вы можете подключаться к своему серверу и работать над своим кодом с любого компьютера. Также это позволяет разрабатывать приложения для среды Linux, даже если в качестве основной операционной системы вы используете Windows.

Расширения — это пакеты кода, которые выполняются в Visual Studio и предоставляют новые или улучшенные функции. К числу расширений относятся элементы управления, примеры, шаблоны, инструменты или другие компоненты, расширяющие возможности Visual Studio, например Live Share или Visual Studio IntelliCode.

Сведения о создании расширений Visual Studio см. в разделе Visual Studio SDK. Сведения об использовании расширений см. на страницах отдельных расширений в Visual Studio Marketplace.

Диалоговое окно "Расширения и обновления"

Используйте диалоговое окно Расширения и обновления для установки и управления расширениями Visual Studio. Чтобы открыть диалоговое окно Расширения и обновления, выберите Средства > Расширения и обновления или введите Расширения в поле поиска Быстрый запуск.

Диалоговое окно "Управление расширениями"

Используйте диалоговое окно Управление расширениями для установки расширений Visual Studio и управления ими. Чтобы открыть диалоговое окно Управление расширениями, выберите Расширения > Управление расширениями. Или введите строку Расширения в поле поиска, а затем выберите Управление расширениями.

На левой панели расширения разделены на установленные, доступные в Visual Studio Marketplace (онлайн) и имеющие доступные обновления. Диспетчер перемещаемых расширений хранит список всех расширений Visual Studio, которые вы установили на любом компьютере или экземпляре Visual Studio. С его помощью вы легко сможете находить нужные вам расширения.

Поиск и установка расширений

Установить расширения можно из Visual Studio Marketplace или из диалогового окна "Расширения и обновления" в Visual Studio.

Чтобы установить расширения из Visual Studio, выполните указанные ниже действия.

В диалоговом окне Сервис > Расширения и обновления найдите расширение, которое вы намерены установить. Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.

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

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

Установка без использования диалогового окна "Расширения и обновления"

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что эти файлы не обнаруживаются в диалоговом окне Сервис > Расширения и обновления, VSIX-файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки данное расширение можно будет включить, отключить или удалить в диалоговом окне Расширения и обновления .

Visual Studio Marketplace содержит расширения VSIX и MSI. Расширения на основе MSI невозможно включить или отключить в диалоговом окне "Расширения и обновления".
Если расширение MSI содержит файл extension.vsixmanifest, это расширение отобразится в диалоговом окне Расширения и обновления.

Установить расширения можно из Visual Studio Marketplace или из диалогового окна "Управление расширениями" в Visual Studio.

Чтобы установить расширения из Visual Studio, выполните указанные ниже действия.

В диалоговом окне Расширения > Управление расширениями найдите расширение, которое вы намерены установить. (Если известно имя или часть имени расширения, можно выполнить поиск в окне Поиск.)

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

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

Установка без использования диалогового окна "Управление расширениями"

Расширения, упакованные в VSIX-файлы, могут быть доступны не только в Visual Studio Marketplace. Несмотря на то что VSIX-файлы не обнаруживаются в диалоговом окне Расширения > Управление расширениями, такой файл можно установить, дважды щелкнув его или выбрав файл и нажав клавишу ВВОД. После этого следуйте инструкциям. После установки такое расширение можно будет включить, отключить или удалить в диалоговом окне Управление расширениями.

Visual Studio Marketplace содержит расширения VSIX и MSI. Расширения на основе MSI невозможно включить или отключить в диалоговом окне "Управление расширениями".
Если расширение MSI содержит файл extension.vsixmanifest, оно появляется в диалоговом окне Управление расширениями.

Удаление или отключение расширения

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

Отключать можно только расширения VSIX, но не расширения, которые были установлены с помощью MSI. Расширения, установленные с помощью MSI, можно только удалить.

Расширения на уровне пользователя и администратора

Большинство расширений устанавливаются на уровне пользователя в папке %LocalAppData%\Microsoft\VisualStudio\<версия Visual Studio>\Extensions\ . Некоторые расширения устанавливаются на уровне администратора в папку <Visual Studio installation folder>\Common7\IDE\Extensions\ .

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

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

Откройте страницу параметров расширений (Сервис > Параметры > Среда > Расширения).

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

Перезапустите Visual Studio.

Автоматическое обновление расширений

Расширения обновляются автоматически при появлении новой версии в Visual Studio Marketplace. Новая версия расширения обнаруживается и устанавливается в фоновом режиме. При следующем открытии Visual Studio будет запущена новая версия расширения.

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

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Изменить параметры расширений и обновлений в диалоговом окне Сервис > Расширения и обновления. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

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

Чтобы отключить автоматическое обновление для всех расширений, щелкните ссылку Измените параметры расширений в диалоговом окне Расширения > Управление расширениями. В диалоговом окне Параметры снимите флажок Автоматически обновлять расширения.

Уведомления об аварийном завершении работы или зависаниях

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

Visual Studio оповещает еще и о тех расширениях, которые могут приводить к недоступности интерфейса.

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

Выберите Отключить это расширение. Visual Studio отключает расширение и сообщает, нужно ли перезагрузить компьютер, чтобы отключение вступило в силу. Если потребуется, вы можете снова включить расширение в диалоговом окне Сервис > Расширения и обновления.

Выберите Отключить это расширение. Visual Studio отключает расширение и сообщает, нужно ли перезагрузить компьютер, чтобы отключение вступило в силу. Если потребуется, вы можете снова включить расширение в диалоговом окне Расширения > Управление расширениями.

Если уведомление относилось к аварийному завершению в предыдущем сеансе, в Visual Studio больше не будет отображаться уведомление при аварийном завершении работы этого расширения. Этот выбор не влияет на уведомления Visual Studio о зависаниях, связанных с этим расширением, а также об аварийных завершениях и зависаниях, связанных с другими расширениями.
Если же уведомление относилось к зависанию, в интегрированной среде разработки (IDE) больше не будут появляться уведомления о том, что это расширение связано с зависаниями. В Visual Studio по-прежнему будут отображаться уведомления об аварийном завершении работы этого расширения, а также об аварийном завершении работы и зависаниях других расширений.

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

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

Примеры

При установке примера из сети решение сохраняется в двух местоположениях:

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

Отдельный контрольный экземпляр сохраняется на компьютере.

С помощью диалогового окна Сервис > Расширения и обновления можно выполнить следующие задачи, связанные с примерами.

С помощью диалогового окна Расширения > Управление расширениями можно выполнить следующие задачи, связанные с примерами.

Отобразить список контрольных экземпляров установленных образцов.

Отключить или удалить контрольный экземпляр образца.

Установить пакеты примеров — коллекции примеров, связанных с определенной технологией или функцией.

Установить отдельные примеры из сети.

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

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

Давайте поговорим о Code — Visual Studio Code.

Наш VSC будет пятирогим лазеростреляющим единорогом —после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.

О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.

Самая эпичная тема для Visual Studio Code:

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

Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.

Простое расширение, которое делает отступы более читабельными.

Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .

Простой способ предпросмотра SVG.

Не могу жить без него — пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier.

Подсказки, отладка и встроенные команды для React Native.

Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш:
cmd ⌘ + P — Mac
ctrl + P — Windows

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

Очень удобная штука для тех из нас, кто привык к ST3. 🎉

Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.

Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.

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

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

Git Project Manager (GPM) — это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.

Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.

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

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

Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.

Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.

Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.

Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).

Мгновенно выделяет и удаляет конечные пробелы.

Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.

Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.

Поддержка Vue для VSCode

Запустите фрагмент кода или целый файл сразу в нескольких языках.

Расширенная поддержка автозаполнения и рефакторинга кода на PHP.

Иконки для редактора VSCode.

Пользуйтесь Jest от Facebook с удовольствием.

Сниппеты кода для разработки на React.js в синтаксисе ES6.

Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤

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

Россия

размер шрифта уменьшить размер шрифтаувеличить размер шрифта
Печать
Эл. почта
Станьте первым комментатором!

В прошлых статьях ( первая часть , вторая часть ) мы рассмотрели установку среды разработки VSCode под Windows 10 и добавили в неё поддержку языка C++.

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

Данная среда может использоваться и для разработки HTML-страниц.

Сегодня мы рассмотрим установку двух расширений Browser Preview и Live Server, которые позволяют создавать HTML-сайты не устанавливая отдельный web-сервер, и производить отладку и правку дизайна сайта не переключаясь между редактором и браузером!

Установка расширения Browser Preview

чтобы открыть окно Расширения.

Нам потребуется установить расширения Browser Preview от автора Kenneth Auchenberg.

Данное расширение позволяет вам организовывать просмотр страницы непосредственно в IDE, что очень полезно, при внесении в HTML-страницу множества мелких правок.

Также нам понадобится расширение – Live Server от Ritwick Dey.

Установка расширения Live Server

Это по сути небольшой web-сервер не требующий долгой настройки и готовый к запуску по одному щелчку на кнопку!

После установки Live Server обязательно закройте VSCode и запустите его снова.

Установка

Возможно, вам так же придется установить расширение Debugger for Chrome от Microsoft.

Создание проекта

Давайте создадим тестовый проект для нашей страницы.

Допустим, все проекты у нас будут храниться в папке d:\html

Откроем консоль cmd.exe и введем команды:

Откроется новое окно VSCode, в котором уже открыта папка проекта test1:

Добавим в нее новый файл index.html

Для этого нажмите на указанную кнопку и введите имя файла:

Щелкните на файл, чтобы открыть его в редакторе.

Давайте создадим простейшую страницу:

Проверка HTML-страницы

У нас есть проект и web-страница, пришло время её проверить.

Сначала запустим Live Server, для этого просто нажмите кнопку Go Live:

Откроется новое окно браузера и сервер будет запущен на порту

Закройте вкладку браузера, мы будем использовать Browser Preview

Создание конфигурации для запуска Browser Preview

Выберите меню Run -> Add configuration…

Выберите пункт Browser Preview

Будет создан файл launch.json замените его содержимое на:

Сохраните и закройте вкладку.

Запустите Browser Preview, для этого нажмите F5 или на указанную кнопку, она появится после первого запуска конфигурации:

Нажмите на «Запустить test1…»

Откроется вкладка с нашей страницей:

Работа с Browser Preview

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

Давайте добавим текст на страницу:

Нажмите Ctrl+S – страница будет сохранена и тут же обновиться вкладка с нашим сайтом в Browser Preview

Отладка сайта в браузере

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

Я расположил окна рядом, для большей наглядности.

Давайте добавим еще одну строку в html-файл:

Сохраним файл – содержимое обновится и в браузере, и во вкладке Browser Preview.

Заключение

Сегодня мы рассмотрели настройку среды разработки VSCode для разработки HTML-страниц.

Мы установили расширения Browser Preview и Live Server.

Создали тестовую страницу.

Настроили профиль для запуска нашей страницы в Browser Preview.

Открыли нашу страницу во вкладке Browser Preview и протестировали автоматическое обновление содержимого вкладки при обновлении содержимого HTML-страницы.

Протестировали обновление страницы в Google Chrome при обновлении содержимого файла.

В следующей статье мы рассмотрим настройку VSCode для разработки на языке программирования PHP.

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