Бөлісу құралы:

Открытие исходных файлов в Visual Studio Code

  • Мақала

Эксперимент с открытым исходным кодом в Visual Studio Code позволяет использовать Средства разработки Microsoft Edge, а затем редактировать файлы в Visual Studio Code, а не в редакторе кода средства DevTools Sources.

При использовании этого эксперимента, если вы используете Visual Studio Code и используете Средства разработки для изменения правил CSS, вам больше не придется использовать редактор кода в инструменте Источники devTools. Редактор кода можно просто использовать в Visual Studio Code. При включении этого эксперимента локальные файлы будут получать другую обработку.

Настройка редактирования локальных файлов в Visual Studio Code

Сначала выберите Параметры средств разработки>>Эксперименты>Открытые исходные файлы в Visual Studio Code, а затем снова запустите Средства разработки.

Если этот эксперимент включен, предположим, что в Microsoft Edge вы переходите на локальный сервер (например http://localhost , или http://127.0.0.1) или открываете локальный файл.

Microsoft Edge с открытым локальным файлом

При открытии средств разработки вам будет предложено определить корневую папку. Вы можете отказаться, нажав кнопку Закрыть (x) или нажав кнопку Don't show again . Дополнительные сведения можно получить, щелкнув ссылку Learn more .

Средства разработчика, показывающие информационную панель с запросом на идентификацию корневой папки

Если нажать кнопку Задать корневую папку , операционная система предложит перейти к папке и выбрать ее.

Выбор расположения корневой папки с помощью диспетчера файлов операционной системы

После выбора корневой папки необходимо предоставить devTools полный доступ к ней. Над панелью инструментов появится запрос с кнопками "Разрешить " или "Запретить " с запросом на предоставление разрешения на доступ к папке средствам разработки.

DevTools запрашивает доступ к папке

После предоставления разрешения выбранная папка будет добавлена в качестве рабочей области в средствах разработки на вкладке Файловая система средства Источники . Это означает, что любой файл, который вы редактируете в средствах разработки, теперь открывается в Microsoft Visual Studio Code, а не в средстве Источники. В качестве индикатора мы показываем linked значок рядом с именем файла. В этом примере мы выберем ссылку base.css в средстве Стили .

При выборе ссылки на файл в средстве Стили файл открывается в Visual Studio Code

DevTools открывает экземпляр Visual Studio Code и отображает все файлы в корневой папке. DevTools также открывает выбранный файл, прокручиваемый до правильной строки селектора CSS.

Visual Studio Code открыть с файлами корневой папки и выбранным файлом

Все изменения, внесенные в файл в средствах разработки, теперь будут синхронизированы с Visual Studio Code. Например, если изменить backgroundgreen значение для стилей текста, то одно и то же правило CSS будет автоматически добавлено base.css в файл в редакторе кода Visual Studio Code.

Изменения в коде в средстве

Изменение параметров рабочей области

Чтобы изменить поведение файлов с открытым исходным кодом в эксперименте Visual Studio Code, перейдите на страницу Параметры средств разработки, щелкнув Параметры (значок шестеренки) или нажав клавиши SHIFT+?, а затем выберите страницу Рабочая область:

Панель параметров рабочей области с несколькими параметрами

На странице Параметры>рабочей области перечислены рабочие области, а также следующие параметры конфигурации:

Элемент управления пользовательского интерфейса Описание
Флажок "Открыть исходные файлы в Visual Studio Code" Задает, следует ли открытый код файлы в Visual Studio Code.
Сохранить изменения в средствах разработки на диске Автоматически сохраняет изменения DevTools на диске.
Текстовое поле "Исключить шаблон папки " Автоматически исключает папки из папки рабочей области.
Кнопка "Добавить" рядом с пунктом Исключенные папки Исключает папку из определенной рабочей области.
Кнопка "Добавить папку" Добавляет дополнительную рабочую область.