Ecsstractor for vscode как настроить

Настройка eCSStractor for VSCode

В этой статье рассмотрим основные настройки плагина eCSStractor для VSCode и разберемся для как настроить плагин для своего стиля верстки.

1. Главная
2. HTML/CSS
3. Настройка eCSStractor for VSCode

1) Для начала откроем настройки плагина и обратим внимание что их достаточно много и eCSStractor можно настроить практически под любые нужды. Начнем разбор настроек с самой первой из них.

Эта настройка позволяет автоматически расставлять комментарии над скопированным классом CSS. Очень полезная настройка в случае, если мы верстаем по БЭМ и код без комментария выглядит вот так:

При копировании классов без комментариев возникает проблема при дальнейшем глобальном поиске нужного стиля. То есть при поиске .start__inner у нас не найдется ничего.

Смело отмечаем данную настройку и всегда сможем найти любой свой класс в любом множестве файлов SCSS.

2) Вторую настройку

оставим по умолчанию на значении class.

3) Эта настройка позволяет работать по БЭМ, легко копируя каскады БЭМ классов, с учетом их названий и модификаторов. Устанавливаем её в случае, если работаем по БЭМ.

4) Следующая настройка позволяет включать и отключать скобки. Если используете SASS или Stylus, то отключайте. Если же копируете классы в CSS или SCSS, то скобки нужны.

5) Следом небольшая настройка для визуального отображения кода:

Определяем вторую скобку с новой строки или же в той же строке, что и первая. Выглядит так:

6) Следующая настройка определит какие комментарии мы будем использовать. Например в SCSS комментарии будут отличаться от комментариев CSS:

7) Одной из основных настроек является пункт:

Тут мы вибиреам clipboard — для того, чтобы плагин копировал классы в буфер обмена. Проблему с копированием классов на Linux мы описали в нашей первой статье по eCSStractor.

8) Разделитеть для классов при верстке по БЭМ настраивается тут:

9) Следующая настройка позволяет оставить пустую строку после каждого класса и визуально разгружает код и структурирует его.

10) Табы или пробелы? А? Вот и определимся с этим в следующей настройке:

11) Те кто работает по БЭМ понимает важность следующей настройки — разделитель модификатора. По умолчанию это "—", но можно выставить абсолютно любой. Конечно же я не советовал бы этого делать и если БЭМ, то БЭМ до конца!

12. Ну и финальная настройка позволит нам выставить обозначение родительского класса. Советую оставить ее по умальчанию!

Быстрое копирование CSS классов из HTML разметки. Плагин eCSStractor для VS Code

HTML, CSS

Плагин eCSStractor для VS Code поможет быстро скопировать CSS классы из HTML разметки. Можно использовать горячие клавиши. Как настроить — рассказываю в этом видео.

Name already in use

eCSStractor-for-VSCode / README.md

• Go to file T
• Go to line L
• Copy path
• Copy permalink

• Open with Desktop
• View raw
• Copy raw contents Copy raw contents

Copy raw contents

Copy raw contents

eCSStractor for VSCode README

VSCode plugin for extracting class names from HTML and generate CSS stylesheet for following work.

Open any document contain HTML and do one of the following:

• Press Cmd+Shift+P on Mac OS X or Ctrl+Shift+P on Windows/Linux to launch command palette and choose:
  • eCSStractor Run
  • eCSStractor Run (With BEM Nesting)
  • eCSStractor Run (With BEM Nesting and comments)
  • eCSStractor Run (Without BEM Nesting)

  Then you will see new tab with CSS selectors extracted from document or copy them to the clipboard (depending on settings).

  Ecsstractor for vscode как настроить

  Настройка eCSStractor for VSCode

  1. Главная
  2. HTML/CSS
  3. Настройка eCSStractor for VSCode

  

  Настройка VS Code для верстки

  eCSStractor for VSCode README

  VSCode plugin for extracting class names from HTML and generate CSS stylesheet for following work.

  Usage

  Open any document contain HTML and do one of the following:

  • Press Cmd+Shift+P on Mac OS X or Ctrl+Shift+P on Windows/Linux to launch command palette and choose:
    • eCSStractor Run
    • eCSStractor Run (With BEM Nesting)
    • eCSStractor Run (With BEM Nesting and comments)
    • eCSStractor Run (Without BEM Nesting)

    Then you will see new tab with CSS selectors extracted from document or copy them to the clipboard (depending on settings).