Настройка 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 >
Писать код – это просто
| HTML | CSS & SASS/SCSS | Git | Расширения от Google | CSS-генератор | FTP | Bonus |
О чём тут?
В этом репозитории я собрал коллекцию расширений, инструкций и просто приятных бонусв, которыми пользуюсь в своей повседневной работе сам и, если вы уж зашли сюда, то может они заинтересуют и вас.
Шпаргалка для работы и написания кода:
Редактор исходного кода:
- Скачать редактор Visual Studio Code
- Всё о “горячих” клавишах здесь
Полезные плагины “от мала до велика”:
HTML:
- Live Server
- Запускайте локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц. (Внимание, нужна дополнительная настройка плагина в settings.json под себя)
- Заполнение атрибутов HTML id и class .
- Поддерживает связанные и встроенные таблицы стилей.
- Поддерживает наследование шаблонов.
- Поддержка дополнительных таблиц стилей.
- Поддерживает другие HTML-подобные языки.
- Валидирует селекторы CSS по требованию.
- Расширение Visual Studio Code, которое обеспечивает заполнение имени класса CSS class для атрибута класса HTML на основе определений, найденных в вашем рабочем пространстве или внешних файлах, на которые ссылается элемент ссылки.
CSS & SASS/SCSS
- Плагин VSCode для извлечения имен классов из HTML и генерации таблицы стилей CSS для последующей работы.
- Позволяет перейти к определению из HTML в CSS / Sass / Less, обеспечивает завершение строки и символы рабочей области для имени класса class и id , а также поддерживает поиск ссылок из CSS в HTML по клику на них
- для Win: Ctrl + left-click
- для Mac: Cmd + left-click
- Позволяет подсматривать строки в СSS id и class в качестве определений из html-файлов в соответствующие CSS. Позволяет подсматривать и переходить к определению.
Расширения Git для среды разработки
- Просмотр и поиск журнала git вместе с графиком и деталями
- Просмотр предыдущей копии файла
- Просмотр и поиск в истории
- Различные сравнения (ветки, версии, файлы…)
- Другие функции расширения
- Просмотр Git-графика вашего репозитория и легкое выполнение Git-действий прямо внутри графического интерфейса. Настраивается так, как вам удобно!
Расширения от Google
- Это расширение позволяет просматривать список шрифтов Google Fonts и вставлять в код HTML или CSS @import url(…)
- для Mac: Shift+Cmd+P Пользуйтесь шрифтами от Google легко
Дополнительные полезные плюшки
CSS генератор веб-кода
Работа с FTP-сервером
- FTP-Simple
- Прямое открытие, редактирование и сохранение файлов на сервере.
- Сохранение локально созданных файлов или каталогов на сервере (опция загрузки и резервного копирования)
- Загрузка файла или каталога с ftp-сервера.
- Создание каталога на удаленном сервере напрямую.
- Открытие удаленного каталога в рабочей области (бета-версия)
- Удаление каталога (рекурсивно) и файлов непосредственно с сервера.
- Переименование имени файла на FTP-сервере.
- Сравнение файлов локального файлового сервера.
Bonus на десерт
Собрано, протестировано, и упаковано в одну шпаргалку
by SolidadosWeb © 2020
Все совпадения случайны и на любителя
This site is open source. Improve this page.
Объясните как установить плагин для VS code «eCSStractor»?
Простите за посторонний ресурс, это не реклама, этот человек итак очень популярен в сфере обучения верстки. У меня вопрос, он здесь (https://youtu.be/HihYQVuH64U?t=711) копирует кусок html-кода и вставляет в препроцессор scss, и он дает ссылку на плагин который позволяет так удобно копировать, но как мне такой плагин установить в visual code? Помогите.
- Вопрос задан более трёх лет назад
- 3387 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 2
1. Включает наследование по БЭМ.
2. Добавлять скобки.
3. Не добавлять пустую строку после каждого тэга.
4. Стиль коментов.
5. открыть в новом окне выдернутые тэги или в буфер скопировать.
6. Вид разделителя.
7. Добавлять или нет пустую строку после тэга.Ответ написан более двух лет назад
Комментировать
Нравится 2 Комментировать
Открываешь вс код, заходишь в плагины, вставляешь в поиск eCSStractor .
Сложно, понимаю, но куда деваться? Я целых 16 секунд на это потратил. Да, я считал.Ответ написан более трёх лет назад
ErikHoffen @ErikHoffen Автор вопроса
Так там особые настройки под БЭМ нада. Альекак установить плагин для VS code «eCSStractor»?
Открываешь вс код, заходишь в плагины, вставляешь в поиск eCSStractor.
ErikHoffen, смешно. Ты не знаешь базовых вещей вскода, я тебе кидаю инфу, а ты меня посылаешь.
Ну что же, уверен, ты сам справишься. Хотя. Ты даже базовый навык поиска не осилил.Проблема со вставкой классов в eCSStractor для VS code
В плагине используется api редактора для копирования в буфер обмена. В линукс 2 буфера обмена clipboard и primary.
находил совет установить xclip. В терминале выполните:
sudo apt update
sudo apt install xclipУ меня на Ubuntu 20.10 помогло.
Отслеживать
51.6k 201 201 золотой знак 63 63 серебряных знака 245 245 бронзовых знаков
ответ дан 20 июн 2021 в 11:54
Владимир Ставинчук Владимир Ставинчук
21 3 3 бронзовых знакау меня также было, в настройках смотри, я вот так поменяла и заработало
Отслеживать
ответ дан 3 фев 2021 в 9:26
1 1 1 бронзовый знакК сожалению мне не помогло) максимум что, работает вариант если в Destination указать не clipboard, который по умолчанию, а Tab, но в этом случае информация копируется и открывается в новом окне, с которого нужно еще раз копировать:).
3 фев 2021 в 9:45
Нужно задать класс
Отслеживать
68k 218 218 золотых знаков 79 79 серебряных знаков 221 221 бронзовый знак
ответ дан 27 сен 2021 в 10:13В текущем виде ваш ответ непонятен. Пожалуйста, нажмите править под сообщением, чтобы добавить больше подробностей, которые помогут другим понять, как он отвечает на заданный вопрос. Вы можете найти больше информации о том, как писать хорошие ответы в справке.
27 сен 2021 в 10:25
eCSStractor, к сожалению, не идеален. Умеет определять структуру только по атрибутам классов. Например, такая структура не сработает:
А если добавить каждому тэгу класс, то сработает:
Результат будет следующий:
.header < >.nav
Это крайне неправильно — задавать классы блокам, чья семантическая нагрузка и так достаточно ясна, а css могут быть заданы по названию тега. Поэтому в таких случаях расширение eCSStractor больше вредно, чем полезно.