I am working on vue file, but same problem happens when in javascript language mode.
When I paste in the following text,
<li><a
:class="{'toggle':true, 'layerOn':dispHandicappedParking}"
href="#"
#click.prevent="dispHandicappedParking =! dispHandicappedParking"
>Accessible Parking</a>
</li>
VS Code immediately autoformats it to the following:
< li > <a
: class="{'toggle':true, 'layerOn':dispHandicappedParking}"
href = "#"
#click.prevent="dispHandicappedParking =! dispHandicappedParking"
> Accessible Parking < /a>
< /li>
If I then hit "undo", the bad formatting is removed, but the pasted code stays (which in itself seems a strange behavior: I'd expect paste to be a one-step-undoable action).
What setting to I need to adjust in order to stop the editor from mangling my code?
Ok, was an extension: Vue Language Features. I guess that's what I get for installing a preview build and forgetting about it!
Related
I have this code in an .ejs file, writing the second block on the web page:
<h1>
written by "<span class='accent'><%= params.user %></span>"
</h1>
written by "Salmon"
However, when I'm reformatting my code in WebStorm (Ctrl+Alt+L) it will change it to this, resulting in unwanted spaces before and after the quotation marks:
<h1>
written by "
<span class='accent'><%= params.user %></span>
"
</h1>
written by " Salmon "
I've tried going through the HTML & EJS code style pages in WebStorm, removing h1 from the lists it appears in to no avail. Besides those changes that I later rolled back I am using default settings.
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
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.
I'm using Eclipse (Juno). I have a form on a JSP page that has a textarea as follows:
<textarea name="t"><c:out value="${val}" /></textarea>
When I format the code (ctrl shift F) it becomes:
<textarea name="t">
<c:out value="${val}" />
</textarea>
Which is fine except that it inserts extra spaces and lines in the text area. I like formatting my code using Eclipse, but the spaces/lines get added to the database when the form is submitted. Even worse, it gets compounded every time that form is submitted again. What am I doing wrong?
Try adding "textarea" to the list of inline elements on the Web->HTML Files->Editor preference page.