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

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

Ecsstractor_port: Add_comment

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

.start {
    position: relative;
    width: 100%;
    margin: 0 auto;
    min-height: 600px;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;

    &__inner {
        position: relative;
        z-index: 2;
        width: fit-content;
        margin: 0 auto;
        text-align: center;
    }
}

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

.start {
   
    // .start__inner

    &__inner {
      
    }
}

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

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

Ecsstractor_port: Attributes
Attribute name "class" or "className" for jsx

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

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

Ecsstractor_port: Bem_nesting

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

Ecsstractor_port: Brackets

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

Ecsstractor_port: Brackets_newline_after

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

// Включено

.cart {

    // .cart__inner

    &__inner {
    }

    // .cart__title

    &__title {
    }

    // .cart__table

    &__table {
    }
}

// Выключено

.cart {

    // .cart__inner

    &__inner {}

    // .cart__title

    &__title {}

    // .cart__table

    &__table {}
}

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

Ecsstractor_port: Comment_style
Comment style. Either CSS (/* */) or SCSS (//)

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

Ecsstractor_port: Destination
Where to put result

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

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

 

Ecsstractor_port: Element_separator
Separator between block and element names

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

Ecsstractor_port: Empty_line_before_nested_selector

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

Ecsstractor_port: Indentation

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

Ecsstractor_port: Modifier_separator
Separator between block or element and they modifier

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

Ecsstractor_port: Parent_symbol
Parent symbol. Ex.: &__element {}

На этом все! Верстайте быстро, верстайте дерзко... Ну и БЭМ.