eCSStractor - быстрое копирование CSS классов из HTML

Увеличить скорость верстки веб-страницы можно достаточно просто. Для этого необходимо скачать и настроить плагин eCSStractor для VSCode. Он позволяет скопировать все ваши классы и легко перенести их из HTML в CSS. Это позволит избежать ошибок и сохранить последовательность и вложенность классов.

HTML/CSS
1 ноября 2021 г. 15:53

При верстке сайтов мы давно используем eCSStractor - полезный плагин, ускоряющий разработку в разы. Зачем переписывать классы вручную, если за вас это может сделать плагин? 

 

Чтобы установить eCSStractor, нужно в поиске MARKETPLACE VSCode ввести название и выбрать нужный плагин. В нашем случае полное название плагина eCSStractor for VSCode, его и устанавливаем:

 

eCSStractor

 

В настройках плагина все достаточно просто. Самым главным пунктом является:

 

Ecsstractor_port: Destination

Where to put result

 

Здесь нужно выбрать clipboard, для копирования стилей в буфер обмена. Остальные настройки зависят от стиля верстки. Можно использовать БЭМ, можно оставлять комментарии к каждму классу и т.д. 

 

Во время верстки мы поступаем просто. Прописываем структуру блока и нажатием правой кнопки мыши вызываем меню: 

 

eCSStractor

 

Далее просто вставляем код из буфера обмена в ваш CSS или SCSS файл. 

 

.home {

    // .home__inner

    &__inner {
    }

    // .home__item

    &__item {
    }

    // .home__link

    &__link {
    }

    // .home__text

    &__text {
    }
}
.container {
}

 

С настройками, которые мы установили в eCSStractor, на выходе получили вот такой SCSS код, что упрощает верстку во много раз. 

 

Иногда случается что на Linux eCSStractor не может скопировать (не копирует) код в буфер обмена. Так как в плагине используется api редактора для копирования в буфер обмена, а в линукс 2 буфера обмена clipboard и primary. Решается этот вопрос достаточно просто:

 

sudo apt update
sudo apt install xclip

 

Верстайте быстро и качественно!

 

Егор Иваникций

Автор: Егор Иваникций

Теги:

Последние новости