On the Settings > Preferences > Source we can enable Code Folding on the Chrome Dev. But I didn't find a way to use keyboard shortcuts to, eg. collapse all, etc. Did look for in the Shortcuts section window and in the Full Listings also, but no success. I'm assuming we can't do it on the current version. In case someone knows about it, I'll be very happy to know it too.
There's no such hotkey so try suggesting this feature on https://crbug.com.
Meanwhile you can add it manually:
make sure "code folding" is enabled in devtools settings (in the "Sources" group)
run this code in devtools-on-devtools (see the instruction below)
[
['Shift-Ctrl-[', 'fold'],
['Shift-Ctrl-]', 'unfold'],
['Shift-Ctrl--', 'foldAll'],
['Shift-Ctrl-=', 'unfoldAll'],
].forEach(([key, cmd]) => {
CodeMirror.keyMap['devtools-common'][key] = CodeMirror.commands[cmd];
});
close devtools-on-devtools
This will last only for the current devtools instance.
For convenience you can save the code in snippets and run it later from there or by typing the snippet name in the commands palette (Ctrl-P or Cmd-P hotkey).
How to open devtools-on-devtools:
Open devtools first and switch its Dock side in the menu to a detached (floating) window
in the now detached devtools press CtrlShifti or ⌘⌥i on MacOS,
which will open devtools-on-devtools in a new window
The top answer is great, but chrome devtools has been updated since to use CodeMirror 6, which requires a codeMirror instance to be passed to the functions:
CodeMirror.commands.foldAll();
Uncaught TypeError: Cannot read properties of undefined (reading 'operation')
at CodeMirror.commands.foldAll (foldcode.js:105:8)
at <anonymous>:1:21
line 104-109 from foldcode.js:
CodeMirror.commands.foldAll = function(cm) {
cm.operation(function() {
for (var i = cm.firstLine(), e = cm.lastLine(); i <= e; i++)
cm.foldCode(CodeMirror.Pos(i, 0), null, "fold");
});
};
I could solve it by debugging a codemirror event to save the cm instance as a global variable (temp1), but I would appreciate if someone could have a better solution to this that can be automated.
Edit: I found the codeMirror instance at document.getElementsByClassName("CodeMirror")[1].CodeMirror, so a working solution is:
CodeMirror.commands.foldAll(document.getElementsByClassName("CodeMirror")[1].CodeMirror)
the shortcut setting still doesn't seem to work though.
(with
CodeMirror.keyMap["devtools-common"]["Ctrl-k"]=function()
{let {CodeMirror:instance}=
document.getElementsByClassName("CodeMirror")[1];
CodeMirror.commands.foldAll(instance);
};
)
Edit 2: oh, it just needed capital K, so "Ctrl-K". Now the shortcut works too. hurrah
btw i've commented on the folding feature's thread on chromium bugtracker to include this, because it is incredibly useful for skimming files while editing/reading. No response yet, idk if anyone's even paying attention to comments there anymore:
https://bugs.chromium.org/p/chromium/issues/detail?id=328431
CodeMirror 6 supports the folding shortcuts natively (per foldKeymap):
Ctrl-Shift-[ (Cmd-Alt-[ on macOS): Fold the lines that are selected, if possible.
Ctrl-Shift-] (Cmd-Alt-] on macOS): Unfold folded ranges on selected lines.
Ctrl-Alt-[: Fold all top-level foldable ranges.
Ctrl-Alt-]: Unfold all folded code.
When I want to reference a definition I press ctrl and left click on the variable, VSCode brings me to the definition. The problem is if a module has both index.js and index.d.ts, VS Code will bring me to the index.d.ts file which has no meaningful logic code. It's totally unusable to debug or to understand the implementation.
var cookieSession = require('cookie-session')
var express = require('express')
For example, ctrl + left click on the cookie-session VSCode brings me to ./node_modules/#types/cookie-session/index.d.ts:115 instead of ./node_modules/cookie-session/index.js where it shows:
declare module "cookie-session" {
import express = require('express');
function cookieSession(options?: CookieSessionInterfaces.CookieSessionOptions): express.RequestHandler;
export = cookieSession;
}
I want to be able to show a CompletionList in a specified editor/position to the user programmatically (not based on user typing a trigger character). Is this possible?
Actually, this is possible by executing the "editor.action.triggerSuggest" command. This is the same command that gets executed when you press Ctrl+Space to manually invoke completion.
vscode.commands.executeCommand("editor.action.triggerSuggest");
If you want to control where the popup opens, simply change the active editor + selection beforehand:
var file = vscode.workspace.workspaceFolders[0].uri.fsPath + "/foo.txt";
vscode.workspace.openTextDocument(file).then(document => {
vscode.window.showTextDocument(document).then(editor => {
editor.selection = new vscode.Selection(10, 0, 10, 0);
vscode.commands.executeCommand("editor.action.triggerSuggest");
});
});
Original: As of today (12/12/2018), this is not possible.
Edit: Attempted to delete this post in favor of #Gama11's answer below but cannot delete accepted answers. I'm not 100% positive the editor.action.triggerSuggest is supported but it works.
#Gama11's response below: https://stackoverflow.com/a/53804882/1574622
I'm trying to open the active file in a new viewcolumn, and fold a tag. The folding commands work fine in activeTextEditor:
// Fold based on linenumber
let range = editor.document.lineAt(lineNumber).range;
editor.selection = new vscode.Selection(range.start, range.end);
editor.revealRange(range);
commands.executeCommand('editor.fold');
Now I would like to do the same in a newly opened file:
// Open the same file in a new column
// at this time editor.ViewColum is One
commands.executeCommand('vscode.open', Uri.file(editor.document.fileName), ViewColumn.Two);
// Try to get that editor
let newEditor = vscode.window.visibleTextEditors.find(x=> x.viewColumn===viewColumn.Two && x.document.fileName===fileName)
The problem is that newEditor is not found, becouse the newly opened document has ViewColumn undefined.
Any idea how to solve this?
Thanks
The vs commands returns a promise. Needed to await that and everything works fine.
Is there a way to disable the ctrl-click 'peek' feature in Visual Studio Code? Ideally I'd like ctrl-click to just open the file containing the definition in a new tab.
Edit: I submitted an issue to at least make it less confusing. Apparently my terminology is slightly wrong.
To clarify, there are two actions:
Right-click -> Peek Definition
Right-click -> Go to Definition (bound to ctrl-click)
Their behaviour is as follows:
PD, Single Definition
Opens inline interface showing definition.
PD, Multiple Definitions
Opens inline interface showing definitions.
GtD, Single Definition
Open the file containing the definition.
GtD, Multiple Definitions
Pick one of the definitions at random, open that file, and an inline interface showing all the definitions.
All of those are fine except the last. Doing both things results in a really redundant and confusing UI like this:
There should be a way to have one of these behaviours:
Pick one of the definitions at random, open that file.
Or:
Open inline interface showing all the definitions (in the current file)
I've made a pull request to fix this https://github.com/Microsoft/vscode/pull/68023, but until then here's a temp fix that patches the VSCode installation files. You'll need to re-apply every update.
EDIT: The fix was merged into vscode. It should be in later versions.
With this fix Ctrl+Click will:
Use peek if there are multiple definitions
When using peek, will not navigate to the best match in the editor and cause you to lose your spot
If there is only one definition, it will navigate to the best match and NOT open peek.
Figure out what the function that needs to be patched looks like. The method is DefinitionAction.prototype._onResult(editorService, editor, model)
https://github.com/Microsoft/vscode/blob/e82d8bb6e6c8fd07ca16eacd16663ebd221187cb/src/vs/editor/contrib/goToDefinition/goToDefinitionCommands.ts#L128
Go to the VSCode installation directory. %LocalAppData%\Programs\Microsoft VS Code and right click and open the directory in VSCode so that we can use VSCode's search feature to search for text in every file.
Search for _onResult and evaluate every result, checking to see if the signature and body matches what we are expecting from the function we saw in step 1.
We know from step 1, the function _openReference is nearby. Use that to narrow the search.
I found it in workbench.main.js line 2454. Use bracket matching to find the end or know that it ends immediately before t.prototype._openReference
The function when formatted is the following (async func is compiled down to statemachine, that's why it looks nothing like the source typescript):
t.prototype._onResult = function (e, t, r) {
return i(this, void 0, void 0, function () {
var i, s, a;
return n(this, function (n) {
switch (n.label) {
case 0:
return i = r.getAriaMessage(), o.alert(i), this._configuration.openInPeek ? (this._openInPeek(e, t, r), [3, 3]) : [3, 1];
case 1:
return s = r.nearestReference(t.getModel().uri, t.getPosition()), [4, this._openReference(t, e, s, this._configuration.openToSide)];
case 2:
(a = n.sent()) && r.references.length > 1 ? this._openInPeek(e, a, r) : r.dispose(), n.label = 3;
case 3:
return [2]
}
})
})
}
Replace the function with the following (if using same version) or format and edit the function you found to be similar to this example. Note the o variable is the global\window object and subject to change.
t.prototype._onResult = function (e, t, r) {
return i(this, void 0, void 0, function () {
return n(this, function (n) {
switch (n.label) {
case 0:
return r.getAriaMessage(), o.alert(r.getAriaMessage()), this._configuration.openInPeek || r.references.length > 1 ? (this._openInPeek(e, t, r), [3, 3]) : [3, 1];
case 1:
return [4, this._openReference(t, e, r.nearestReference(t.getModel().uri, t.getPosition()), this._configuration.openToSide)];
case 2:
r.dispose(), n.label = 3;
case 3:
return [2]
}
})
})
}
Launch VSCode. You will get a Your Code installation appears to be corrupt. Please reinstall. Just hit the gear icon and click Don't Show Again.
I tried to find a workaround changing the behavior of CMD + Click to go to implementation but it appears there is no solution yet?
The VSCode documentation shows its set by default to go to definition without a way to modify it:
https://code.visualstudio.com/docs/editor/editingevolved
On my machine (Mac) if I press CMD + Click or F12 on a method it will direct me to the Peek view on the definition, however CMD+F12 will direct me to the implementation without the peek appearing.
This seems to have been fixed in a newer version. If I now hover over FOO in foo.cpp, I see the normal tooltip #define FOO 2. If I press Ctrl, the message expands to add the text "Click to show 2 definitions" and if I click while still holding Ctrl, I get the peek window, as requested.