How to set the default indentation of snippets tabs to 4 spaces in vscode?

Can you update the bootstrap css link as well as the bootstrap javascript and jquery links with the lates bootstrap 4 version when writing the "b4-$" snippet for creating the HTML Bootstrap 4 main template?

the snippet suggestions appear in .ts files and it is annoying

The original checkbox and radio code
checkbox

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

radio

<div class="custom-control custom-radio">
  <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input">
  <label class="custom-control-label" for="customRadio1">Toggle this custom radio</label>
</div>

and it generated
checkbox

<label class="custom-control custom-checkbox">
    <input type="checkbox" name="" id="" value="checkedValue" class="custom-control-input">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description"></span>
</label>

radio

<label class="custom-control custom-radio">
     <input type="radio" name="" id="" value="checkedValue" class="custom-control-input">
     <span class="custom-control-indicator"></span>
     <span class="custom-control-description"></span>
</label>

Tab is broken in PHP file when I installed bootstrap4-snippets. I try to disable the plugin, and tab is back. Enabling the plugin again, tab is broken. I am pretty sure tab is broke by the plugin.

You can see someone mention here.
https://stackoverflow.com/questions/24726571/tab-and-enter-key-do-not-work-anymore-in-the-webstorm-editor-while-typing

It seems that the bug exists for a long time since it's still bootstrap3-snippets.

Hi. Bootstrap v4.2.1 has released. Could you update the plugin? Thanks

I just want a code suggestion for b4, No code hints for font ICONS. Thanks for a great god

I've had to disable the extension as it causes me a lot of problems when editing plain text files. Any way to add an option to turn suggestions off based on file type instead of just every file? I'll look at doing a PR for it.

I've noticed that you tried your best to make indentation level at 4 spaces, though there is some places missing this concept. Plus, after this PR of mine, I've realized that I didn't follow this convention.

Said that, I'll be making a PR to fix both our mistakes. Is that OK, with you?

Do this have the flex utilities as shown in the bootstrap document? I can't find it in this plugin.

this plugin is not working with the plugin
https://github.com/ronnidc/vscode-nunjucks

@banggua has published this extension in the Open VSX Registry.

The service was recently transferred to the Eclipse Foundation and we want to ensure a seamless transition for our users. To ensure uninterrupted service and more exposure for your extension, I recommend the following.

To the maintainers: If you would like to take over publishing to open-vsx.org, here’s how: https://github.com/eclipse/openvsx/wiki/Publishing-Extensions

To the current publisher: Please sign the Eclipse Publisher Agreement. The signing process is explained in the Wiki (steps 1 and 2).

Claiming ownership of the namespace for your extension(s). To find out how to do this, see:
https://github.com/eclipse/openvsx/wiki/Namespace-Access
As owner you can add more namespace members (including service accounts) yourself in https://open-vsx.org/user-settings/namespaces. Note that publishing can be done by any contributor to the extension, namely those you add as namespace members once they have signed the Publisher Agreement as well.

Please also note that a license is now mandatory for publishing your extension to Open VSX. If your project doesn't have any license, please add one, preferably an open source license such as MIT. The publishing tool ovsx offers to automatically add the MIT license when you try to publish without a license.

Useful links:
Eclipse Publisher Agreement
Eclipse Foundation Open VSX Registry Frequently Asked Questions (FAQ)

More details are in these recent blog posts:
https://blogs.eclipse.org/post/brian-king/open-vsx-registry-under-new-management
https://blogs.eclipse.org/post/brian-king/new-era-open-vsx-registry

Today, there’s growing momentum around open source tools and technologies that support Visual Studio (VS) Code extensions. Leading global organizations are adopting these tools and technologies. This momentum has spurred demand for a marketplace without restrictions and limitations. We hope you join us on this journey as we continue to build the Open VSX community.
We look forward to continued innovation from you in 2021!

Using vscode

Currently bs4 snippets is show in quick suggestion list on javascript files.

Is there a way to disable bs4 snippets in javascript files?

Hi,

I do have a small question: Would it be possible to activate this extension on a file that is not an html file?
(I would be interested in activiating this on .ps1 files).

Cheers

Hello,
is there any way to add missing snippets like toasts or spinners?

Thanks!

using PyCharm latest,
fa5- autocomplete works for icons, however, your options for first class don't work with the latest version of FA.
Your script offers 'fab' and 'fas', when it should be 'fas' and 'far'

thanks!

Could you please help how to setup vscode to enable your base html snippets functionality in *.isml type files.

Thank you.

I love the extension for VSCode, though I gotta say I lose quite some time indenting generated code.

As Bootstrap tend to require lots of classes and others attributes, the code becomes a mess, easily. That's why I want to ask for your permission so I can PR a set of indented snippets.

Things like b4-navbar-background:

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#collapsibleNavId" aria-controls="collapsibleNavId"
        aria-expanded="false" aria-label="Toggle navigation"></button>
    <div class="collapse navbar-collapse" id="collapsibleNavId">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="dropdownId" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
                <div class="dropdown-menu" aria-labelledby="dropdownId">
                    <a class="dropdown-item" href="#">Action 1</a>
                    <a class="dropdown-item" href="#">Action 2</a>
                </div>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

Would become redable snippets like that:

<nav class="navbar navbar-expand-sm navbar-dark bg-primary">
    <a class="navbar-brand" href="#">Navbar</a>

    <button class="navbar-toggler d-lg-none" 
            type="button" 
            data-toggle="collapse" 
            data-target="#collapsibleNavId" 
            aria-controls="collapsibleNavId"
            aria-expanded="false" 
            aria-label="Toggle navigation"></button>

    <div class="collapse navbar-collapse" id="collapsibleNavId">
        <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
          
            <li class="nav-item active">
                <a class="nav-link" href="#">
                  Home <span class="sr-only">(current)</span>
                </a>
            </li>

            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" 
                    href="#" 
                    id="dropdownId" 
                    data-toggle="dropdown" 
                    aria-haspopup="true" 
                    aria-expanded="false">Dropdown</a>

                <div class="dropdown-menu" aria-labelledby="dropdownId">
                    <a class="dropdown-item" href="#">Action 1</a>

                    <a class="dropdown-item" href="#">Action 2</a>
                </div>
            </li>
        </ul>

        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search">

            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
    </div>
</nav>

A nice addition to this plugin would be adding a preview of Font Awesome on the tooltip.

I'm referring to something similar to what this https://github.com/Janne252/vscode-fontawesome-auto-complete already does.

Hi everyone!

I want to request if it's possible to add classes suggestions for emmet abbreviations.
For example:

navbar.navbar.navbar-expand-lg

then press tab to insert the element navbar with navbar.navbar-expand-lg classes

Best regards!

Hello,
How to set the default indentation of snippets tabs to 4 spaces in vscode?
Thanks

b4-figure-default is generated incorrectly.

When this is installed, intellisense matches snippet tags in reverse. For example, typing "2" anywhere in a php/html file will result in a lookup that matches any of the font awesome snippets such as fa5p-signal-2, fa5p-signal-alt-2. I don't know if this is your code or vscode, but I've yet to see any other extension behave this way for snippets or code completion. This makes typing numbers generate the tool tips every time for no reason. It should only activate when the beginning part of the tag is typed as described. Ex. fa5p-*

Unfortunately, I'd installed this extension as an included pack from "Front-End Professional", so I have to uninstall that entire suite to disable this annoyance.

Hello! Great job with this extension, the last version for Boostrap is 4.5, and the version of the cdn links are 4.3, maybe you should update this! greetings!! \w/

When using snippet the button generates like this
<button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block"></button>
it closes quotation marks before btn-lg and btn-block

Hi

I've installed b4- snippets in my vscode, but they work only in .html / .php files

Is there any way to force them to show/suggest on .js (React) files ?

I've read the package.json and it states the following

{ "language": "javascriptreact", "path": "./snippets.json" }, { "language": "javascript", "path": "./snippets.json" },

so I guess they should show there too, right ?

Any clues? thanks

when i try b4-form-file-custom, it didn't show anyting on the screen, only the small text

In Gulp I'd run some command like gulp serve for running a live reloading server, in web development.

Is there any way to check If my modifications are working properly, on this project?

PS: I've noticed that Gradle is the thing to do it, though I can't figure out how to install and use it to achive what I want.

Is it possible to change the default template with a specificated CDN URL?

Hey,
autocompletion for fa5-google-play gives <i class="fas fa-google-play "></i> back, but it have to be
"<i class="fab fa-google-play "></i>"

Unfortunately the extension is overwriting the setting to show Emmet's snippets always on top ("editor.snippetSuggestions": "top"). Also my other Emmet/editor specific settings are correct. It even overwrites "editor.suggest.localityBonus": true, which prioritizes my recently used choices.

I could not find a way, to force your snippets to show up below Emmet's.
It seems a bit connected to issue #18, too aggressive suggestions. A solution for issue #28 (propose font-awesome only when starting with fa) would be a great improvement too.

By starting with cl, I would, of course, like to auto-complete to class="". Instead, there are ~50 font-awesome suggestions before.

It even overwrites "editor.suggest.localityBonus": true, which prioritizes my recently used choices.

Thank you for your nice extension!
I hope this can be solved,

Chris

the official website bootstrap is 4.5 but the snippet is still 4.3, how can I change the CDN in the snippet? or @thekalinga, can you update the extension, please?

Why you are using bootstrap 4.3.1? Update to the latest version please and quick.

Ever since the upgrade, I've not been able to get the snippets to expand in any project that uses .php or blade.php files. It specifically only works with .html now. Is there a way to fix this? I'm not going to change file types just to use the plugin.

The tool is wonderful. But from documentation perspective being a beginner, it would be better if there would be an image how it looks for a particular template. I know its a huge list, but at least some graphical representations

b4-modal-*

Generate:

<h5 class="modal-title">Modal title/h5>

with the h5 tag unclosed, =).

Do not show hints, such as text-center

b4-button-block Generate:

<button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block"></button>

extra double quotes.

I noticed when creating a range input there is no intellisense for auto-generation. The workaround is to pick b4-form-input-text and make the necessary adjustments. I'll see if I can make a PR.