Copy & Paste folded Code in Visual Studio Code - visual-studio-code

When I copy folded code it just pastes the beginning line (that's visible).
For example if I copy this code when it's folded:
Expanded(
flex: 2,
child: Image(
image: AssetImage('images/dice1.png'),
),
),
It will just paste the starting code:
Expanded(


You have to select also the end of the folded range to successfully copy all the folded content.
See this issue.
A workaround could be to add this line in settings.json:
"editor.foldingStrategy": "indentation"
That would make visible that ending range making it possible for you to select up to it and including it.


in Visual Studio Code
just press ( Ctrl + Shift + [ ) to fold code and ( Ctrl + Shift + Down ) to selected code.
and then copy selected code ( Ctrl + c ).
in mac:
Command = ctrl
Options = alt

Related

Visual Studio Code (Shift + Alt + F) clearing up the code

When I press shift + alt + f in a cpp file in Visual Studio Code, it lines up the code as following below:
int main()
{
return 0;
}
however, I'd really like it lo line the code as following:
int main(){
return 0;
}
it's not that of a problem but I really don't want to fix every bracket one by one to line them up like I wish to be. Is there any extension or some sort of way to solve this issue? Thanks!

How to format selected code using vscode and Prettier?

I have add Prettier in my VScode but I want to format my code only when I highlight my code,
say
let a = [1, 2, 3, 4]; (line1)
let b = [ 1,2 ,3,4]; (line3)
how can I just format line 1 when I highlight line 1 only and the result should be
let a = [1, 2, 3, 4]; (line1)
let b = [ 1,2 ,3,4]; (line3)
thanks
UPDATE:
I know we can format the code in a code block. But what I want to do is
const test = (a, b, c) => { (line 1)
console.log("show a", a); (line 2)
console.log("show b", b); (line 3)
}
If I highlight b, c in line 1 and format it. It only formats the code in line 1 but not 2 and 3
futher update:
this is my vscode shortcut setting
when I highlight like this,
it becomes like that

I dont know the solution yet, but there are some info that may help.
Basically, there are something wrong with the linter. ( https://github.com/prettier/prettier-vscode/issues/137 )
And your may fix it by checking out this https://prettier.io/docs/en/integrating-with-linters.html ,
I dont know how & didnt try. cuz:: [[
looks complicated (download many things) & mess up with the project structure
may not even work
some info I have no knowledge of / incompatible with my understanding
dont know what will happen to my linters
dont know what is the next step
[]
https://github.com/prettier/prettier-vscode/issues/134
[]
No, the issue is with prettier-eslint not supporting range formatting.
...
I would suggest switching to the recommended approach of integrating ESLint and Prettier
https://github.com/prettier/prettier-vscode/issues/137
[]
let Prettier do the formatting and configure the linter to not deal with formatting rules. You can find instructions on how to configure each linter on the Prettier docs site.
...
For details refer to the Prettier documentation.
https://github.com/prettier/prettier-vscode#linter-integration
[]
Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs. Linters.
Luckily it’s easy to turn off rules that conflict or are unnecessary with Prettier, by using these pre-made configs:
eslint-config-prettier
stylelint-config-prettier
https://prettier.io/docs/en/integrating-with-linters.html
[]
I would like to format my code with prettier, then apply all eslint fixes. Previously, this could be achieved by setting prettier.eslintIntegration to true. Now, the extension say that this option is [DEPRECTAED] and prettier-eslint should be used instead. However, it's not clear how to use prettier-eslint in vscode.
https://github.com/prettier/prettier-vscode/issues/999
Actually, "format only selected code" is working on my end, I didnt do any fancy extra config.
What you need to pay attention to is the "syntax tree"
-- ie: dont blindly select across the scope (the bracket {}).
#eg::
given
function test() {
let a = [1, 2, 3, 4];
let b = [ 1,2 ,3,4]; // select only this line
return false
}
if you only select::
let b = [ 1,2 ,3,4];
then press ctrl+k, ctrl+f
everything is fine
if you select across the bracket (the } for function scope)::
let b = [ 1,2 ,3,4]; // select only this line
return false
}
then press ctrl+k, ctrl+f
the whole thing in the bracket (the } for function scope) gets formatted
the "syntax tree" in a class is a bit weird.
-- ie: if you select the WHOLE function AA & format it -- codes inside another function BB will also get formatted...
you may need to apply // prettier-ignore somewhere to prevent formatting
prettier-ignore
A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.
https://prettier.io/docs/en/ignore.html
(note, it seems there is no ending tag for // prettier-ignore for Javascript (at current stage of Prettier))
for the meaning of a "syntax tree", see ex below
if you place it above the code line
seems it applies to the item (the code) (-- which is a "syntax tree node") directly below ((empty lines not counted for)) the // prettier-ignore line
-- eg-below: console.log("show a", a);, and ends there.
if you place it behind the code line (inline)
seems it applies to the inline code only
#for_your_case-do_this:
const test = (a, b, c) => {
// prettier-ignore
console.log("show a", a);
// prettier-ignore
console.log("show b", b);
}
// or
const test = (a, b, c) => {
console.log("show a", a); // prettier-ignore
console.log("show b", b); // prettier-ignore
}

Select the code you want to format and press CTRL + SHIFT + P to open the command pallette. Then type in "format" and select format selected code. Or you can select your code and press right click which should bring up a context menu where you can select the option

Select the code or leave the cursor in the row you want to format and press Ctrl + K Ctrl + F.

Is it possible to have a snippet that considers the length of my input?

I would like to define a snippet for comments like
//************
//* foo A1 *
//************
where I enter foo A1 and it would create a line with (6+ len(${1}) asterisks etc. - is that doable and if so, how?

While I am a big proponent of HyperSnips (see
[VSCODE]: Is there a way to insert N times the same characters,
VS Code: how to make a python snippet that after string or expression hitting tab will transform it and
VSCode Advanced Custom Snippets for how to use it),
it is instructive to see how to do this with just the built-in snippet functionality in vscode. Here is a snippet that does what you want:
"Custom Comment": {
"prefix": ["cc2"], // whatever trigger you want, then tab, write your info and tab again
"body": [
"//***${1/./*/g}***",
"//* $1 *",
"//***${1/./*/g}***"
]
},
That just adds 3 asterisks to the beginning and 3 to the end of your added comment, each character of which is replaced by an asterisk as well.

You can use the extension HyperSnips
snippet comment "Comment" A
``rv = '//' + '*'.repeat(t[0].length + 6)``
//* $1 *
``rv = '//' + '*'.repeat(t[0].length + 6)``
endsnippet

how to change lines at the same time - VS Code

I want to change same lines at the same time.
for example I want to change { backgroundColor: '#fff' } at anywhere on my file.js. (I don't want to use Replace)

Select { backgroundColor: '#fff' } with your mouse and press cmd + shift + L (or ctrl + shift + L) to select all occurrences of it in your file. Then, you can change them all at the same time.

Try
Ctrl + F (backgroundColor: '#ufff')
Alt + Enter
This will select every instance and give each an active cursor. Hit Esc to exit multi cursor mode.

How do I collapse sections of code in Visual Studio Code for Windows?

How do I fold or collapse sections of code in Visual Studio Code?
Is this feature supported?

Folding has been rolled out and is now implemented since Visual Studio Code version 0.10.11. There are these keyboard shortcuts available:
Fold folds the innermost uncollapsed region at the cursor:
Ctrl + Shift + [ on Windows and Linux
⌥ + ⌘ + [ on macOS
Unfold unfolds the collapsed region at the cursor:
Ctrl + Shift + ] on Windows and Linux
⌥ + ⌘ + ] on macOS
Fold All folds all regions in the editor:
Ctrl + K, Ctrl + 0 (zero) on Windows and Linux
⌘ + K, ⌘ +0 (zero) on macOS
Unfold All unfolds all regions in the editor:
Ctrl + K, Ctrl + J on Windows and Linux
⌘ + K, ⌘ + J on macOS
References: https://code.visualstudio.com/docs/getstarted/keybindings

As of Visual Studio Code version 1.12.0, April 2017, see Basic Editing > Folding section in the docs.
The default keys are:
Fold All: CTRL+K, CTRL+0 (zero)
Fold Level [n]: CTRL+K, CTRL+[n]*
Unfold All: CTRL+K, CTRL+J
Fold Region: CTRL+K, CTRL+[
Unfold Region: CTRL+K, CTRL+]
*Fold Level: to fold all but the most outer classes, try CTRL+K, CTRL+1
Macs: use ⌘ instead of CTRL (thanks Prajeet)

Also see the ability to fold any arbitrary lines of code as of Insiders v1.70. That is any lines you select can be folded!
See https://stackoverflow.com/a/72954133/836330 for the command and demo.
Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection
This is bound to the above create command: Ctrl+K Ctrl+,
Remove Manual Folding Ranges
editor.removeManualFoldingRanges
This is bound to the above remove command: Ctrl+K Ctrl+.
Code folding by regions has arrived with v1.17. Folding by regions documentation. And v1.19 and 1.23.
[Generally you can add a space, for example // region and // endregion to //region and //endregion and it will also work.]
TypeScript/JavaScript: //#region and //#endregion or // #region and // #endregion
C#: #region and #endregion
C/C++: #pragma region and #pragma endregion
F#: //#region and //#endregion
PowerShell: #region and #endregion
Python: #region and #endregion
VB: #Region and #End Region
PHP: #region and #endregion
Bat: ::#region and ::#endregion or REM #region and REM #endregion
Markdown: <!-- #region --> and <!-- #endregion -->
Golang //region and //endregion or //#region and //#endregion
Java //#region and //#endregion
CSS/SCSS/Less: /* #region */ and /* #endregion */ or /*#region*/ and /*#endregion*/
SCSS/Less: // #region and // #endregion
Go: // region, // endregion and // #region, // #endregion
shellscript: # region and # endregion
Perl5 #region and #endregion or =pod and =cut
sql --#region and --#endregion
Important: If you don't see your language in the list ::
Each language also has snippets available for the markers. Type '#' and invoke code completion to see them. To have region markers configured for your language, contact the language extension provider.
So type # and then Ctrl+Space to see the region markers for any language.

This feature is available in the standard build now. To make the collapse/expand controls appears, you need to mouse over the area just to the right of the line numbers as shown in this screenshot:

You should add user settings:
{
"editor.showFoldingControls": "always",
"editor.folding": true,
"editor.foldingStrategy": "indentation",
}

ctrl + k + 0 : Fold all levels (namespace , class , method , block)
ctrl + k + 1 : namspace
ctrl + k + 2 : class
ctrl + k + 3 : methods
ctrl + k + 4 : blocks
ctrl + k + [ or ] : current cursor block
ctrl + k + j : UnFold

The default shortcut for collapse/extend are:
Ctrl + Shift + [ : "Fold"
Ctrl + Shift + Alt + [ : "Fold all"
Ctrl + Shift + ] : "Unfold"
Ctrl + Shift + Alt + ] : "Unfold all"
Or go to keybindings.json and change as you wish.
For example:
{
"key": "cmd+k cmd+m",
"command": "editor.foldAll",
"when": "editorFocus"
},
{
"key": "cmd+m cmd+k",
"command": "editor.unfoldAll",
"when": "editorFocus"
},

If none of the shortcuts are working (like for me), as a workaround you can also open the command palette (Ctrl + 3 or View -> Command Palette...) and type in fold all:

Collapsing is now supported in release 1.0:
Source Code Folding Shortcuts
There are new folding actions to collapse source code regions based on
their folding level.
There are actions to fold level 1 (Ctrl+K Ctrl+1) to level 5 (Ctrl+K
Ctrl+5). To unfold, use Unfold All (Ctrl+Shift+Alt+]).
The level folding actions do not apply to region containing the
current cursor.
I had a problem finding the ] button on my keyboard (Norwegian layout), and in my case it was the Å button. (Or two buttons left and one down starting from the backspace button.)

With JavaScript:
//#region REGION_NAME
...code here
//#endregion

This is the latest built-in(default) keyboard shortcuts for folding and unfolding the code
vscode Keyboard shortcut
Ctrl+Shift+[ Fold (collapse) region
Ctrl+Shift+] Unfold (uncollapse) region
Ctrl+K Ctrl+[ Fold (collapse) all subregions
Ctrl+K Ctrl+] Unfold (uncollapse) all subregions
Ctrl+K Ctrl+0 Fold (collapse) all regions
Ctrl+K Ctrl+J Unfold (uncollapse) all
Nb: But in some cases, your vs code extension or user will alter the keyboard binding(shortcut). So best option that Checks like this
view->command palette OR cntrl+shift+p
type "fold" .It will suggest the fold and unfold and there shortcut. You can type that shortcut instead of command-palette
eg:
Fold All
UnFold All

Just press ctrl + shift + p, and then type 'fold'.
all keybinds about (un)fold will be shown.
If ctrl k does not work, probably it's because the vim extension overrides the key.
in this case, you should modify settings.json (press ctrl + shift + p, and then type 'settings' ) with
"vim.handleKeys": {
"<C-k>": false,
},

This feature is now supported, since Visual Studio Code 1.17. To fold/collapse your code block, just add the region tags, such as //#region my block name and //#endregion if coding in TypeScript/JavaScript.
Example:

v1.42 is adding some nice refinements to how folds look and function. See https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#folded-range-highlighting:
Folded Range Highlighting
Folded ranges now are easier to discover thanks to a background color
for all folded ranges.
Fold highlight color Theme: Dark+
The feature is controled by the setting editor.foldingHighlight and
the color can be customized with the color editor.foldBackground.
"workbench.colorCustomizations": {
"editor.foldBackground": "#355000" }
Folding Refinements
Shift + Click on the folding indicator first only folds the inner
ranges. Shift + Click again (when all inner ranges are already folded)
will also fold the parent. Shift + Click again unfolds all.
When using the Fold command (kb(editor.fold))] on an already folded
range, the next unfolded parent range will be folded.

No technical tips here, just simple adjustments of the preferences of VsCode.
I managed to show code folding controls always in VsCode by going to Preferences and searching for 'folding'. Now just select to always show these controls. This works with the Typescript code and HTML of templates in the Angular 8 solution I tested it with.
This was tested with VsCode Insiders 1.37.0 running on a Windows 10 OS.

Here is the most common useful default keymap of VSCode. And you cab easily customize them with your own keymap. CTRL + K and then:
Fold All: CTRL + 0
Unfold All: CTRL + J
Fold Region: CTRL + [
Unfold Region: CTRL + ]
Fold Level 1: CTRL+ 1
Fold Level 2: CTRL+ 2
Fold Level 3: CTRL+ 3
Fold Level 1: CTRL+ 4

As of version 1.3.1 (2016-07-17), Block Collapse is much more convenient.
Any line followed by an indented line will have a '-' character to allow collapse. If the block is collapsed, it will then be replaced by a '+' character that will open the collapsed block.
The (Ctrl + Shift + Alt + ]) will still affect all blocks, closing one level. Each repeated use closed one more level. The (Ctrl + Shift + Alt + [) works in the opposite way.
Hooray, block collapse finally works usefully.

to fold/unfold current block use (ctrl+k)+(ctrl+l)

VSCode extension: Fold Level, one key fold to the level you want.

Note: these shortcuts only work as expected if you edit your keybindings.json
I wasn't happy with the default shortcuts, I wanted them to work as follow:
Fold: Ctrl + Alt + ]
Fold recursively: Ctrl + ⇧ Shift + Alt + ]
Fold all: Ctrl + k then Ctrl + ]
Unfold: Ctrl + Alt + [
Unfold recursively: Ctrl + ⇧ Shift + Alt + [
Unfold all: Ctrl + k then Ctrl + [
To set it up:
Open Preferences: Open Keyboard Shortcuts (JSON) (Ctrl + ⇧ Shift + p)
Add the following snippet to that file
Already have custom keybindings for fold/unfold? Then you'd need to replace them.
{
"key": "ctrl+alt+]",
"command": "editor.fold",
"when": "editorTextFocus && foldingEnabled"
},
{
"key": "ctrl+alt+[",
"command": "editor.unfold",
"when": "editorTextFocus && foldingEnabled"
},
{
"key": "ctrl+shift+alt+]",
"command": "editor.foldRecursively",
"when": "editorTextFocus && foldingEnabled"
},
{
"key": "ctrl+shift+alt+[",
"command": "editor.unfoldRecursively",
"when": "editorTextFocus && foldingEnabled"
},
{
"key": "ctrl+k ctrl+[",
"command": "editor.unfoldAll",
"when": "editorTextFocus && foldingEnabled"
},
{
"key": "ctrl+k ctrl+]",
"command": "editor.foldAll",
"when": "editorTextFocus && foldingEnabled"
},

On a Mac, it's the RHS Command key, ⌘K, not the left for the code folding commands.
Otherwise the left hand Command key will delete the current line, ⌘K.

I wish Visual Studio Code could handle:
#region Function Write-Log
Function Write-Log {
...
}
#endregion Function Write-Log
Right now Visual Studio Code just ignores it and will not collapse it.
Meanwhile Notepad++ and PowerGUI handle this just fine.
Update: I just noticed an update for Visual Studio Code. This is now supported!

Or, if you want to remove the folding buttons, for extra space:
"editor.folding": false
(add to your settings.json file)

The command K + command 0 does not work.

More info here: region extensionhttps://marketplace.visualstudio.com/items?itemName=maptz.regionfolder
After installing the extension and using python, it works like this:
# region ARBITRARY_REGION_NAME
code goes here...
# endregion
Also, selecting the desired area, use Ctrl+M+Ctrl+R.(that is: first hit and hold Ctrl, then hit m, let go m, then hit r, and let go all)