1tontech / bootstrap4-snippets Goto Github PK
View Code? Open in Web Editor NEWVisual studio extension & Intellij plugin for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
License: MIT License
Visual studio extension & Intellij plugin for Bootstrap 4, Font awesome 4, Font Awesome 5 Free & Pro snippets/live templates
License: MIT License
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>
I just want a code suggestion for b4, No code hints for font ICONS. Thanks for a great god
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?
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.
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
Hello,
is there any way to add missing snippets like toasts or spinners?
Thanks!
b4-button-block
Generate:
<button type="button" name="" id="" class="btn btn-primary" btn-lg btn-block"></button>
extra double quotes.
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.
@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!
Is it possible to change the default template with a specificated CDN URL?
this plugin is not working with the plugin
https://github.com/ronnidc/vscode-nunjucks
the snippet suggestions appear in .ts files and it is annoying
Do this have the flex utilities as shown in the bootstrap document? I can't find it in this plugin.
Hello,
How to set the default indentation of snippets tabs to 4 spaces in vscode?
Thanks
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.
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>"
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
Why you are using bootstrap 4.3.1? Update to the latest version please and quick.
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.
Hi. Bootstrap v4.2.1 has released. Could you update the plugin? Thanks
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?
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
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.
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/
b4-modal-*
Generate:
<h5 class="modal-title">Modal title/h5>
with the h5 tag unclosed, =).
Could you please help how to setup vscode to enable your base html snippets functionality in *.isml type files.
Thank you.
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
How to set the default indentation of snippets tabs to 4 spaces in vscode?
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.
Do not show hints, such as text-center
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>
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
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!
when i try b4-form-file-custom, it didn't show anyting on the screen, only the small text
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?
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.
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?
b4-figure-default is generated incorrectly.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.