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.
Related
I can't find out how to select the whole content of HTML attribute. For example I have a div with class
<div class="menu-link font-size-bigger font-weight-bold"></div>
So now when I want to select all classes "menu-link font-size-bigger font-weight-bold" I must press smartSelect.grow 3x
Is there a better way. I just want to use one shortcut press. Thank you
For this use case you need to install an extension. You could try these:
https://marketplace.visualstudio.com/items?itemName=chunsen.bracket-select
https://marketplace.visualstudio.com/items?itemName=StAlYo.select-quotes
In Sublime3 Text Editor, I'm trying to type the following:
p some dummy text
and have the result be
<p>some dummy text</p>
I can't seem to find the shortcut for this. Anyone else run into this?
Thanks in advance.
Are you using Emmet? If so, put the text between {}.
p>{some dummy text}
For more info, visit Emmet’s Documentation.
I'm trying out VS Code and I used Emmet to create a new HTML element with a class. I need to create another nested (child) HTML element inside the original element, but by default, VS Code will not indent for the new element, when you hit enter inside the original element tags. Like if you have <div class="main"></div> and you hit enter in between the div tags, you'll get -
<div class="main">
</div>
And then you need to manually go one line up, add tabs and indent for the new HTML element.
In Webstorm, hitting enter in between the parent tags automatically indents for the new child element.
Here are two GIFs which show what I mean.
VS Code -
Webstorm -
Is there an extension or some other trick that achieves this feature in VS Code?
Download an HTML formatter Extension. 1th, download one of the below Extensions:
Beautify
JS-CSS-HTML Formatter
OR any other HTML formatter you want. 2th, in VS Code, go to one of the HTML files you are working. 3th, Press ALT + SHIFT + F then a pop out window appears. 4th select one of the suggested formatters. All done!
Whenever, you press ALT + SHIFT + F in an HTML file, it will be auto indented and beautified.
I'm guessing your looking for this setting
{
...
"html.format.indentInnerHtml": true,
...
}
"emmet.useNewEmmet": true;
Use this command to enable indent.
Steps:
1) Open "settings.json".
2) Add this code inside { ..... } (Curly Braces).
3) Make sure you add ',' (comma) on the last line if you are adding this code after a certain line in the end.
eg:
{
...
...
"editor.fontSize": 17, <--comma
"emmet.useNewEmmet": true
}
4) Save it.
FROM: https://github.com/Microsoft/vscode/issues/30790#issuecomment-317290906
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
We use confluence for documentaion but i find very time consuming to select the code macro; it's a 5 step process. Even typing the macro by hand is not efficient.
In the Stack Overflow editor all we have to do is select the text and press a button or hit ctrlK, and the text is formatted as code.
Is there a way to do this in Confluence?
even typing by hand is also not efficient
I use the code macro extensively and always use the autocomplete feature by typing { and choosing 'Code Macro' from the list (It's enough to type co for the code macro).
This is a very efficient.
Of course a keyboard shortcut would be faster, but there is no shortcut for the code macro. (AFAIK there is no keyboard shortcut for a specific macro at all)
I use Ctrl-Shift-D then wrap the text in {code}.
This also fixes the problem with formatting being stripped from pasted text.
In Confluence 5.x if you edit a page, you can type {cod<enter} and it puts a Code Block box on the page, but when code is pasted into this box it can strip out end of line characters.
Open the Insert Markup window using Ctrl-Shift-D
Paste in your code as plain text This way the formatting is not stripped out.
Add {code} tags.
You can also type three back ticks ``` to create a code block as you would in vanilla Markdown. This creates an empty code block very quickly. I never have with problems with formatting when pasting code in this way.
The one irritating feature of this method is that you can't specify the language as you do in Markdown, you have to select the language from a list.