Обновление CSS-файлов на вкладке Стили (css зеркало редактирование)
Редактирование CSS зеркало обеспечивает двустороннее взаимодействие, чтобы изменить CSS в любом случае:
- В редакторе кода измените .css файл, изменения отражаются в инструменте Элементы на вкладке Средства разработки Edge .
- В инструменте Элементы на вкладке Edge DevTools изменения отражаются в .css файле в редакторе кода.
Редактирование CSS зеркало включено по умолчанию в расширении. В результате в расширении DevTools на вкладке Стили в инструменте Элементы при изменении селекторов CSS, правил или значений локальный .css файл автоматически изменяется при изменении значений.
Например, если выбрать значение размера точки для элемента body, а затем нажать клавишу СТРЕЛКА ВВЕРХ или СТРЕЛКА ВНИЗ, то при .css открытии файла значение автоматически изменится в .css файле в режиме реального времени при изменении значения на вкладке Стили :
Без редактирования css зеркало вкладка Стили в средствах разработки Microsoft Edge отлично подходит для отладки и настройки селекторов CSS и правил CSS. Однако, хотя эти изменения немедленно отображаются в веб-браузере, они не отражаются в вашем .css файле. Это означает, что после изменения CSS на вкладке Стили необходимо скопировать и вставить изменения обратно в .css файл.
Редактирование css зеркало — это функция расширения Microsoft Edge DevTools, которая решает эту проблему. Любое изменение, которое вы вносите на вкладке Стили, также автоматически изменяет .css файл в открытой папке в Visual Studio Code. Вы можете изменить любой селектор CSS или создать новые селекторы CSS на вкладке Стили , и все изменения автоматически отражаются в правильном .css файле.
Css зеркало редактирование также работает для .html файла, содержащего элемент, например страницу Успешно. Это показано в разделе Начало работы, нажав кнопку Запустить экземпляр.
Флажок Редактирование зеркального отображения CSS
Если используется URL-адрес (вместо пути к файлу), css зеркало редактирования требует открытия папки с исходными файлами веб-страницы в Visual Studio Code, что расширение может сопоставить с ресурсами веб-страницы URL-адреса, введенного в адресную launch.json строку или файл. Если у вас нет локальных исходных файлов, но вы хотите изменить CSS в средствах разработки, снимите флажок CSS зеркало редактирование, чтобы предотвратить сообщения об ошибках при сопоставлении и редактировании зеркало. См. раздел Включение редактирования CSS зеркало ниже.
Сохранение изменений в CSS-файле
Расширение не сохраняет изменения, внесенные в редакторе автоматически. На вкладке .css файла в редакторе появится белый кружок. Изменения необходимо сохранить вручную, если вы хотите сохранить их.
Если закрыть Visual Studio, текущую папку или .css файл, Visual Studio предложит сохранить изменения.
Пример зеркального отображения изменений с вкладки «Стили» в CSS-файл
В следующем примере index.html открывается в Visual Studio Code, а расширение Microsoft Edge DevTools открыто. Мы выбираем значок flexbox в селекторе .searchbar CSS, а затем изменяем на flex-direction column .
Это изменение отображается на вкладке Edge DevTools и на вкладке Edge DevTools: Browser :
В результате редактирования CSS зеркало Visual Studio Code также автоматически переходит к правильному .css файлу и соответствующему номеру строки и вставляет flex-direction: column код CSS:
Включение редактирования css зеркало
Если у вас есть доступные для записи надежные исходные файлы и вы хотите, чтобы изменения CSS в средствах разработки автоматически изменялись в исходных файлах, установите флажок CSS зеркало редактирование. Этот параметр выбран по умолчанию.
Очистите поле CSS зеркало редактирования проверка, если вы только экспериментируете, и в адресной строке на вкладке Edge DevTools: Browser есть URL-адрес, а не путь к файлу, а исходные файлы отсутствуют локально через панель > действий Обозреватель> кнопкой Открыть папку, и не хотите получать сообщения об ошибках о сопоставлении и зеркало редактировании.
Чтобы включить или отключить редактирование css зеркало, выполните приведенные далее действия.
- На вкладке Edge DevTools на вкладке Элементы перейдите на вкладку Стили .
- Установите или снимите флажок css зеркало редактирования:
Или откройте меню команд, начните вводить слово зеркало, а затем выберите Инструменты Microsoft Edge: Переключить зеркало редактирование в|off для CSS-файлов в рабочей области: 
Поддержка исходной карты
Зеркальное отображение CSS также поддерживает такие абстракции, как Sass или CSS-in-JS, если вы настроили проект для создания исходных карт. У нас есть проблема отслеживания на GitHub и мы приветствуем любые отзывы о том, как это можно улучшить: редактирование зеркала CSS с помощью исходных карт: известные проблемы и отзывы.
См. также
- Начало работы с расширением DevTools для Visual Studio Code
- Расширение Средств разработки Microsoft Edge для Visual Studio Code
Начало работы с веб-разработкой с помощью 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
Настройка Visual Studio Code для JavaScript, HTML и CSS
Visual Studio Code – это кроссплатформенный редактор кода для разработки web проектов, выпущенный Microsoft под Windows, Linux и macOS. VS Code распространяется бесплатно, постоянно развивается, а функционал расширяется плагинами. Платформа особенно популярна среди Frontend разработчиков, но также используется и другими программистами. Среди основных возможностей стоит отметить: отладчик, работа с Git, подсветка синтаксиса, встроенный терминал и пакетный менеджер.
После установки Visual Studio Code, которая не должна вызвать никаких проблем, пользователь получает полноценную платформу для написания кода. Без дополнительных манипуляций здесь доступен Emmet, а функционал легко дополняется расширениями через Visual Studio Marketplace, доступный также через интерфейс редактора. В магазин можно попасть, кликнув на иконку Extensions расположенную в боковой панели или нажав сочетание клавиш Ctrl + Shift + X
Расширения для Frontend разработки
Emmet
Упрощает процесс написания кода, позволяя с помощью коротких команд формировать большие структуры кода. Плагин уже встроен в VS code, а полный список возможностей можно посмотреть на официальном сайте расширения. Короткий пример позволяющий проиллюстрировать работу Emmet: вам необходимо создать 20 элементов нумерованного списка, вы набираете ol>li*20 и нажимаете Tab или Enter – список из 20 элементов готов.
Live Server
Простое, но полезное расширение, позволяющее отслеживать на странице, без ее перезагрузки, изменения в JavaScript, HTML и CSS. Плагин не является полноценным сервером, но его функционал можно расширить в этом направлении с помощью других дополнений.
ESLint
Утилита для проверки стандарта написания кода на JavaScript. Дополнение относится к программам, называемые линтеры, которые проверяют код на правильность написания и соответствия современным практикам кодирования. После анализа ESLint выделяет ошибки и неточности, которые теперь легко увидеть и исправить.
Auto Rename Tag
Автоматически переименовывает парные теги HTML/XML – таким образом остается поменять только один из двух тегов закрывающий или открывающий.
Bracket Pair Colorizer 2
Расширение раскрашивает код, тем самым позволяя лучше разбираться во вложенности элементов. Код становится более понятным, а риск совершить ошибку уменьшается.
Path Autocomplete
Плагин подсказывает пути к файлам, показывая возможные варианты, что позволяет не искать папки вручную.
Prettier — Code formatter
Позволяет автоматически приводить код в порядок согласно внутренним правилам плагина и индивидуальным настройкам пользователя. Проще говоря – расставит пробелы и переносы, заменит одинарные кавычки на двойные или наоборот и так далее.
CSS Peek
Позволяет смотреть и редактировать стили прямо в html файле. Просто зажимаете Ctrl далее наводите на класс и кликаете. После этих манипуляций появляется всплывающее окно – соответствующий файл CSS, куда и можно вносить изменения.
Debugger for Chrome
Расширения для отладки JavaScript кода. Данный плагин позволяет работать в браузерах на базе Chromium, для Firefox придется установить Debugger for Firefox.
Настраиваем VS Code под себя
Для более комфортной работы над проектами редактор содержит массу пользовательских настроек от возможности увеличить или уменьшить шрифт до включения автоматического сохранения файлов. Попасть в панель можно двумя способами:
- File – Preferences – Settings;
- Ctrl + Shift + p – откроется поисковая строка где вначале вы увидите Preferences: Open User Settings
Рассмотрим некоторые полезные настройки
Auto Save – можно выбрать автоматическое сохранение, не сохранять автоматически, сохранять при смене или потере фокуса.
Font Size – размер шрифта в пикселях.
Line Height – высота строки.
Console: Font Size – размер шрифта для терминала.
Font Family – выбор шрифта.
Tab Size – можно задать количество пробелов в табуляции.
Open Files in New Window – позволяет настраивать создание файлов в новом окне или табе.
Word Wrap – управлением тем, как следует переносить строки – по ширине окна, не переносить и т.д.
Format On Paste – определяет, будет ли редактор автоматически форматировать вставленный код.
Minimap – включить или отключить миникарту.
Confirm Delete – убрать или оставить окно с подтверждением удаления файла.
Format On Save – настройка, отвечающая за автоматическое форматирование кода после сохранения файла. Модуль форматирования должен быть установлен отдельно, например, «Prettier — Code formatter», описанный выше.
Semi – включить / отключить автоматическое добавление ; в конце строи – настройка от «Prettier — Code formatter».
Это далеко не все настройки доступные в VS code и даже пробежаться по всем вскользь будет не так быстро. Для того, чтобы лучше ориентироваться во всем этом многообразии, можно воспользоваться левым меню, которое делит весь список на категории. Настройки чьи дефолтные значения были изменены можно увидеть в формате JSON кликнув на соответствующую иконку.
Горячие клавиши для быстрой работы
В VS Code сразу же после установки доступно большое количество горячих клавиш. Для того, чтобы открыть весь список необходимо нажать Ctrl + K Ctrl + S, также попасть сюда можно через File – Preferences – Keyboard Shortcuts. На этой странице можно не только найти нужную команду, но и поменять комбинацию горячей клавиши на более удобную.
Рассмотрим некоторые популярные хоткеи:
Ctrl + F (⌘ + F) – вызвать поиск
Ctrl + / (⌘/) – закомментировать одну или несколько строк
Shift + Alt + ↓ / ↑ ( ⇧⌥↓ / ⇧⌥↑) – дублирует строку на которой установлен курсор
Ctrl + Shift + \ (⇧⌘\) – перейти к парной скобке
F2 – дает возможность переименовать переменную во всем документе
Shift + Alt + F (⇧⌥F) – отформатировать документ – работает совместно с Prettier — Code formatter или другими подобными расширениями
F12 – перекинет к объявлению переменной даже если это в другом файле
Alt + Z (⌥Z) – включить / выключить перенос слов
Alt + ↑ / ↓ (⌥Option + ↑ / ↓) – меняет местами выделенный участок кода или строку с соседней строкой
Ctrl + D (⌘ + D) – множественной редактирование одинаковых структур кода, каждый раз нажимая команду вы присоединяете к редактированию еще одну похожую структуру
Сниппеты
Сниппеты в VS Code – это шаблоны кода, которые можно разворачивать в документе с помощью краткой команды. Принцип работы схож с выше упомянутым Emmet-ом, только здесь вы создаете заготовки самостоятельно. Функционал может быть не сильно востребованным у новичков, но в процессе повышения уровня сниппеты могут помочь ускорить разработку и сократить количество ошибок.
Для того, чтобы приступить к созданию сниппетов введите в командной панели (Ctrl + Shift + p) snippet и выберите из предложенного Configure User Snippets. После этого выберите язык программирования, в нашем случае ищем JavaScript или New Global (работает со всеми типами файлов). Далее откроется документ, который и будет хранилищем наших шаблонов. Здесь сразу же можно увидеть пример.
"Print to console":
«Print to console» – название сниппета
«prefix» – команда для активации шаблона
«body» – что будет выводиться
$1 – где будет курсор после создания сниппета
$2 – где будет курсор если нажать Tab
Если вы создадите глобальный файл, тогда еще будет «scope», где прописывается поддерживаемый язык для этого сниппета.
Напоследок
Мы рассказали про основные настройки Visual Studio Code для Frontend разработки, но в арсенале редактора еще много сюрпризов и решая различные задачи вы будете узнавать о нем все новое и новое.
Skypro — научим с нуля
Настройка VS Code для верстки
Сегодня мы рассмотрим установку и настройку Visual Studio Code для верстки. В результате мы получим удобную, лаконичную рабочую среду с необходимыми плагинами, которые я использую в своей работе. VS Code в настоящее время является самым популярным редактором кода благодаря широкому функционалу, кроссплатформенности, огромному сообществу разработчиков как самого редактора, так и расширений для него и открытой лицензии. Этот редактор я могу смело рекомендовать к использованию.
Поделиться Отправить Класснуть Запинить
Материалы урока и полезное
- Visual Studio Code: Страница редактора
- Simple Starter: Ознакомиться и скачать
- Урок по GitHub Gist: Ознакомиться с уроком
- Архив с настройками: Скачать
- Верстка с Emmet: Смотреть урок
Рекомендуемые расширения
- CSS Peek
- eCSStractor for VSCode
- Gist
- Sass
- HTML to CSS autocompletion
- IntelliSense for CSS class names in HTML
- Live Server или VSCode Browser Sync
- One Dark Pro
Пресет настроек settings.json
< "emmet.extensionsPath": [ "~/AppData/Roaming/Code/User/emmet" ], // "php.validate.executablePath": "D:/OSPanel/modules/php/PHP_8.1/php.exe", // "terminal.integrated.defaultProfile.windows": "Git Bash", // "terminal.integrated.defaultProfile.windows": "Ubuntu (WSL)", "workbench.startupEditor": "none", "editor.smoothScrolling": true, "editor.fontSize": 16, "editor.minimap.enabled": false, "breadcrumbs.enabled": false, "editor.renderControlCharacters": true, "editor.tabSize": 2, "workbench.activityBar.visible": false, "files.defaultLanguage": "html", "git.ignoreMissingGitWarning": true, "editor.detectIndentation": false, "editor.folding": false, "editor.glyphMargin": false, "editor.parameterHints.enabled": false, "editor.hover.enabled": false, "terminal.integrated.fontSize": 16, "editor.renderWhitespace": "boundary", "editor.lineHeight": 23, "security.workspace.trust.enabled": false, "editor.linkedEditing": true, "editor.bracketPairColorization.enabled": true, "editor.wordSeparators": "`~!@#$%^&*()=+[\\|;:'\",.<>/?", "emmet.triggerExpansionOnTab": true, "editor.insertSpaces": false, "git.openRepositoryInParentFolders": "never", "editor.cursorSmoothCaretAnimation": "on", "explorer.confirmDelete": false, "workbench.colorTheme": "One Dark Pro Darker", "ecsstractor_port.add_comment": false, "ecsstractor_port.empty_line_before_nested_selector": false, // "liveServer.settings.donotShowInfoMsg": true, // При использовании Live Server // "liveServer.settings.donotVerifyTags": true, // При использовании Live Server // "browserSync.config": < "notify": false, "files": "./" >// При использовании VSCode Browser Sync >