Обновление 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
Подготовка проекта CSS и HTML с помощью Visual Studio Code
Эта серия мануалов покажет вам, как создать и настроить веб-сайт с помощью CSS, языка таблиц стилей, используемого для управления внешним видом сайтов. Вы можете выполнить все мануалы по порядку, чтобы создать тестовый веб-сайт и познакомиться с CSS, или вразброс использовать описанные здесь методы для оптимизации других проектов CSS.
При написании мы использовали Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux
Примечание: Найти все мануалы этой серии можно по тегу CSS-practice
Для работы с CSS вам нужно иметь базовые знания по HTML, стандартному языку разметки, который используется для отображения документов в браузере. Если ранее вы не работали с HTML, рекомендуем предварительно изучить первые десять руководств серии Создание веб-сайта с помощью HTML.
В этом мануале вы узнаете, как создать все папки и файлы, необходимые для сборки вашего тестового веб-сайта CSS.
С помощью редактора кода вы создадите каталог проекта, каталог и файл для кода CSS, файл для кода HTML и папку для изображений. В этой серии мануалов используется Visual Studio Code, редактор кода, свободно доступный для Mac, Windows или Linux, но вы можете использовать редактор кода, который вам нравится больше. Обратите внимание: если вы используете другой редактор, вам нужно будет откорректировать некоторые инструкции мануалов.
Создание файлов и папок HTML и CSS
Запустив текстовый редактор, откройте новую папку для нашего проекта и назовите ее css-practice. Мы будем использовать эту папку для хранения всех файлов и папок, созданных в ходе выполнения этой серии мануалов.
Чтобы создать новую папку проекта в редакторе Visual Studio Code, перейдите к пункту File в верхнем меню и выберите Add Folder to Workspace. В новом окне нажмите кнопку New Folder и создайте новую папку по имени css-practice.
Затем создайте новую папку внутри css-practice и назовите ее css. Внутри этой папки откройте новый файл и сохраните его как styles.css – это файл, который вы будете использовать для хранения правил стилей CSS. Если вы используете Visual Studio Code, вы можете создать новую папку, щелкнув правой кнопкой мыши (в Windows) или нажав CTRL+левая кнопка мыши (на Mac) в папке css-practice, затем выберите New File и создайте папку css. Затем кликните правой кнопкой мыши (в Windows) или нажмите CTRL+левая кнопка (в Mac) в папке css, выберите New File и создайте файл styles.css.
Сохраните файл и оставьте его открытым.
Вам также необходимо создать файл для добавления контента HTML – текста, изображений и HTML-элементов, которые будут отображаться в браузере. В каталоге проекта css-practice откройте еще один новый файл и сохраните его как index.html (так же, как вы создали файл styles.css ранее). Обязательно сохраните этот файл index.html в папке css-practice, а не в папке css.
Затем вам нужно добавить в файл index.html строку кода, которая скажет браузеру использовать файл styles.css в качестве таблицы стилей сайта. Для этого вам понадобится HTML-тег и ссылка на файл styles.css. Добавьте следующий фрагмент кода в свой HTML-документ:
Благодаря этому фрагменту кода браузер будет интерпретировать HTML-код в соответствии с таблицей стилей, расположенной в css/styles.css. На протяжении всей этой серии мануалов будьте внимательны, чтобы случайно не удалить эту строку при изменении кода в файле index.html. Сохраните файл index.html и оставьте его открытым.
Теперь создайте дополнительную папку внутри css-practice и назовите ее images. В этой папке вы сохраните все изображения, которые будете использовать при выполнении этой серии мануалов.
Теперь у вас должна быть папка проекта css-practice, содержащая папки и файлы, необходимые для нашего сайта CSS:
- Папка по имени css содержит файл styles.css.
- Пустая папка images.
- Файл index.html
Если вы используете Visual Studio Code, ваш редактор должен теперь отображать следующее дерево файлов:
Обратите внимание, что имена файлов включают расширения (.html и .css), которые указывают на тип их содержимого. В следующих мануалах этой серии мы добавим контент в эти файлы.
Отладка и устранение неполадок CSS и HTML
При работе с HTML и CSS важна точность. Даже лишний пробел или неправильно введенный символ могут помешать вашему коду работать должным образом.
Если ваш код HTML или CSS не отображается в браузере так, как вы ожидаете, убедитесь, что вы написали код в точности так, как показано в мануале. В целом мы рекомендуем вам вводить код в файлы вручную – так он лучше запоминается, но иногда полезно скопировать и вставить его, чтобы убедиться, что в не мнет ошибки.
Ошибки HTML и CSS могут быть вызваны несколькими причинами. Для начала проверьте свои правила разметки и CSS на наличие лишних или недостающих пробелов, неправильно записанных тегов, а также лишних знаков пунктуации или символов. Вам также следует убедиться, что вы случайно не поставили фигурные или книжные кавычки (“ или “), которые часто используются текстовыми редакторами. Фигурные кавычки предназначены для чтения текста человеком и вызовут ошибку в коде, поскольку они не распознаются браузерами как кавычки. Вводя кавычки прямо в редакторе кода, вы можете быть уверены, что используете правильный тип.
Каждый раз, когда вы вносите в код изменения, обязательно сохраняйте файл перед его перезагрузкой в браузере, чтобы проверить результаты.
Краткое примечание по автоматической поддержке HTML
Некоторые редакторы кода (к ним относится и Visual Studio Code который мы используем в этой серии) предоставляют автоматическую поддержку написания HTML. В Visual Studio Code эта поддержка подразумевает умные подсказки и автозавершение кода. Эта функция бывает полезной, но будьте с ней осторожны: если вы не привыкли работать с ней, вы можете сгенерировать дополнительный код, который вызовет ошибки. Если эти подсказки вас отвлекают, вы можете отключить их в настройках редактора кода.
Заключение
Теперь вы готовы приступить к разработке вашего тестового сайта. В следующем мануале мы покажем, как использовать правила CSS для управления стилем и макетом HTML-страниц.
Настройка 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 >
Как в Visual Studio Code в css файле подсвечивать классы из html файла?
Недавно решил пересесть с WebStorm на Visual Studio Code и столкнулся с такой проблемой:
в проекте есть html и ccs файлы, так вот при наборе текста стилей WebStorm предлагает классы, которые уже используются в проекте, т.е. не нужно наизусть все классы запоминать, а можно выбрать из перечня.
В Visual Studio Code такого нет. Может есть какой плагин, чтобы при написании стилей, VS Code мог предложить уже написанные классы из html файлов?
- Вопрос задан более двух лет назад
- 931 просмотр
2 комментария
Простой 2 комментария
Можете сказать почему решили с webstorm перейти на VSC? Интересно 🙂
TuMko @TuMko Автор вопроса
Решил попробовать новую IDE, которую многие используют. WebStorm дольше грузится, больше жрет ресурсов ПК, а у меня на одном из рабочих мест ПК не новый и не самый быстрый, из-за этого сталкивался с тормозами при работе. С Visual Studio Code тормозов нет, но как видите, функционал приходится допиливать дополнительными расширениями. В WebStorm по сути есть весь функционал, который мне необходим, особенно нравится, что если нужно создать какой-то файл, то можно сразу выбрать тип файла с расширением и уже готовой базовой разметкой (к примеру создание Vue компонента). А в VSC я прописываю имя файла, его расширение, а потом еще и базовую разметку с тегами template, script и базовый js.
Пока что вот мой первый взгляд на VSC, дальше будет видно. В целом же достойная IDE, пользоваться буду, главное, чтобы со временем дополнительные расширения в маркетплейсе их авторы не забросили или вообще не удалили.