By "VS Code" I mean the lightweight text editor not the monolithic IDE, unfortunately searching this on google will bring up many pieces of irrelevant information about how to do this in Visual Studio.
To the question itself, Anybody knows how to hide arbitrary selected lines of code in "Visual Studio Code", preferably into a plus sign like collapsing does?
Note: this is different than collapsing nested code which probably could be achieved by Ctrl+K,Ctrl+<num> , what I need here is to hide specific block of code of choice, no matter nested or not.
EDIT: I see there are people who don't understand my requirements.
for example, you may think what I want is this:
before hiding:
for i in j:
for k in i:
for l in k:
somestuff...
after hiding:
[+] for i in j: ...
What I actually want is this:
before hiding:
# doing stuff about a
a = ClassA()
a.bar()
a.i = 2
a.j = 3
a.k = 5
after hiding:
[+] ... ( doing stuff about a )
2017.10.17 EDIT:
turns out VS Code implemented a very similar feature called "Folding Regions" in VS Code 1.17.1 Update. link
You can use the following delimiters for code folding:
C/C++: #pragma region and #pragma endregion
C#: #region and #endregion
CSS: /* #region */ and /* #endregion */
Java: //region and //endregion
JavaScript: //#region and //#endregion and //region and //endregion
PHP: #region and #endregion
Powershell: #region and #endregion
Python: #region and #endregion
VB: #Region and #End Region
See https://github.com/Microsoft/vscode/issues/12146 ([folding] fold regions)
In the Insiders Build v1.70 now is the functionality and command to truly hide arbitrary lines of code. The command is
Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection
It is bound to Ctrl+K Ctrl+, by default. Select any lines you want to fold.
You can unfold those lines either by clicking the gutter folding controls or this command when the cursor is somewhere on the folded line:
Remove Manual Folding Ranges
editor.removeManualFoldingRanges
The above command is bound to Ctrl+K Ctrl+. by default.
Unfortunately, it doesn't appear that VSCode currently allows you to hide an arbitrary selection of code like Visual Studio does via Ctrl+M,Ctrl+H. For now you could use the code folding feature, which depends on indentation. That is, if you indent the code you want to hide, you could then collapse it via Ctrl+Shift+[, like so:
Obviously, this is kind of an ugly solution to your problem; it requires multiple steps and makes actual changes to the file. Also, it's clearly useless if you're writing in a whitespace-dependent language like Python, but I don't think you are going to find a better solution short of finding an extension (or writing one yourself). It also might be worth posting an issue on the official VSCode GitHub repo if this feature is important to you.
Here is the vs code documentation for folding a selection.
To hide: Highlight the lines you want to fold then press Ctrl+K then Ctrl+,
To unhide: Just click the ">" icon to the left of the row of the folded code or press Ctrl+K then Ctrl+.
Comment with a delimiter with decreased indentation.
Hiding then works as in nested, with the little arrow on the left.
see here
# Below here comes the code to hide.
a = ClassA()
a.bar()
a.i = 2
a.j = 3
a.k = 5
Related
I've been transitioning to using VS Code for my python projects after previously working with the full Visual Studio, and some of the key bindings/features I'm used to in Visual Studio I can't find the equivalent for in VS Code. I'm not sure if the bindings are different or if the feature doesn't exist.
One feature in particular that I can't figure out is if it is possible to do multi-line select past line endings. In Visual Studio, using Alt + Click + Drag, lets you create a multi-line cursor or box selection, that can extend past line ends, implicitly adding spaces as needed so that the right-most side of the box stays uniform. In VS Code, if you drag the selection past the end of a line, the selection box won't go past the end of the line, even if other lines in the selection extend past it. In Visual Studio, this feature even goes further, as you could Alt + Click + Drag even in areas with no characters as all, creating a multiline cursor or box selection to the right of all existing line ends.
This isn't an essential feature, but it's very handy in making code easy to read. For example, when assigning several dictionary entries all at once, with varying key lengths. Is it possible to do something like this in VS Code?
Edit: The feature I'm looking for is virtual spaces (thank you Mark for providing the feature name), which seems to be an outstanding feature request in VS Code.
The short answer is no, vscode does not have a box select, past line ends, built-in. VS Code does not have the concept of virtual spaces which would be necessary to make this work yet.
Below is the issue, lots of comments, not that many upvotes. Upvote it.
https://github.com/microsoft/vscode/issues/5402
Visual Studio Code 1.24.1
While I was working on something today. It prompted me to do an update which I did (Update was to 1.24.1). I'm not sure if I hit a shortcut accidentally at about this same time or if this was caused by the update.
But I seem to no longer be able to use comments as a fold point.
However again, I'm not sure if I hit a shortcut of some sort, or if this was caused by the patch.
and my googlefu did not help me find an answer for visual studio code. Found many old topics about visual studio (prof not code) and for other editors. but couldn't find a topic specific to VSC.
I liked to use comments as fold points \ section headers.
Example of comments I used to use as fold points
Is this a bug in VSC 1.24.1 or did I hit a shortcut I'm unaware of?
VS Code has a method of marking the start and end of a region that can be folded and expanded easily. And also provide it a name/short description that'll always be visible.
I've tried this on Javascript code and I believe it'll work on any language in VS Code. And you can have anything in between the start and end of region - comments, few lines or code, entire functions.
In the absence of proper code folding, this is a pretty good work around that'll work for all languages on VS Code.
//#region <REGION NAME>
< You can put any type of code in here - some lines of code, functions or single or multi-line comments.
//#endregion
For python, simply omit the // in the demarcation lines, since # is a valid comment indicator:
#region <REGION NAME>
...
# any code goes here, including multiple comment lines
...
#endregion
A kind of hack I found for react is using empty tags for example
<>
{/*
Your commented code
*/}
</>
This allows you to fold the commented code between the empty tags. You can go a step further and add regions as mentioned in the other answer to add some kind of description to it
How do I fold or collapse an arbitrary selection of code in Visual Studio Code? Is this feature supported?
Of course Sublime and Atom know this for ages.
Update for v1.70
In the Insiders Build v1.70 now is the functionality and command to truly hide arbitrary lines of code. The command is
Create Manual Folding Range from Selection
editor.createFoldingRangeFromSelection
It is bound to Ctrl+K Ctrl+, by default.
And
Remove Manual Folding Ranges
editor.removeManualFoldingRanges
It is bound to Ctrl+K Ctrl+. by default.
Still not supported. The proposed solutions here are not for the original question, which is to highlight any code and fold it--not to fold formal code blocks.
VS Code now allows arbitrary blocks of code to be marked with // #region and // #endregion to make them collapsible.
// #region Hello
console.log("Hello world")
// #endregion
Is it possible to customize the way code folding works in Visual Studio Code?
I use a common pattern of defining regions of code across a variety of different document types.
So, for XML I wrap sections of text with <!-- #region --> and <!-- #endregion -->
For c#, I use #region to #endregion,
For TypeScript/Javascript, I use /* #region */ and /* #endregion */.
In full Visual Studio (not VS Code), I have a custom extension which snoops for the pattern across document types, and creates folds based on that, allowing me to create neat, custom document outlines. I'd like to use the same pattern in Visual Studio Code. Is it possible to create a custom VS Code extension which detects these comment patterns, and somehow tags folds based on the patterns?
FoldingRangeProvider can be used if you are looking to contribute custom folding logic in an extension.
Be sure to set your VS Code version in engines in package.json to 1.23, the version that introduced this.
Here's how you'd use one.
export function activate(context: ExtensionContext) {
languages.registerFoldingRangeProvider({ scheme: 'file', language: 'markdown' }, new MyFoldingRangeProvider());
}
class MyFoldingRangeProvider implements FoldingRangeProvider {
provideFoldingRanges(document: TextDocument, context: FoldingContext, token: CancellationToken): FoldingRange[] {
return detectRanges().map(({ lineStart, lineEnd }) => new FoldingRange(lineStart, lineEnd));
}
}
On August 6th 2022 the feature "Fold Selection" was added to "V.S. Code" as part of the sem-minor v1.70.0 release. This new feature gives users complete control over line folds, by total I mean, when & where. Fold Selection allows you to fold whatever code you want, wherever you want.
Below is a GIF image that was appended to the official v1.70.0 release notes
I copy & pasted this image because..,
A. The image shows how the new feature works, and...
B. because it shows that the feature works much like line folding does in IDEs — i.e. VS-22, Intelli-J, CLion, etc...
V.S. Code is actually the first editor I ever used, and I stuck with it for the last 5 years, but one thing I noticed on day 1 of test driving V.S. Code was that it did not have this feature.
Using the new Fold Selection Feature
You can use the feature via the quick input, just type "Fold Selection" until the option pops up for you to select, however, I perfer customizing a keybinding for it.
Here is the default configuration for fold selection in the default keyboard shortcuts JSON document:
{
"key": "ctrl+k ctrl+,",
"command": "editor.createFoldingRangeFromSelection",
"when": "editorTextFocus && foldingEnabled"
}
How to configure the above snippet is beyond the scope of this post, but I suggest keeping the when statement as it is configured above (which is the default).
You can use the keybinding shown in the JSON snippet w/o any configuration, which would be:
CTRL + K CTRL+,
...however, vscode has to attach most all commands to some keyboard shortcut. Most people cannot remember all of the commands and shortcuts, so for features you use often, it makes since to attach it to more practicle option, I like to use something like
CTRL + SHIFT + SPACE SPACE
Its almost like quickly pressing space twice.
Anyways, this is a far better option than what was available before, cheers!
CLICK HERE TO READ THE OFFICIAL RELEASE NOTES
There are three ways to achieve customized folding in a VSCode extension.
You can define regex as folding markers in a [language-name].configuration.json file. (However, we don't have much customization with this approach)
{
"folding": {
"markers": {
"start": "starting regex",
"end": "ending regex"
}
}
}
You can define a FoldingRangeProvider from within the extension as described in this answer. FoldingRange in vscode package supports folding customization with startLine, endLine, and foldingKind.
You can use Language Server support with textDocument/foldingRange. FoldingRange in the vscode-languageserver-protocol supports folding customization with startLine, endLine, startCharacter, endCharacter, and foldingKind.
Check this for more details.
Unfortunately, not at the moment. There is a an open issue in github for this very topic.
I'm quite new to cc-mode and I'd like to configure it to allow me to freely format and use tabs in multiline comments. This is important to me because I want to use cog.py in my source file and need to be able to format the python source in the comment correctly. I'd be ok with comments not beeing autoindented at all, however I'd like to keep auto indenting the rest of the source code.
Example:
...
/*
[[[cog
import cog
for x in ['a','b','c']:
>cog.outl(x)
]]]
*/
...
In the line marked with > I'd like to press TAB to indent the line. cc-mode simply does nothing at all if i do so. I could use spaces there (which is inconvenient) but every (semi-)automatic re-indentation of this block would cause the spaces to vanish and therefore the python code to be incorrectly indented (which is what happens if i happen to press tab somewhere on this line after indenting it with spaces).
I tried to start emacs without my .init to be sure this is default behavior and not modified by my configuration so far. I've done google searches and read the documentation of the cc-mode variables / functions I stumbled upon (cc-mode online docs) while searching for a solution (i.e. c-indent-comments-syntactically-p, c-indent-command, c-tab-always-indent,...) but none of these seemed to solve my question.
EDIT1:
Thanks to abo-abo's idea of a "multi-major-mode" setup i've stumbled upon mmm-mode and have set up automatic switching to python mode for a cog section, which fixes most of my problems.
The only remaining problem is reindenting the whole file or a region containing a cog section. Can I somehow tell cc-mode to not change anything in comments while reindenting the file? mmm-mode + that would be a perfect solution for me.
You can use M-i to force a tab indent on the lines that you want, so you can use it to indent your comments.
You can also change your comments to use // instead. Just select your python code snippet, and do M-x comment-region:
// def foo(x):
// print 'hi'
Then the autoindent won't mess up your indentation.