Visual Studio Code tab shortcut - visual-studio-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.

Related

How to auto indent code when opening the file in VS code?

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.

Text editor in VSCode

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

TinyMCE: promlem with editing text within complex template HTML

I'm using template plugin for inserting html snippets. For example:
<a class="button" href="#"><span class="button-inner"><span class="button-label">Button Text</span></span></a>
Everything goes fine until editor tries to change button's text and exit its html to add some more text after. The caret doesn't leave the A tag and stops within spans or before closing A tag. So in the end we get something like this:
...Button Text</span> some more </span> text here </a>
It breaks the layout completely.
Is there a way to mark the link as single solid block or spans as non-enterable with some attributes to prevent inserting text within unexpected places?
You use the contenteditable="false" attribute to make a portion of your HTML non-editable. Here is an example:
http://fiddle.tinymce.com/Zxgaab
I changed your link HTML to this:
<a contenteditable="false" class="button" href="#">
<span class="button-inner">
<span class="button-label">
Button Text
</span>
</span>
</a>
It will act like a single character in the editor...

Fancybox - Disable close on outside click

I'm trying to prevent close of fancybox when someone click outside of fancybox-content area.
HTML:
<div id="banner-message" style="display: none">
<p>Hello World</p>
</div>
JS:
jQuery.fancybox.open(jQuery('#banner-message'), {
clickOutside: false
});
DEMO:
https://jsfiddle.net/xjw4b5jq/
You have to use clickSlide option instead.
fancybox3 works as a slider and you can reposition/resize slider area, therefore there are two similar, but different options.
I have used this config to prevent closing the modal clicking outside.
<!--HTML-->
<a id="enlace" href="#modal">enlace</a>
<div id="modal">
<p>Hola cracks</p>
</div>
// script
$("#enlace").fancybox({
clickSlide: false,
clickOutside: false
});
hope it works for u too :)

Incorrect indent in vs code when I paste codes?

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.