BEM Helper Version

0.7.0

Steps to reproduce

First I create a new file: index.html

...
  <div class="nav-bar" :class="{'is-hidden':isHidden}">
    //
  </div>
...

Then I press alt + b e to insert element.

What is Expected?

...
  <div class="nav-bar" :class="{'is-hidden':isHidden}">
    <div class="nav-bar__"></div>
  </div>
...

What is actually happening?

...
  <div class="nav-bar" :class="{'is-hidden':isHidden}">
    <div class="{__"></div>
  </div>
...

details

I rolled back to version 0.6.6 or changed the code like this and it works fine.

...
  <div :class="{'is-hidden':hidden}" class="nav-bar">
    //
  </div>
...

Thank you for making such a great plugin!

Any chance you could add a setting that would allow for generating a style sheet in Top to Bottom order instead of alphabetical?

If i have something like this:

The plugin detect "sectionKey" not correct. But that is not the classname itself. Is a twig variable..

Is there a way to fix the issue?

When naming the modifier of an element as follows: block__element_modifier_modifier-value, the extension says the name is wrong and prompts me to rename it like this: block__element-modifier-modifier-value (it "thinks" the modifier is name of an element).
Example:

<div class="links">
        <a class="links__projects links__projects_indent_right">Projects</a>
</div>

After this is written, the projects_indent_right gets highlighted as incorrect part and popup says this should be named as projects-indent-right which is incorrect modifier naming as said here

There are projects which use a mixture of classNameCases, for example, the component's classname as PascalCase and the rest as kebab-case (see the scss style guide of the open source project "thenewboston").

This means, if I choose one classname case in the bemHelper options, that the linting shows me every class as a problem. If I use "any", it gives me no advise at all. Therefor, I would like to use a list which lets me choose which styles I want to use:

Instead of this:

  // The allowed case styling of class names.
  //  ...
  "bemHelper.classNameCase": "kebab",

I want this:

  "bemHelper.classNameCase": ["pascal", "kebab"],

or even a differentiation like this:

  "bemHelper.blockClassNameCase": "pascal",
  "bemHelper.elementClassNameCase": "kebab",
  "bemHelper.modifierClassNameCase": "kebab",

I suppose that not all combinations make sense. So it may also be okay, to use a predefined set of triples.

What do you think about this? 🙂

Hello Box-Of-Hats :)

Thanks for your work. I wonder if it's possible to add Twig language support for this extension ?

Thanks

Hi, I'm reaching out to let you know that we are fixing a bug with the workspaceContains VS Code extension activationEvent that could change the activation behavior for your extension.

Here's the issue: This event is supposed to start a search in the user's workspace with the given glob pattern, and activate the extension if it finds a match. A pattern like *.txt should find a file in the root of the workspace matching *.txt, but it should not search the entire workspace. A pattern like **/*.txt should recursively search the entire workspace. We discovered that VS Code is incorrectly applying the ** pattern to every workspaceContains pattern that includes a *.

Since this may impact the startup performance of VS Code, we need to scope these searches correctly. Once we fix this, a pattern like *.txt will only match a .txt file in the root of the workspace.

The change will be in VS Code Insiders in early January. It will be released with 1.53 in early February. Please see microsoft/vscode#110510 for more details and let me know if you have any questions.

add language support for Astro (html in .astro files)

I have a block called 'header'. It has an element inside called 'main-logo'. The 'main-logo' has couple of child elements. So, for each of the child element, I need to manually type the element name 'main-logo' over and over again. So let me know is there any shortcut to avoid this repeating manual typing of 'main-logo' in each child element under 'main-logo' element. The code is as follows.

Bem Helper Shortcut Code:
.header>.-main-logo>.-main-logo-container>.-main-logo-link>.-main-logo-image|bem

Result:

		<div class="header__main-logo">
			<div class="header__main-logo-container">
				<div class="header__main-logo-link">
					<div class="header__main-logo-image"></div>
				</div>
			</div>
		</div>
	</div>```

Sometimes I encouter the case when I already have an element but there is no class attribute on it - I think that's would be greate if I could generate a class name and then paste it.

Possibly misbehavior. When you Insert Element and then press TAB the 2nd time, it takes you to the attribute place, however, it takes it to both opening and closing tags (see: https://s.zeshanahmed.com/a_234B8580.png). I think it was meant to take only to the opening tag?

Hello!

Thank you for application.

I have a question.
How can i use hot-keys on mac?

When i push option+b e - vscode say me its not correct.

Hey! I have been enjoying this plugin a lot. Thanks a lot for putting so much effort in it! 💯

I have encountered one strange issue where the BEM diagnostics reports incorrectly when used in PHP file (see: https://s.zeshanahmed.com/a_2341ECB8.png).

It even gives false warnings in a pure PHP code: https://s.zeshanahmed.com/a_2341ED9D.png

Can you check what could be wrong and why it's giving such false warnings?

Thanks a lot,
Zeshan

Hello, thank you for your excellent contribution.

I have a possible improvement proposal: Generate the classes in order of appearance in the HTML.

Currently it generates the classes but out of order, which in my opinion is better to read them in the order of appearance in the HTML, since it helps to have the file better organized. Currently what I do is order them manually. I attach a small example of what I am talking about.

Thanks for everything.

I was wondering if it would be possible to add a setting to have custom element and modifier separators. Our templating engine doesn't respond well to having -- inside an HTML comment. When we go about commenting entire blocks of code with the normal BEM separators, we end up with errors. To make life easier for ourselves, we separate modifiers with a different separator. I wouldn't mind making my own PR if you don't have the time.

example:

expectation:

//I hope this is the view tag

It will be great if the stylesheet would update with new blocks/elements when you add them to HTML

Hi, this is great extension!)

I have only two limitations when using it.

First - there is no support for React (JS) files. It creates elements with "class" instead of "className".

Secondly - there is no option to change double quotes to single for classNames. (Motivation - different companies have their own style guides)

The extension is currently failing to activate when using version 1.1.2.

Temporary fix: Install version 1.1.1 instead

Please add Svelte language support.

Svelte Homepage

Sorry if you thought it was a problem, but didn't know where to put this question. Its complement is very good, but there are times when I want to generate my code in parts and generating a new file at all times becomes tiring. Thank you so much for everything.

it would be very nice for this extension to work with jsx (React) because everyone is using only new frameworks and would become more popular if it supports jsx (I do not think it's a big problem adding support for that)

Thanks for plugin.
Version: 0.7.5

My settings of plugin looks like

{ "editor.largeFileOptimizations": false, "explorer.confirmDragAndDrop": false, "editor.minimap.enabled": true, "window.zoomLevel": 0, "explorer.confirmDelete": false, "terminal.integrated.shell.windows": "D:\\Program Files\\Git\\git-bash.exe", "terminal.external.windowsExec": "D:\\Program Files\\Git\\git-bash.exe", "git.enableSmartCommit": true, "git.confirmSync": false, **"bemHelper.modifierSeparator": "_"** }

and extansion setting looks like
.

By default BEM metodology uses _ as .modifierSepararor link. But if I configure the plugin as above, it does not work correctly, and emphasizes classes with modifier because it considers ` _ ' as part of the class name.

Hi, in BEM methodology, it is permissible to set _modifiers with an additional _key-value. For example:

block-name__element-name_modifier-name_modifier-value

Read more

Unfortunately, now the extantion handles such classes as an error. Although _ is set as the modifier separator, it is suggested to use kebab case instead of _ when using _key-value.

It would be super cool if you added a rule to the plugin settings to separate modifiers and modifier values, according to the BEM naming convention. And also improved handling of key-value modifiers.

Thanks a lot.

👋 Hey. VS Code Team here.

This extension appeared as causing slow-downs of the extension host and thereby also other extensions. See microsoft/vscode#155520 (comment) for the related discussion on our end.

I took a quick glance and I believe this is due to "responsiveLinting" - it is too eager as it validates documents as you type without any kind of debouncing. See https://github.dev/Box-Of-Hats/Bem-VSCode-Extension/blob/4918250dbfc60a37e33ddb6f3f0bfd047bad737f/src/extension.ts#L72. Doing an expensive operation on such a high frequency event is discouraged and validation should be debounced/delayed by something like 500ms

I have disabled everything and returned to factory settings but this extension still generated the stylesheet in one line.

I created a VSCode extension for this before I saw your extension (which is much more comprehensive). I thought it would be nice to have this functionality as well... See Sass BEM Gen!

Is there support for html like templating like twig, smarty, handlebars ...

Hey,

Thank you for developing this extension.

I have a question - is there a way to modify the output of generated SCSS? I'd like to add to it some extra default lines that I'm using frequently.

Cheers,
Furai

I am wondering if it would be possible to add slim-lang support?

http://slim-lang.com/

How it working on mac os? What kind of keyboard shortcats can i use on mac?

When you insert the element and press tab, it takes you to the tags placeholder (see: https://s.zeshanahmed.com/a_234B8430.png), then you manually have to select both div tags to overwrite them.

I think it's much better UX if it by defaults select both div tags which you can directly overwrite without having to select them first.

Hope I explained it fine.

Thanks!

when I set "bemHelper.modifierSeparator" to "_", autofix and generateStylesheet can't work properly. Is there any restrictions?

Hey. Version 0.8.0 brought with it the insertion of a new line after the element.
Can I disable this feature?

Hello, thank you for your contribution to the community.

I want to propose the addition of a characteristic: allow to specify in the configuration which classes should be completely omitted.

For example, sometimes some css classes are used from frameworks like Bootstrap that you want to skip completely, in any case it can be removed manually, but it can take your time in a large project, with many components.

Thanks for everything.

Hey mate,

Here's the issue: https://s.zeshanahmed.com/a2_234B5E2B.png

So if you use PHP code like <?php it will still consider it as a simple string. I hardly think that anyone would use special characters as class names so I think it's nice idea to exclude < > % { } &... from the testing regex.

Here's another screenshot: https://s.zeshanahmed.com/a_234B5DEF.png

Thanks,
Zeshan

example：

<view class="list">
  <div class="list__"></div>  //Use alt + b e shortcut generated here
 </view>

Expectation：

<view class="list">
  <view  class="list__"></view >  //This is the result I expected
 </view>

Hi

We only ever use .scss and 'Copy to Clipboard'.

If it were possible to specify these defaults in the settings, then it would cut down on having to select these every time.

Use this feature all the time!

Thanks

I would really appreciate if I could generate CSS selectors from just current selection in HTML file as in opposite to generating CSS selectors for whole HTML file.
I find myself building stuff gradually and I often add new BEM components to existing HTML files. Extracting only newly added selectors / components from generated stylesheet is little inconvenient. But still 100x more convenient then writing them "manually" like I did before 👍