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.
Related
It is possible in the setting or via a plugin the make a file (html, css or php) automatically add whitespace (auto-indentation) on opening? I know that I can alter the setting to automatically remove whitespace on save, but I think I will loss the visual when editing.
I saw #rioV8 was not clear where I want the whitespace be added. So basically before each line of code (just like when auto-indent when hit enter). But apply to a single line of code.
example:
<html><head>some code</head><body><div></div><div><div><div></div></div></div><div></div><div></div><div></div></body></html>
being converted to this when the file opens:
<html>
<head>some code</head>
<body>
<div></div>
<div>
<div>
<div></div>
</div>
</div>
<div></div>
<div></div>
<div></div>
</body>
</html>
NB: I’m using the latest stable build of VS code.
I have encountered difficulty when I use tab (<a>*4 and then tab) for multiple line of a tag or table tag, every time it gives me all <a> or <table> in horizontal line instead of vertical line:
<div class="signs">
</div>
which give me no problem with div tag:
<div class="sample">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
It is really annoying me every time, does anyone know how to fix this thing?
Use this in your settings.json:
"emmet.preferences": {
"output.inlineBreak": 1
}
See https://github.com/microsoft/vscode/issues/119088#issuecomment-811297787 why this is the preferred setting over syntaxProfiles.
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
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. =)
I am using Protractor, and trying to find the content of tooltips on the page. These tooltips are generated by Angular-UI, and fading in with moveMouse over them like below. Those tooltips are similar with ng-bind, but I cannot use binding to find them. Also, I tried to getAttribute of this tooltip, but it also didn't work for me, maybe cause protractor cannot detect this element name. Do you have any idea of how to read the content of those tooltips? Many thanks.
<div class="col-md-2">
<div class="form-group">
<label class="control-label" id="label_Merchant_Number" translate>merchant_NUM</label>
<input ng-model='searchCriteria.MERCHANT_NUMBER' tooltip="{{'merNumber_tooltip'|translate}}" class='form-control input-sm' type='text' id='MERCHANT_NUMBER' name='MERCHANT_NUMBER' maxlength='16' erng-validations>
</div>
</div>
we are using getAttribute('tooltip'), works how it should be ...
element(by.model('searchCriteria.MERCHANT_NUMBER')).getAttribute('tooltip');