Giter Club home page Giter Club logo

ecsstractor-for-vscode's Introduction

eCSStractor for VSCode README

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

eCSStractor

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)
  • Right click and select eCSStractor Run

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

Plugin can process either selected text or whole file.

Settings

  • Brackets - Add brackets. Useful for Sass syntax and Stylus
  • Brackets newline after - Add new line
  • Destination - Where to put result ("tab" or "clipboard")
  • Bem nesting - BEM Nesting. Generate nested stylesheet for preprocessors
  • Indentation - Indent symbol
  • Element separator - Separator between block and element names
  • Modifier separator - Separator between block or element and they modifier
  • Parent symbol - Parent symbol. Ex.: &__element {}
  • Empty line before nested selector - Empty line before nested element/modifier
  • Add comment - Add comments to nested stylesheets for preprocessors
  • Comment style - Comment style. Either CSS (/* */) or SCSS (//)

Notes

ecsstractor-for-vscode's People

Contributors

yurasovm avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

ecsstractor-for-vscode's Issues

New page not created, just popup

When I click eCSStractor run, no new file is created, I just got popup which says: Copied CSS format to clipboard. If I open new file and paste, nothing happens. Please help.

VSCode v1.50.1 - Brackets Newline After doesn't work

There is no new line added after curly brackets between classes even though the setting is enabled.

On the other hand, the Empty Line Before Nested Selector for SCSS works well.

Hope you can take a look to fix the bug to have unified spacing for all. Thank you.

Not detecting className in React project

Hi! I'm trying to run eCSStractor in a React project, but I can't get any result in the process. Seems like the package aren't getting the classNames of the JSX code.

VS Code eCSStractor related settings:

"ecsstractor_port.attributes": "className",
"ecsstractor_port.destination": "tab"

JSX code:

<div className='global-info'>
    <p className='entity-name'>
            {entity.name}
          <span className='entity-name-separator'>•</span>
        <RefreshIcon style={{ marginRight: 8 }} />
    </p>
  <p>Saldo <span className='amount-number'>12</span></p>
</div>

Can anybody guess what I'm doing wrong? Thank you for your time and for this great package!

eCSStractor-for-VSCode на линукс

Добрый день . Поставил ваше расширение на vs code на линукс. При переносе классов с html в scss, пишет что классы скопированы в clipboard. Но на самом деле в буфере обмена ничего нет. Если в настройках ставить, чтобы классы при переносе открывались в новой вкладке, вкладка с классами открывается. В чем может быть проблема? Спасибо

className fixes

Здравствуйте, плагин не работает с jsx и classNames, есть PR с исправлениями, судя по датам, висит давно... Исправьте пожулуйста)

The same thing for pug-templates? | Реализация функциональности для pug-шаблонов

Hello!
Can you tell if it is possible to customize your plugin so that you can do the same thing, but for pug-templates? Maybe you already know ready-made libraries or solutions for this purpose, or any other information on this? Do I understand correctly that the main role in the process is played by the package "htmlparser2", which is naturally not suitable for the Pug? It turns out that you need to write your own parser for pug-templates, but the logic of the script itself remains the same, right? Thanks in advance.

Здравствуйте!
Можете подсказать, имеется ли возможность доработать Ваш плагин таким образом, чтобы можно было проделывать все тоже самое, но для pug-шаблонов ? Может Вам известны уже готовые библиотеки или решения для этих целей, или любая другая информация на этот счет ? Правильно ли я понимаю, что главную роль в процессе играет пакет "htmlparser2", который естественно не подходит для Pug ? Получается, что нужно писать свой собственный парсер для pug-шаблонов, но логика самого скрипта при этом остается неизменной, верно ? Заранее благодарен.

Classes are not copied when using className || Классы не копируются при использовании className

Classes are not copied when using className even if the corresponding setting is enabled, but a notification appears that the classes have been copied.

Классы не копируются при использовании className, даже если соответствующая настройка включена, но появляется уведомление о том, что классы скопированы.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.