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)
Related
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
The list of Sublime Text autocompletions can have two columns. If I press tab to select an autocompletion, it always uses the right column. What if I want to autocomplete using the left column?
This question is not language specific, but for example if I type "B2J" I get the suggestion "B2JointDef - box2D.dynamics.joints.B2JointDef". It's what I want, but I already imported "box2D.dynamics.joints.*" so I just need "B2JointDef". However if I press tab or enter, I get the whole "box2D.dynamics.joints.B2JointDef".
Do I need to use a more intelligent autocomplete package, or is there some way to get the left column?
Use SublimeJEDI. It should know that you have imported the package
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.
I am coding a Notepad++ plug-in to create an IDE for a scripting language that I and some others use.
My problem is that I can't figure out why Scintilla's AutoComplete functionality leaves the start of the string after an AutoComplete selection has been made.
I've tried deleting the start of the string, but this doesn't seem to work either. I suppose I could manually replace the target with the AutoCompletion selection when I get the AutoComplete selection notification, but shouldn't Scintilla do this automagically?
If you set Scintilla.AutoComplete.AutomaticLengthEntered = true, Scintilla will attempt to guess the length of the word and replace it when the AutoComplete entry has been accepted.
If you're showing a custom AutoComplete list using Scintilla.AutoComplete.ShowUserList, the first parameter (listType) is the number of characters that will be replaced when a match is accepted. Similarly, the lengthEntered in Scintilla.AutoComplete.Show is the number of characters to be replaced.