May I ask you if it's possible to change the html formatting in VSC regarding the closure of the angle bracket of the start stag ?
currently my formatter produce:
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate
>
common.discardBtn
</button>
that's horrible
I would like this result:
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate>
common.discardBtn
</button>
How can I avoid the new line of the angle bracket ?
UPDATE
#ChrisR
I've already tried
"html.format.wrapAttributes": "force",
but it does not work
Are you sure this is Visual Studio Code and not an extension such as prettier? I found the same issue and a simple test to turn off prettier on an element would show if its the same issue.
<!-- prettier-ignore -->
<button
type="button"
class="btn btn-default"
(click)="activeModal.close()"
translate>
common.discardBtn
</button>
It looks like it was discussed, but possibly never fixed here:
https://github.com/prettier/prettier/issues/1825
I turned off prettier for html in my settings.json
"prettier.disableLanguages": ["html"]
The setting is :
"html.format.wrapAttributes": "force".
The reason why the angle bracket of the first tag is set to a new line is because when your code is versioned (with Git for example) and you add or remove attributes, less lines will be modified than with your preferred solution.
You'll find that the "horrible" format is pretty common in the developer world. =)
Related
my question on the picture. In VSCode i have simple problem, when i write some tags in HTML file i have blur selection in string beggining. I tried to get back default settings, but it couldn't help.
<div class="hh1">
</div>
<div class="hh2">
</div>
<div class="hh3">
</div>
As per the comment, uninstalling the indent-rainbow extension looks like it will remove this
I use VS Code with Prettier in Angular project (esbenp.prettier-vscode)
Is it possible to configure where closing bracket will be located? For example, this is how Prettier formats HTML file:
<textarea
class="textarea"
type="text"
contentEditable="true"
placeholder="Placeholder"
></textarea>
Instead I would like it to format like this:
<textarea
class="textarea"
type="text"
contentEditable="true"
placeholder="Placeholder">
</textarea>
Here are my original html codes:
<div class="container">
</div>
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
and I just want to move the three div.box to div.container, but when I paste directly, it will be like this, just the fist line has correct indent:
<div class="container">
<div class="box box-1"></div>
<div class="box box-2"></div>
<div class="box box-3"></div>
</div>
I followed the instruction to disable the aotoIndent in the settings, but didn't work, so how to handle it?
If you cannot set the editor.formatOnPaste to true. Then use the following key combination to manually format/ indent Alt+Shift+F
I know you said this didnt worked for you, but it did work for me and it may help others i think it worth mentioning:
This worked for me: Go to VS Code Settings -> from the User Settings tab -> Text Editor -> Formatting -> Untick the first option 'Format On Paste'
Since your settings aren't working as desired, one good way to handle this behavior is to highlight the text and press tab. This will increase indentation on all lines. You can repeat to get to your desired indentation level.
I'm trying to use datepicker from bootstrap (http://eternicode.github.io/bootstrap-datepicker/) and everything works fine except none of the glyphicons are showing up.
I saw that glyphicons are moved to another directory under bootstrap 3 (http://glyphicons.getbootstrap.com/) which is what I'm using, but I wasn't sure how I can integrate it.
Both
<input type="text" value="12-02-2012" date-date-format="yyyy-mm-dd" class="datepicker">
And
<div class="input-append date datepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
<input class="span2" size="16" type="text" value="12-02-2012" readonly/>
<span class="add-on"><i class="icon-th"></i></span>
</div>
Didn't work.
Anyone knows how I can integrate bootstrap 3 with the twitter datepicker?
Download the plugin's source code Javascript and CSS (or less) and replace old class references to new, see: http://www.bootply.com/bootstrap-3-migration-guide.
B.e. as mentioned by PilHA replace icon-* with glyphicon glyphicon-*, input-append with input-group etc.
Do the same for your HTML code. Or use a migrator/updater like: http://twitterbootstrapmigrator.w3masters.nl/, http://bootstrap3.kissr.com/ or http://code.divshot.com/bootstrap3_upgrader/
Install Glyphicons from http://glyphicons.getbootstrap.com/: download the files and copy over all the font files to a /fonts directory near your CSS. Include the compiled CSS file from the /css in the repository to your local css folder or download the Less file and compile it with your Bootstrap files.
update Glyphicons are back since RC2. Twitter's Bootstrap 3 includes 180 glyphs in font format from the Glyphicon Halflings set.
In addition to changing the class references, I found there to be some layout considerations disallowing a one-to-one swapping of certain classes, such as span2 on the input control. I ended up with the following:
<div class="form-group row">
<div class="col-xs-8">
<label class="control-label">My Label</label>
<div class="input-group date" id="dp3" data-date="12-02-2012" data-date-format="mm-dd-yyyy">
<input class="form-control" type="text" readonly="" value="12-02-2012">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
CSS changes in datepicker.css on lines 176-177:
.input-group.date .input-group-addon i,
.input-group.date .input-group-addon i {
Javascript change in datepicker-bootstrap.js on line 34:
this.component = this.element.is('.date') ? this.element.find('.input-group-addon') : false;
I also wrote up a blog post going into more detail here: http://kenyontechnology.com/2013/10/08/datepicker-for-bootstrap-with-twitter-bootstrap-3-0/
download bootstrap3 from here Download
Now unzip it and get font from font folder .
Copy this .ttf , .otf ,.svg and other file and paste # your project root
And You can download glyphoicon.css from here glypho.css
include this css file in index file
Thats done
I wasn't able to change my glyphicons initially and in the F12 dev tools I could see an error trying to load the "glyphicons-halflings-regular.woff2". I was able to fix it by downloading the .woff2 file and adding it to my fonts folder. Then I was able to change to what I wanted.
https://github.com/twbs/bootstrap/blob/master/fonts/glyphicons-halflings-regular.woff2
I'm using the Bootstrap-wysihtml5 jquery plugin (https://github.com/jhollingworth/bootstrap-wysihtml5/) to convert textareas to WYSIWYG. I would like to be able to activate and deactivate the editor by clicking on 2 buttons, so far i can show the editor, please will you let me know how i can deactivate the editor and leave just the textarea and its value. My code is as follows:-
HTML
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
<input type="button" id="button1" value="Show Editor">
<input type="button" id="button2" value="Hide Editor">
Script
$("#button1").click(function(){
$('textarea').wysihtml5();
});
$("#button2").click(function(){
// this is where i'm stuck
});
Thank you
A few lines of custom JS code. I think they can help you.
var content = $('#content');
var contentPar = content.parent()
contentPar.find('.wysihtml5-toolbar').remove()
contentPar.find('iframe').remove()
contentPar.find('input[name*="wysihtml5"]').remove()
content.show()
I had the same problem trying to disable/hide the toolbar and editor and had luck with the following commands (to disable the editor). I'm using version wysihtml5-0.3.0_rc2.js)
$('#editorId').data('wysihtml5').editor.composer.disable();
$('#editorId').data('wysihtml5').editor.composer.enable();
or (to hide the editor)
$('#editorId').data('wysihtml5').editor.composer.hide();
$('#editorId').data('wysihtml5').editor.composer.show();
To do the same to the toolbar you do the following to hide/show (can't find a wat to disable the toolbar):
$('#editorId').data('wysihtml5').editor.toolbar.hide();
$('#editorId').data('wysihtml5').editor.toolbar.show();