I often write XML files. So when I type a stand-alone tag (like <br />) I automatically type '/' followed by '>'.
But VS Code is automatically inserting a '>' after I typed '/' at the end of a tag. But, because I automatically type '>', it results in />> at the end of the tag. This is of course very annoying.
Is there a way to deactivate this behaviour?
PS: I already tried disabling "Auto Close Tags", but it only deactivated automatically inserting closing tags, after typing '>' (which is actually helpful, so I don't want to deactivate that anyway), the other problem was still there.
It seems, that the autocomplete comes from an extension (but I assume, this is a default extension). It's just called "XML" from "Red Hat".
In settings.json I added:
"xml.completion.autoCloseTags": false,
This deactivated automatic closing tags (which I actually would have kept) but also the ">" after the "/" in an stand-alone tag.
Related
I am migrating from sublime to VS code for HTML and autoclosing system works a bit worse under VS code:
In sublime, I type a '<' and then start typing the tag I am looking for and get a dropdown menu, once I select the right one with enter sublime automatically adds the rest. For example, I can type '<' then type p and select a paragraph element and "></p>" is added automatically afterwards.
In VS Code, after selecting the tag I always have to type the '>' symbol afterwards, which is getting really annoying after a while. Is there a way to change the behaviour?
(I am using the auto close tags extension)
In .js or .jsx I have strange behaviour. When I have cursor between tags and press enter the vscode does not create empty line between tags and put cursor back to empty line with right indentation. It moves tag to new line. Then I have to create manually empty line between tags and indentation.
Actually is does behave as it should when tag does not have any attributes. But when ever I pass any attribute to tag it start to behave as I mentioned above. Have to mention that in .html files it behaves as expected even with attributes in tags.
I have tried to disable all extensions, install insiders versions but getting the same behaviour.
Let's say I've got the following code
<div class="footer">
<div>Foo</div>
</div>
How can I change .footer from a div element to a footer element?
That is, if I have the cursor in div I'm looking for a keyboard shortcut that selects the opening and closing tags of an element. I believe I've used emmet to do this before in Sublime, but I can't seem to find similar functionality in Code. (Ideally this would work in JSX files too...)
Do you want to rename the paired tags? If yes, there is a much easier way: you just need to install the Auto Rename Tag extension. When you rename one HTML tag, it will automatically rename the paired HTML tag.
V1.41 is adding this functionality, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags
HTML rename tags
You can now use F2 to rename the opening/closing tag pairs in HTML.
F2 when the cursor is over one of the tags and you will get a little input box with the cursor to input the new tag name and the start/end tags will be replaced with whatever you type upon .
See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default
Also of interest might be the "mirror tags" functionality just added in v1.41 as well (https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror-cursor):
Clicking inside a tag will create another cursor in the matching start or end tag.
VS Code now adds a "mirror cursor" when you are editing HTML tags.
This behavior is controlled by the setting
html.mirrorCursorOnMatchingTag, which is on by default.
---------- v1.42 is changing the default status of the mirror cursor:
HTML Mirror Cursor off by default
We have made Mirror Cursor an opt-in feature. In the upcoming
iteration, we'll continue to improve its implementation to make this
feature more easily understandable and available to more languages.
You can still use this feature by turning on
html.mirrorCursorOnMatchingTag.
Thanks to JerryGoyal's answer below (I have upvoted it) - I have continued with this ongoing answer.
Because I have been tracking this for over half a year now, v1.44 has renamed this once again. From Synced Regions:
Synced Regions
We have improved the mirror cursor feature introduced last November
with a new implementation called Synced Regions. Currently this
feature is available for HTML and you can try it out by one of the
following ways:
Running the command On Type Rename Symbol on an HTML tag (bound to
Ctrl+Shift+F2 by default).
Turning on the editor.renameOnType setting and move the cursor to an HTML tag.
The red regions are Synced Regions. As their name suggests, any change
in one region will be synced to other regions. You can exit this mode
by either moving your cursor out of the regions or pressing ESC.
Additionally, typing or pasting any content leading with a whitespace
in any region exits this mode.
We look forward to providing an API that could make this
rename-on-type experience available to other languages such as JSX,
XML, or even local variables in TypeScript.
As that last part notes, it works in html out of the box but other languages need to implement themselves. As of June 2020 by my testing it still does not work in jsx files on embedded html tags.
You must enable this in your settings, it is off by default.
You can do this without an extension using Emmet Update Tag
Place your cursor in the opening tag
Press CTRL+SHIFT+P to open the command palette
Search for "Emmet: Update Tag" by typing something such as "em up t", and/or find it in the list
Press enter to select "Emmet: Update Tag"
Enter the new tag
Press enter
The opening and closing tag are updated to the new one.
Update Mar 2021:
No need for extension, this is now cooked into VSCode.
"editor.linkedEditing": true
Read more here: https://code.visualstudio.com/Docs/languages/html#_auto-update-tags
CTRL + D on windows. As mentioned by #tataata, CMD + D on Mac OS. Not limited to tag renaming. Very useful.
You can use a key shortcut cmd + D (Mac OS) for adding to the selection the next matching element and then there is a possibility to edit open and closing tags simultaneously.
I'm using tag-rename. Press F2 on the tag and it renames the start and close tags.
https://marketplace.visualstudio.com/items?itemName=krizzdewizz.tag-rename
Quick and Simple Select tool works fine too but though it is not perfect.
it has over 40k downloads
https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select
it allows you to select tools
Ctrl + K ' select everything between single quotes
Ctrl + K " select everything between double quotes
Ctrl + K ` select everything between backticks
Ctrl + K ( select everything inside the parenthesis
Ctrl + K ) select everything inside parenthesis and include them
Ctrl + K [ or ] select everything between square brackets and include them
Ctrl + K { or } select everything between curly braces and include them
Ctrl + K < or > select everything between angle brackets and include
No need to write config codes, just enable it from settings page.
Whenever I am working in a JSP file and I type ${ to start an el (Expression Language) tag, Eclipse will automatically add } (with a space before the closing brace) after the cursor so that I get ${ } instead of ${}.
Is there a code template in Preferences that I can modify to change this behavior, or is it beyond user preference control?
I have checked in Preferences: Web: JSP Files: Editor: Templates, but none of those templates match. I've also looked in several other sections in Preferences but haven't found anything promising.
What #Mero provided (see comments on answer above) might not be an exact answer, but creating a JSP Template probably the closest thing that I've found.
A few notes for anyone that wants to go that route:
Create a new template through menu Window->Preferences, then in the drill down menu navigate to Web->JSP Files->Editor->Templates. Click New.
Name is a shortcut you can type (the same way typing sysout ctrl+space in Java is a shortcut for System.out.println()). I suggest something simple like el. This allows you to type e l ctrl-space instead of $ { ctrl-space to pull it up.
Context tells it when it should appear in intellisense. I suggest creating two of this template where one has a context of JSP Attribute value and the other has a context of All JSP.
Description is just informative. Put whatever you want. I put 'EL Script' myself.
Pattern is where you put what will be inserted. Put $${${cursor}} or $${${script}}, depending on preference. See below for explanation on the differences.
In Eclipse Templates ${} is how you put variables in the template, so to make it actually print ${} you have to escape the $ with a $$ leading to $${}.
The predefined variable ${cursor} defines where the cursor is after intellisense replaces the el, so to have the cursor appear in between the curly braces you want to do this: $${${cursor}}.
Using any variable that is not predefined (in this case, ${script}) will simply put in that variable with a box around it and allow you to type over it and press enter when you're done, allowing you to move to the end of the closing curly brace.
Note: I understand that this is not an actual answer, but rather is a workaround. I'm putting it here simply so that those who are fine with a workaround can know how to go about doing it.
Edit
For those that don't like having to type ctrl-space, a workaround could be to have the template name start with< since on JSP pages, the < opens the intellisense, so for instance, you could have the name be <el or <$.
A workaround but not an answer:
Disable auto-close of EL tags. You type ${expression} and get ${expression}|, rather than typing ${expression and getting ${expression| }. (| denotes the cursor location)
See this answer, from when this same question was asked of Eclipse Kepler: https://stackoverflow.com/a/20258401/1021426
In some editors there exist plugins implementing a feature called "hungry backspace" or "hungry delete".
If this mode is active in a text editor then one hit to the backspace key will automatically delete all whitespace chars backwards from the current cursor position up to the first non-whitespace character.
For example, this feature exists for Emacs and IntelliJ IDEA.
Does anyone know if it is also available in Eclipse?
Alt-Del is probably as close as you're going to get without writing a plugin yourself. Others have asked for this feature (coming from intelliJ) but so far it doesn't exist, or it's not published.
-Adam
CTRL-backspace is pretty close too: delete previous word:
function(); (4 spaces)
+ CTRL-BACKSPACE gives:
function
Other than that, AnyEdit plugin can convert trailing spaces into tabs (but also into "", effectively removing them)
Ctrl+Shift+Left, Backspace always works for me. works in notepad, web browsers, everywhere.
Stick to the standards :)
In SciTE, and Eclipse (3.4), Ctrl+Shift+Del with the caret after the last visible character will delete these spaces. Ie. it deletes from caret to end of line.
Actually, in SciTE I don't need to do that, since I have set it up to automatically remove these trailing spaces when saving.
Note: In Preferences > General > Keys, there is a Remove Trailing Whitespace binding (without key assignment by default) which seems to apply to File.
From eclipse Windows menu/Preferences
Search for Keys and filter to "Delete Previous Word"and Bind it to the Ctrl+Backspace