> ## Documentation Index
> Fetch the complete documentation index at: https://support.labex.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Интерфейс WebIDE LabEx VM

> WebIDE LabEx предоставляет современную среду разработки, похожую на VS Code, для задач кодирования. Построенный на Ubuntu 22.04, он предлагает знакомый интерфейс для написания, компиляции и запуска кода на нескольких языках программирования.

## Предварительный просмотр WebIDE

<img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/webide.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=da64f20fc4317410e337993b75c16904" alt="WebIDE Preview" width="960" height="640" data-path="images/webide.png" />

Среда WebIDE особенно полезна для:

1. Написания и отладки кода на различных языках программирования (Java, JavaScript, Python и т. д.)
2. Проектов веб-разработки с возможностями живого просмотра, см. [Создайте свою первую HTML-страницу в WebIDE
   ](https://labex.io/tutorials/html-create-your-first-html-page-in-webide-451041)
3. Управления файлами и каталогами проекта через интуитивно понятный интерфейс
4. Интегрированных операций терминала для задач командной строки

## Расположение среды

Интерфейс WebIDE состоит из нескольких ключевых компонентов:

1. Левая боковая панель:
   * Проводник файлов для навигации по проекту
   * Функция поиска
   * Управление исходным кодом для операций Git
   * Панель расширений
2. Область редактора: Основная рабочая область кодирования
3. Нижняя панель: Терминал, проблемы и вывод
4. Строка состояния: Быстрый доступ к настройкам и живому просмотру
5. Верхняя панель меню: Файл, Правка, Вид и другие параметры

## Доступ к терминалу

Вы можете открыть терминал двумя способами:

1. Нажмите на значок <i className="fa-regular fa-circle-xmark" /> в левом нижнем углу и переключитесь на вкладку Terminal;
   <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-fOGlaC78@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=d39064241ec13475b8a5f07b9b5b6c0e" alt="Terminal Access" width="1860" height="806" data-path="images/screenshot-20241022-fOGlaC78@2x.png" />
2. Используйте верхнее меню: Terminal > New Terminal
   <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-wyYSNaTb@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=891ad0b51501dc8941fe3c726f853a92" alt="Terminal Access" width="1204" height="584" data-path="images/screenshot-20241022-wyYSNaTb@2x.png" />

## Предварительный просмотр HTML

Чтобы просмотреть ваш HTML-файл:

1. В WebIDE нажмите кнопку "Go Live" в правом нижнем углу.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/461shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d5a94c83ffb5faa003192de94eaed9c8" alt="Go Live button in WebIDE" width="1920" height="1080" data-path="images/461shots_so.png" />
2. Откроется новая вкладка браузера с отображением вашей HTML-страницы.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/429shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=e49e551fb117a34bfb487062a3310348" alt="HTML page rendered in browser tab" width="1920" height="1080" data-path="images/429shots_so.png" />
3. Или вы можете нажать на вкладку "Web 8080", чтобы открыть предварительный просмотр.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/236shots_so.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=86e55e8dcc899fedd7bd3d130ce392b3" alt="WebIDE Web 8080 tab preview" width="1920" height="1080" data-path="images/236shots_so.png" />
4. Если ваш проект находится в подкаталоге, вы можете получить к нему доступ, щелкнув имя подкаталога в проводнике, тогда он автоматически отобразит файл `index.html` в этом каталоге.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250110-11-19-17-1N4fwHBz.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=ef3a2f7bbd795218b50d9b95086b1ed4" alt="WebIDE subdirectory preview" width="425" height="169" data-path="images/20250110-11-19-17-1N4fwHBz.png" />
5. Если ваш проект содержит несколько HTML-файлов, включая `index.html`, вы можете добавить имя файла к URL-адресу, чтобы просмотреть его напрямую. Например, `https://xxx.labex.io/another-file.html`.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250113-09-42-31-4EbLwccE.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=07166edb93053840f14d3f73923e2d0e" alt="WebIDE multiple HTML files preview" width="851" height="311" data-path="images/20250113-09-42-31-4EbLwccE.png" />
6. Вы можете открыть предварительный просмотр в новой вкладке, нажав кнопку "Open in New Tab". Он откроет предварительный просмотр в новой вкладке браузера.
   <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20250113-09-48-45-BnqYObPj.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=7ba9545421a5bd671ec47a8989342134" alt="WebIDE Open in New Tab" width="872" height="191" data-path="images/20250113-09-48-45-BnqYObPj.png" />

"Go Live" автоматически:

* Запустит веб-сервер
* Предоставит обновления в реальном времени по мере изменения вашего кода

> Советы: LabEx VM размещает предварительный просмотр на порту 8080. Вы можете поделиться ссылкой на предварительный просмотр с другими, чтобы продемонстрировать свою работу. После остановки вашей lab vm ссылка на предварительный просмотр больше не будет работать.

## Сценарии использования

<AccordionGroup>
  <Accordion title="Пример разработки на Java" icon="coffee">
    <Card title="Ваша первая Java Lab" icon="flask-conical" href="https://labex.io/labs/java-your-first-java-lab-411751">
      Это пример Java lab, который демонстрирует, как писать, компилировать и
      запускать простую программу на Java с использованием LabEx WebIDE.
    </Card>

    Работа с проектами Java в WebIDE:

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20241016-13-50-50-DprQuVyZ.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=188bffef44632334239fd25e7710a872" alt="Java Development" width="1203" height="696" data-path="images/20241016-13-50-50-DprQuVyZ.png" />

    1. Создайте новый файл Java через проводник
    2. Напишите свой код Java с подсветкой синтаксиса
    3. Скомпилируйте и запустите в терминале:

    ```bash theme={null}
    javac MyClass.java
    java MyClass
    ```

    4. Просматривайте ошибки компиляции и предупреждения в реальном времени
  </Accordion>

  <Accordion title="Пример веб-разработки" icon="globe">
    <Card title="Ваша первая HTML Lab" icon="flask-conical" href="https://labex.io/labs/html-your-first-html-lab-92740">
      Это пример HTML lab, который демонстрирует, как создать простую веб-страницу с
      использованием LabEx WebIDE.
    </Card>

    Для задач разработки интерфейса:

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20240725-14-54-07-RbKQNn37@2x.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d86a1ee42ec3fc28320706c8e2af29ad" alt="Go Live Button" width="2402" height="2020" data-path="images/20240725-14-54-07-RbKQNn37@2x.png" />

    1. Создайте файлы HTML, CSS и JavaScript
    2. Нажмите кнопку "Go Live" в правом нижнем углу
    3. Доступ к вашей веб-странице через:
       * Вкладка Web 8080 в верхней части LabEx VM
       * Создайте новые вкладки предварительного просмотра портов, используя кнопку +

    Примечание: Ваш проект автоматически развертывается в общедоступном URL-адресе на сервере LabEx, что делает его доступным через вкладки Web.
  </Accordion>

  <Accordion title="Пример разработки на Python" icon="code">
    <Card title="Создайте процессор именных тегов астронавтов" icon="flask-conical" href="https://labex.io/labs/python-create-an-astronaut-name-tag-processor-393083">
      Это пример задачи на Python, который демонстрирует, как обрабатывать имена
      астронавтов с использованием LabEx WebIDE.
    </Card>

    Для программирования на Python:

    <img src="https://mintcdn.com/huhuhang/lbTGZZG7azHYkwfT/images/20241008-16-18-06-HuMxDYQy.png?fit=max&auto=format&n=lbTGZZG7azHYkwfT&q=85&s=d88a4be0db03de93afc0ea7c2a0962bc" alt="Python Development" width="946" height="641" data-path="images/20241008-16-18-06-HuMxDYQy.png" />

    1. Создайте файл Python в проводнике
    2. Напишите свой код Python с:
       * Подсветкой синтаксиса
       * Завершением кода
       * Обнаружением ошибок
    3. Запустите свой скрипт в терминале:

    ```bash theme={null}
    python3 script.py
    ```

    4. Используйте интегрированный отладчик для пошагового выполнения
  </Accordion>
</AccordionGroup>

## Часто задаваемые вопросы

<AccordionGroup>
  <Accordion title="Как мне получить доступ к моему веб-приложению?" icon="globe">
    LabEx VM автоматически развертывает ваши веб-проекты:

    <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-Sgt0GGyu@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=79d82dcc58719cf5b4b19530b488fcbe" alt="Web Preview" width="1287" height="379" data-path="images/screenshot-20241022-Sgt0GGyu@2x.png" />

    1. Порт по умолчанию 8080:
       * Нажмите вкладку "Web 8080" в верхней части LabEx VM
       * Ваше приложение будет доступно через общедоступный URL-адрес

    2. Пользовательские порты:
       * Нажмите кнопку +, чтобы создать новые вкладки предварительного просмотра портов
       * Каждый порт получает свой собственный общедоступный URL-адрес
       * Полезно для запуска нескольких служб (например, интерфейса и бэкенда)

    Примечание: В отличие от локальной разработки, вы не получаете доступ к localhost напрямую, поскольку LabEx работает в облаке.
  </Accordion>

  <Accordion title="Какие основные сочетания клавиш?" icon="keyboard">
    Общие сочетания клавиш в WebIDE:

    * **Операции с файлами**
      * Новый файл: Ctrl+N
      * Сохранить: Ctrl+S
      * Найти: Ctrl+F
      * Заменить: Ctrl+H

    * **Элементы управления панелью**
      * Переключить боковую панель: Ctrl+B
      * Переключить терминал: Ctrl+\`
      * Палитра команд: Ctrl+Shift+P

    * **Функции редактора**
      * Мульти-курсор: Alt+Click
      * Выбрать все вхождения: Ctrl+Shift+L
      * Форматировать документ: Shift+Alt+F
  </Accordion>

  <Accordion title="Могу ли я установить дополнительные инструменты или пакеты?" icon="wrench">
    Да, вы можете установить дополнительные инструменты с помощью менеджера пакетов Ubuntu:

    ```bash theme={null}
    sudo apt update
    sudo apt install package-name
    ```

    Для менеджеров пакетов, зависящих от языка:

    * Node.js/npm:

    ```bash theme={null}
    npm install package-name
    ```

    * Python/pip:

    ```bash theme={null}
    pip install package-name
    ```

    Помните, что установки временные и будут сброшены при завершении сеанса.
  </Accordion>

  <Accordion title="Как мне обрабатывать загрузку и скачивание файлов?" icon="upload">
    WebIDE предоставляет несколько способов управления файлами:

    1. **Загрузка файлов:**

       * Перетащите файлы в проводник
       * Используйте загрузку/скачивание после щелчка правой кнопкой мыши в проводнике

           <img src="https://mintcdn.com/huhuhang/q4ekfuwM7mDVAiiH/images/screenshot-20241022-j7Pl3YZQ@2x.png?fit=max&auto=format&n=q4ekfuwM7mDVAiiH&q=85&s=ab2b59536671cb0184c1f57d3a981fec" alt="Upload Files" width="1412" height="1250" data-path="images/screenshot-20241022-j7Pl3YZQ@2x.png" />

    2. **Скачивание файлов:**
       * Щелкните правой кнопкой мыши файл в проводнике
       * Выберите "Скачать"

    3. **Копировать/Вставить:**
       * Текстовое содержимое можно скопировать непосредственно между вашей локальной машиной и WebIDE
       * Двоичные файлы следует использовать функции загрузки/скачивания

    Помните, что все файлы временные и будут потеряны при завершении сеанса.
  </Accordion>
</AccordionGroup>