Select matching element/rename HTML tag in Visual Studio Code - visual-studio-code

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.

Related

Partial autocomplete of the suggestions given by vscode?

Is it possible for the autocomplete feature of vscode to accept only part of the suggestions on Tab?
Basically, we can specify the word separators characters in settings but the autocomplete feature seems to ignore these and replace the complete full word either way.
What I want, for example, is that by specifying the word separator "_" the autocomplete won't replace the full suggestion but only until this character which should effectively be considered the end of the word.
For example, having semi_completions_foo() declared and having written only the initial "se".
"se" + Tab -> "semi_"
"semi_" + Tab -> "semi_completions_"
On the other hand by pressing Enter the full suggestion would be accepted.
"se" + Enter -> "semi_completions_foo"
Is this already implemented?
This is currently not supported by default as of VS Code 1.35 but is tracked by this feature request.
However VS Code does support tabbing through suggestion alternatives after you accept a completion with tab. Just press tab again to switch to the next suggestion from the list.

eclipse multiple text selection like sublime text 2

is there an option or plugin for eclipse which would enable multiple simultaneous selections in the same editor.
In sublime text, selecting some text and then pressing Ctrl+d will add next instance of the same text to the selection if possible. After selecting the instances needed the editor has multiple carrets (not necessarily on the same or adjacent columns and rows). In this mode it is possible to move all cursors forward or back simultaneously and to edit all instances of text simuntaneously.
I find this feature very usefull and miss it sorely in eclipse..
This Eclipse plugin attempts to provide this feature: https://github.com/caspark/eclipse-multicursor. From the README:
What is this?
A work-in-progress attempt to provide Sublime-Text-like
multi cursor support for text editors in the Eclipse IDE.
What works?
Multiple identical lines can be edited simultaneously using Eclipse
linked mode editing (similar to existing "rename in file"
functionality)
Next steps
"select next" functionality + associated editing using Eclipse linked
mode
"find next" + associated editing
editing of non-identical text / editing without using linked mode
split selection to lines
regexp support for find next
This feature is available in LiClipse.
See it in action (more towards the end of the video).
It supports linking with Ctrl+K, unlink with Shift+Alt+K, Ctrl+Alt+mouse double click to select words or Ctrl+Alt+Mouse to make a selection of a region (or just end lines).
Preferences>General>keys>Rename - refactoring
I changed the binding to command + shift + R when > Editing Text.
Sorry for bringing up an old question, stumbled upon it after searching google for the problem
Alt + Shift + A, then you can hold shift and use the cursor in multiple lines.
Like Ctrl+D I could not find, but like Alt+F3 in sublime (multiselects all matches), you can do by pressing Alt+Shift+R, or select text > right click > refactor > rename.
Must say that this does not work with any kind of text. It works with names of variables, functions, classes etc.
Tested on Eclipse 3.8.1
ALT + SHIFT + F worked for me.
You can see shortcuts for all here:
Goto -> Window -> Preferences -> General -> Keys and search for replace then you will see binding for Find and replace. In the bottom of that window, you can add your key to Binding text box. There you can add or edit any keys as shortcut.
If you want to replace selected word's matching words or find selected words, use below keys because you do not need to select all words in eclipse:
Ctrl+F gives me Find/Replace dialog box.
Or you can,
First Alt+A
Next Alt+F
Then press on Replace or Search button occurding to your need.

How to do multiple line editing?

I want to edit multiple lines in eclipse, but I can't find any short cut or Plugin. In Geany I just press ctrl+alt+up/down I can add / edit multiple lines.
Maybe this example can explain what I mean:
var text = "myname";
var addr = "myaddr";
var age = "myage";
I want to edit text above into:
var my_text = "myname";
var my_addr = "myaddr";
var my_age = "myage";
The text above is just a simple example, but sometimes I have many lines of words that I have to edit its prefix.
Press alt + shift + A to Toggle block selection (Toggle block / column selection in the current text editor), this will let you write vertically in eclipse, then you can easily do this.
Go to Window->Preferences.
Find for binding in text box surrounded by red box.
On OS X, the key combination for multi-line edits in Eclipse (or STS) is option/alt+command+A
You can try the following plugin,
https://github.com/caspark/eclipse-multicursor/releases
With this multiple occurrence of same text can be selected and edited. This is similar to multi select functionality available in editors like Sublime and Visual studio code.
The Eclipse 4.24 (June 15 2022) will integrate it (See https://bugs.eclipse.org/bugs/show_bug.cgi?id=576377):
Multi selection down relative to anchor selection (e.g. Ctrl-Alt-J)
Multi selection up relative to anchor selection (e.g. Alt-J)
End multi-selection (e.g. ESC)
Add all matches to multi-selection (e.g. Ctrl-Shift-Alt-J)
Multi caret up (e.g. Ctrl-Alt-Shift-Up)
Multi caret down (e.g. Ctrl-Alt-Shift-Down)
Thanks to eclipse contributor !
The Eclipse 4.22 (Q4 2021) equivalent of Geany would Alt+Click on the lines you want to edit in one go.
Eclipse now supports
Multiple text selection
Support for multiple selection has been added to Text Editors.
Multi selections allow most edit operations (text replacement or insertion, extend selection to next word or to next line, copy/paste...) to apply simultaneously on all ranges.
Multiple strategies are available to enable multi-selections:
Turn a block selection into a multi-selection using the To multi-selection command,
Add a caret with Alt+Click,
Use the new Select All button on the Find/Replace dialog.
So check if this would work in your case.
I know this is an old post, but I still want to share my way of multi select and editing. However this way is restricted to only the same variables across the file. Simply highlight the variable to edit, right click, choose Refactor->Rename. Then edit the variable and it will also edit the same variables across the file. Hope it helps..:)
Press key - { Alt + Shift + A } You will see A [+] symbol in IDE then use this symbol as drag

Code completion based on snippets in Eclipse

I would like to accomplish two tasks at once.
First, to move my snippets of code from .txt files and be able to tag them/organize better.
Second, assign shortcuts to those snippets that will allow me to type "p" + TAB which will render assigned snippet (I don't care of cursor position etc)
Quick Importing - resources
You can do a brief CTRL + SHIFT + R. This will enable you to display any kind of file from inside your projects directory.
To open any resource type * . *
To select resource to open type ?
To open all text files type *.txt
Snippets - templates
Eclipse has auto fill property. You can enhance it using templates. There are many ready-to-use templates, and you can even create your own.
Templates are used by typing the first character and pressing CTRL + SPACE.
Organize code - formating & tags
If you want to organize you code even more, you can use existing tags like TODO or create your own tags. Use them to sort or prioritize the code snippets you want to import into another project.
You can use CTRL + SHIFT + F to reformat your code.

Is there an Eclipse command to surround the current selection with parentheses?

Is there an Eclipse command to surround the current selection with parentheses?
Creating a template is a decent workaround; it doesn't work with the "Surround With" functionality, because I want to parenthesize an expression, not an entire line, and that requires ${word_selection} rather than ${line_selection}.
Is there a way that I can bind a keyboard shortcut to this particular template? Ctrl-space Ctrl-space arrow arrow arrow isn't as slick as I'd hoped for.
Maybe not the correct answer, but at least a workaround:
define a Java template with the name "parenthesis" (or "pa") with the following :
(${word_selection})${cursor}
once the word is selected, ctrl-space + p + use the arrow keys to select the template
I used this technique for boxing primary types in JDK 1.4.2 and it saves quite a lot of typing.
Easy, Window->Prefs, then select Java->Editor->Templates
Create a new template with : (${line_selection}${cursor})
The "line_selection" means you have to select more than one line.
You can try creating another one with "word_selection", too.
Then, select text, right click, Surround With... and choose your new template.