In WebStorm you can select an element and it's surrounding when you do Alt + Arrow Up.
How can you achieve that in VSCode ?
You can try with VSCode buit in Emmet: Balance (outward) command: Ctrl+Shift+A
If the shortcut does not work, follow these steps:
Press Ctrl+Shift+P to open the Command Palette
Type Emmet
Select Emmet: Balance (outward)
This will select the tag where you have your cursor currently in, and all its contents (I understand that by its surroundings you mean the tag contents and the tag itself).
If the tag has as a content a combination of text and tags and your cursor is in the text, the command will select all the content. A new hit of the command will grow the selection to include the tag itself.
Related
Is there a shortcut to copy everything with the same tag in Vscode?
e.g.
<h2>Apple</h2>
<p>It's a fruite.</p>
<h2>Banana</h2>
<p>It's also a fruite.</p>
Goal: Copy all codes within h2 tag.
Result:
<h2>Apple</h2>
<h2>Banana</h2>
select <h2>
use menu Select ? Select All Occurrences
ArrowRight
ArrowLeft
use command Emmet: Balance (outward)
Ctrl+C
Esc
Go to the new location
Ctrl+V
In Sublime Text I can use the following shortkeys:
ALT+SHIFT+2 : create two columns
ALT+SHIFT+3 : create three columns
...
I want to be able to do the exact same thing in VSCode (without downloading the Sublime Text keybinding since I want the rest to stay the same)
If you search for columns within the "Keyboard Shortcuts" editor, you wil see these options:
workbench.action.editorLayoutTwoColumns
workbench.action.editorLayoutThreeColumns
They are unbound to any keyboard shortcut by default. Click the plus sign to the left of each of these commands in turn and you will get a dialog box where you can enter your chosen keybinding for each and you are done.
What hotkey or command helps to select the whole word under the cursor in VSC?
(Like CTRL or ALT + D in ST3)
To select the word under the cursor in VSCode:
ctrl + d
Note: the definition of a "word" is different when your document edited with VSCode is a markdown one.
That is why VSCode 1.52 (Nov. 2020) proposes:
Markdown inline smart select
Expand and shrink selection in Markdown documents using the following commands:
Expand: kb(editor.action.smartSelect.expand)
Shrink: kb(editor.action.smartSelect.shrink)
Selection applies to italics, bold, inline code blocks, and links.
Another simple way is to double click the mouse left button.
When I have long text line I would like to show it next line.
What is the property name in VS Code?
The menu under File > Preferences or press Ctrl+, (on Mac Code > Preferences > Settings or press Command (or Cmd) ⌘+,) provides entries to configure user and workspace settings. You are provided with a list of default Settings.
Set editor.wordWrap: on in your User Settings or Workspace Settings under preference.
Select the below options to change to the desired settings.
Off - Lines will never wrap.
on - Lines will wrap at the viewport width.
wordWrapColumn - Lines will wrap at "Editor: Word Wrap Column".
bounded - Lines will wrap at the minimum of viewport and "Editor: Word Wrap Column".
You can toggle word wrap for the VS Code session with Alt+Z (macOS: Option (or Alt) ⌥+Z) or select View > Word Wrap from Menu.
For more about User and Workspace Settings or Key Bindings for Visual Studio Code
On Windows, press Alt + Z (macOS: Option ⌥ + Z) to toggle word wrapping, or, select View > Toggle Word Wrap from VSCode Menu.
For Windows, Pressing Alt+Z will break the line.
For Windows users do the following in -->
Open VScode
Go to Settings(Gear icon on the bottom-left side)
Click Settings in the menu
In the searching bar search for "word wrap"
Click the drop-down menu and change it to "on"
This setting will wrap your words according to your editor: viewport.
In case this auto wrapping isn't working you can press --> Alt + z to wrap content
In VS Code:
Install Beautify plugin. (or any Formatter)
Go to the file & select the desired part.
Right-Click on it & select Format Selection Or press Ctrl + k Ctrl + F.
Hope this helps.
HTML > Format: Wrap Line Length
set the maximum number of characters (for example - 1000)
You can press Ctrl + W / Ctrl + L to toggle word wrapping or select Main menu "Edit>Advanced>Word Wrap" .
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.