The auto completion is pretty much default right now. If I type
<p{tab}
I get
<p></p>
Is it possible to configure it so that instead I end up with
<p>
</p>
This is just an example. I'd like it to be more comprehensive beyond just the <p></p> tags.
It seems I've been doing it wrong. I've been looking at what happens only when I tab-complete a tag as in my example. It did not occur to me that simply pressing enter after the auto completion that it would actually set me up the way I would like and even better than I was asking for.
After pressing enter I end up with
<p>
_
</p>
with the cursor (represented by the _) indented two spaces on the blank line.
Related
If I have a bit of HTML, XML, or JSX formatted like this:
<p class="foo">
<b class="bar">
some text
</b>
<p>
I would like to be able to make a selection from <p> to </p>, run a command (ideally via an assigned keyboard shortcut), and have VSCode convert it to this:
<p class="foo"><b class="bar">some text</b><p>
As context, I sometimes need to process a fair amount of marked up text in a variety of file formats, and it's very tedious to manually do this kind of formatting (or unformatting). I know you can do it with a regex find and replace in selection, but that's inconvenient because (1) there doesn't seem to be an easy way to save a set of find/replace settings as a macro and then assign them to a keyboard shortcut, and (2) VSCode's handling of the "in selection" part of find/replace all confuses me every time I use it.
I used to do this in my previous editors (e.g. BBEdit, TextMate, Sublime), but I'm hitting a wall with VSCode. The best I can find is minify/uglify extensions that work on entire files. And tons of basic tips about toggling word wrap, automatically removing trailing whitespace, etc.
My PHP generates a Word document, but it will not render carriage returns. My CKEditor translates a carriage return into either,
<br>, or <div>asdf</div>
When the Word document is created, it will display those HTML tags, so I strip them out. What replacement code, character, ascii, or tag can I use so that when the page is rendered, it shows the text like it did in the Editor?
Current example - if you have the text "Don't jump off the" [then hit Enter, so that the next word is below it]...
"cliff." Instead, currently, that gets saved into SQL as:
Don't jump off the <br>cliff.
Don't jump off the <div>cliff</div>.
...depending on which browser is used. In the msWord output, any tags left in the content [exceptions to strip_tags function] get displayed literally in msWord. Or, if I replace the tags with ASCII
it displays that literally, too. Not sure if this helps, but this is defined at the top of my php report_generator.php file:
require_once '/var/www/PhpWord/src/PhpWord/Autoloader.php';
\PhpOffice\PhpWord\Autoloader::register();
include "/var/www/ncpcphp/NCPC_PHP_Functions.php";
DEFINE("WRITEtoFDOCS", "NO");
DEFINE("FDOCSDIRECTORY", "Contract Attachments");
DEFINE("MIMETYPE","application/vnd.openxmlformats-officedocument.wordprocessingml.document" );
Help - what can I use to cause the output to show the carriage return?
Thank you, Cindy. Your answer is a piece of the solution. My CKEditor saves carriage returns as either
<br>, <br />, or <div></div>
depending on which browser is used Chrome[div] or Firefox[br] - that goes into my msSQL. Yet, if my editor has turned-on an "Enter filter" [keycode-13] in order to prevent someone from enter-editing a [[Placeholder]] (ckeditor read-onlyplugin) then saved editor text strips out the Enter. So, I did this: kept in the enter filter because it is necessary, then after the text carriage returns are saved as br's or div's, when I run my report generator, I replace
<br>, <br />, and <div></div>
with "\n" like you said. Then I explode the text variable like this:
$show_cad = explode("\n", $show_cad);
foreach($show_cad as $line) {
$section->addText(htmlspecialchars($line));
}
The code in the editor needed to filter out the Enters only when Enter is pressed in the [[Placeholder]] plug in is more complex, and I got largely from CKEditor themselves. They request that I do not post their full solutions, but if you like I could show you pieces of it. Basically, I had to register the Placeholder widget. Then when Enter is pressed, it checks if the context is with Placeholder. If so, filter the Enter [then it disappears from the saved editor text], but if Enter is pressed elsewhere, it gets saved and used properly.
Thank you for your help!
I've been currently using the Brackets.io editor, and it has lots of extensions and so on, which is pretty good. Anyway, I couldn't find any extensions to do precisely what I want, so I came here in hope any of you guys could help me.
Well, as you know, on Netbeans, when you type a tag, such as P, the editor closes it, and if you then press ENTER, it automatically auto indents the code as the following:
<p>
Example
</p>
Is there a way to do so on Brackets.io, in the same, same way?
Thank you all for your attention :)
Emmet does that.
Typing the following keys < p > RETURN a does the following :
Without Emmet:
<p>
a</p>
With Emmet:
<p>
a
</p>
By the way, Emmet is a very cool tool, and you can obtain the same result faster with the following keys :
p TAB RETURN a
I see multiple settings for Code in terms of how to indent (spaces vs tabs), but nothing about how to disable indents. So for example, I enter a <p> tag, hit enter, and Code auto indents the next line. I'd like to disable that but cannot find the setting to do so.
No, there is no option to disable auto indent on enter. But if you need to insure that inline elements remain without extra spaces because it affects the layout you can use the new option, introduced in v1.0: html.format.unformatted - comma separated list of tags that shouldn't be reformatted. Default value null means that all inline elements should remain as you formatted them.
In addition, instead of typing <p> + Enter you can type just p and press tab which will give you a nice <p><\p> and will place the cursor in the middle.
Hope this helps.
You can now set the configuration property editor.autoIndent in your settings.json file (which for me was in C:\Users\$USER\AppData\Roaming\Code\User\settings.json). the value you want to set it to is the string "none".
see this thread for more details https://github.com/microsoft/vscode/issues/5446#issuecomment-559145939
In ST2 when you type div.foo and then press tab it goes to <div class="foo"></div>
Is there any setting to do autocompletion like that?
<div class="foo">
// 4spaces here.
</div>
Thank you.
UPDATED
Didn't find a special setting but found where to change snippet if someone intested.
In Sublime Text 2/Packages/HTML/html_completions.py just change
snippet = "<{0} class=\"{1}\">$1$0".format(tag, arg)
to
snippet = "<{0} class=\"{1}\">\n\t$1\n$0".format(tag, arg)
Solved.
You must be using emmet.... stock sublime text 2 does not auto complete class attribute from typing element.class that is emmet's doing. I use it... I love that emmet magic.
Similarly you could type element>element to make the second one nest on the first one. or element#id to add an id instead of a class...
Here is an entire cheat sheet for emmet for more completions using emmet plugin on ST2.
Make sure your page is on HTML. You can do this with CTRL+SHIFT+P. Then type 'set html'.
Then you can type div.class_name followed by TAB.