Related
I'm on Ubuntu. Pushing Ctrl + Shift + i in VS Code auto formats the file.
I was editing a solidity contract and pushed Ctrl + Shift + i, VS Code didn't have a formatter configured so it asked me to pick one - I accidentally chose my JS prettifier extension instead of the solidity one. This badgered up my code by trying to use single quotes instead of double quotes (not allowed in solidity) and some other non-solidity friendly changes.
Pushing Ctrl + Shift + i now just auto formats with the wrong formatter with no option to pick a different one.
How can I change which linter/formatter is associated to which file types in VS Code?
Solution A:
Press Ctrl+Shift+P
Then type Format Document With...
At the end of the list click on Configure Default Formatter...
Now you can choose your favorite beautifier from the list.
Solution B:
go to file -> preferences -> settings search for format, on the left side, click on Text Editor, the very first item on the right side is Editor: Default Formatter from the dropdown you can pick any document formatter which you installed before.
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.
I want to indent a specific section of code in Visual Studio Code.
I read How do you format code in Visual Studio Code? that gives shortcuts to indent the whole code, but it doesn't work when selecting a specific section of code.
I tried Ctrl + Shift + F after selecting some line in my code, but the whole file is indented. I'm on Windows with Visual Studio Code Insider 1.8.0. How can I do it?
I want to indent a specific section of code in Visual Studio Code:
Select the lines you want to indent.
Use Ctrl + ] to indent them.
If you want to format a section (instead of indenting it):
Select the lines you want to format.
Use Ctrl + K, Ctrl + F to format them.
You can also indent a whole section (multi-lines) by selecting it and clicking
TAB
and also indent backward using Shift+TAB
And of course for auto indentation and formatting, following the language you're using, you can see which good extensions do the good job, and which formatters to install or which parameters settings to enable or set. For each language and its available tools. Just make sure to read well the documentation of the extension, to install and set all what it needs. Exemple: prettier is the most common used formatter for JavaScript and typescript. And it's widely used by all projects and code style requirements and setup. And in CI pipelines.
Up to now the indentation problem bothers me with Python when copy pasting a block of code. If that's the case, here is how you solve that: Visual Studio Code indentation for Python
On OS X, choose "Document Format", and select all lines that you need format.
Then Option + Shift + F.
(This works at least up to version 1.74.2, checked in Jan 2023)
On macOS Visual Studio Code version 1.36.1 (2019)
To auto-format the selection, use ⌘K ⌘F (the trick is that this is to be done in sequence, ⌘K first, followed by ⌘F).
To just indent (shift right) without auto-formatting, use ⌘]
As in Keyboard Shortcuts (⌘K ⌘S, or from the menu as shown below)
This should be able to set to whatever keybindings you want for indent/outdent here:
Menu File → Preferences → Keyboard Shortcuts
editor.action.indentLines
editor.action.outdentLines
F1 → open Keyboard Shortcuts → search for 'Indent Line', and change keybinding to Tab.
Right click > "Change when expression" to editorHasSelection && editorTextFocus && !editorReadonly
It will allow you to indent line when something in that line is selected (multiple lines still work).
For German keyboard layout, the standard settings are:
Indent selection: Strg + ´
Outdent selection: Strg + ß
As you've seen there are two ways to indent the code (this for Windows).
Reindenting the entire file
Shift+Alt+F
Reindenting only selected lines
First set the shortcut for Reindent Selected Lines
Menu File → Preferences → Keyboard Shortcuts → In the Search in keybindings type in Reindent Selected Lines → Select it and press Enter → Type in your own shortcut, e.g. Shift + 5, followed by Enter
Now select your code lines in the editor and use the shortcut set above, e.g. Shift + 5, to automatically indent those lines only.
On windows its "Ctrl+[" and "Ctrl+]" for indent and unindent You can find rest of the shortcuts here
For mac, you can find the shortcuts here: https://code.visualstudio.com/docs/getstarted/keybindings
For me on windows it was Ctrl+¡ , indent line. It adds a tab at the beggining of each line.
Many of the answers were not able to solve my problem too.
Just go for fn+tab
Welcome in advance.
On linux ubuntu: select text then ctrl + shift + i
This is the way I had my code before formatting...
Then I used the command like this... (Make sure to select the code part that you need to format)
Shift+ Alt+F
And I got the formatted code like this....
For me, using a mac in 2022 it was CMD + ] to indent multiple lines after selecting the desired indented lines.
Crtl + Alt + F can also formate (windows)
Windows - 2022
Shift+Alt+F
Env
Ubuntu 16.04
Visual Studio Code v 1.2.1
Problem
I can search occurrences in all files by Ctrl + Shift + F
However, I can't find a way to search and replace occurrences in all files.
Is this a missing(or hidden) feature in Visual Studio Code.
Visual Studio Code v 1.3.0++ has this feature:
Replace functionality can be accessed:
In the Search View by expanding the Search textbox
Using Ctrl + Shift + H, from the Edit | Replace in Files menu
Using Replace in Files command in the Command Palette
VS Code also supports capturing groups when using regex, captured groups (using parenthesis) can be referenced with $1 for the first match, $2 the second etc. $0 returns the complete match.
Reversing "abc"
Appending "def"
It's currently not possible to replace in all files. The good news is it's part of the June Iteration Plan. The feature has already passed a couple of tests. So it will be probably released in July 2016.
As an enhancement, VSCode 1.70 supports search and replace in all selected files, solving the 2018 issue 47166 "Make search tree context menu multiselect-aware".
See PR 154847 (available today in VSCode insiders)
Make search tree context menu multiselect-aware
When multiple entries are selected, if someone removes/replaces on one selected item, it happens to everything.
Note: if a whole file (uses Replace All) and entry (just uses Replace) are both selected at once and either Replace or Replace All is used, whatever replace action is valid for all selected item will run.
For example, if a file and entry are all selected and the Replace button is selected on the entry, then Replace All will be run on the file and Replace will be run on the entry.
Example:
All File:
Search = Ctrl + Shift + F
Replace = Ctrl + Shift + H
One File:
Search = Ctrl + F
Replace = Ctrl + H
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.