I want vscode to open definition of a function/method in another split pane where the file is already open. Is there a shortcut/way to do this ?
I open my spec and code into split panes (say left side is spec and right side the code being tested). When I ctrl-click on the function under test in the spec (function call) it opens the same file in the spec pane. Why ? Why can't it scroll to the function in the already open file in the other pane ?
Or if there is some trick I am missing.
Related
When switching to a multi-column layout in VS Code (View > Editor Layout > Two Columns / workbench.action.editorLayoutTwoColumns), is there a way to make the new column split at the currently active file, so that open editors to the right of the current file are put into the new column/group, rather than the new column being empty?
By way of example:
Here I have 4 open editors
When I open a second column, it is empty:
But I'm wondering if there is a way that to get the following at the point of using a multi-column view (relative to the active file I have open at the time):
I guess this shortcut can do that:
shortcut: View:Move Editor into next group
I set the keybinding with "shift+command+left arrow"
There are 4 open editors and the active one is command.md:
I press the shortcut I set, it looks like this:
The active editor is open in the second column at a time.
Hope this information is useful.
I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.
I searched in vscode site but I couldn't find information on the following:
Is there any way to search definition in other files.
For example:
In sublime text I can open command pallette (ctrl+p) and write 'User.php#delete' - this will find the method and if i click enter I will go the the specific file and in the line where method 'delete' is.
Does the functionality exist in VSCode (or with extension).
Thanks
There are multiple options to search function/definition.
According to your convenience, you can choose one of the below options :
Best shortcut: Ctrl+Shift+O and type your function name.
Press Ctrl+P for "quick open", then you can use # or #: The latter is handy to see all the symbols in the file grouped by classes, constants, fields, methods
Press Ctrl+T to searches across files, not just the current file.
Hover the method and press crtl. The method will be underlined and show a tooltip with definition. Mouse left click = go to definition.
yes, in command palete enter # symbol (without preceding >) end method name.
Is there a way to show context for search results in Visual Studio Code?
By default, if I search "debug" for example I might get 2 lines of code returned.
filea.rb
def debug(str)
fileb.js
function debug(str) {
I want to see what the code is for, say, 3 lines above and below each match.
filea.rb
def somefunca
puts "some func a"
end
def debug(str)
puts str.inspect
end
def somefuncb
Is it possible to add context like this to the search results?
v1.41 is adding a preview of a feature which will display search results in an editor thus allowing for some context lines around the actual search result. See search.enableSearchEditorPreview
Preview: Search Editor
In this milestone, we've started work on showing the results of a
search in an editor. This provides much more space to view search
results and allows users to maintain multiple collections of search
results simultaneously. With this release, in a search editor you can:
Navigate to results using Go to Definition-family commands, including Peek Definition and Open Definition to Side.
Rerun a search to update the list of results
View lines of context surrounding a result
Persist results to disk to be referenced later or even tracked in SCM
We will be continuing to add functionality and increase usability in
the coming releases.
Note: You can preview this feature by enabling the setting
search.enableSearchEditorPreviewstrong text.
v1.42 is adding a bit more functionality, see https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#search-editor. Like selecting the context width around the search result and running another search right in the search editor itself.
By the way, you can directly open a search editor without first doing a search in the panel with the command New Search Editor (search.action.openNewEditor) currently unbound (and renamed in v1.48). That command will always open a new Search Editor.
If instead, you wish to re-use a Search Editor (rather than opening a new one), a command is being added to v1.48:
Open Search Editor : search.action.openEditor // also unbound by default
v1.43 release notes https://code.visualstudio.com/updates/v1_43#_search-editors
In a search editor, results can be navigated to using "Go to
Definition" actions, such as kb(editor.action.revealDefinition) to
open the source location in the current editor group, or
kb(editor.action.revealDefinitionAside) to open the location in an editor to
the side. Additionally, double clicking can optionally open the source
location, configurable with the
search.searchEditor.doubleClickBehaviour setting.
You can open a new search editor with the Search Editor: Open New
Search Editor command, or using the "Open New Search Editor" button at
the top of the search viewlet. Alternatively, you can copy your
existing results from a search viewlet search over to a search editor
with the "Open in Editor" link added to the top of the results tree,
or the Search Editor: Open Reuslts in Editor command.
Note You can try out the experimental Search Editor: Apply Changes
extension to synchronize edits you make in a search editor back to
source files:
------------------------------- see edit below:
Showing the context lines does not appear to be persistent between uses of the search editor. But Alt+L acts as a toggle to show/hide the context. The value chosen for the number of context lines is persistent.
However, in v1.44 and the Insiders' Build are two new commands fro increasing/decreasing the number of context lines surrounding each search result:
{
"key": "alt+-",
"command": "decreaseSearchEditorContextLines",
"when": "inSearchEditor"
},
{
"key": "alt+=",
"command": "increaseSearchEditorContextLines",
"when": "inSearchEditor"
}
They are unbound by default - these are just sample keybindings. The context lines input box does not need to be visible for these to work. So Alt+L to enable context lines or these new commands to change the number.
In v1.46 there is a new setting to make the amount of context lines shown persistent:
"search.searchEditor.defaultNumberOfContextLines": 4, // default is now 1
and
search.searchEditor.reusePriorSearchConfiguration - Reuse the last active search editor's configuration when creating a new search editor
(defaultNumberOfContextLines seems to take precedence over reusePriorSearchConfiguration)
See v1.46 release notes: Search Editor improvements
You can single click the results which will open the relevant code in a "preview" editor. With the preview you can navigate the results list (clicking, ↑/↓, ctrl+n/ctrl+p) without opening new editors.
But it sounds like you want to avoid the preview altogether. In that case, here's a feature request, but it looks like it was closed prematurely and needs to be submitted again. The only solution that was actually implemented was a setting for placing the search results in the panel, rather than the sidebar: "search.location": "panel".
I've got a component-based folder structure in my project. It is a bunch of component-folders with one index.js file each.
Is it possible to make Visual Studio Code display the parent folder name in the file tabs? Or am I limited to seeing a bunch of tabs that all display index.js and nothing else?
You can configure Visual Studio Code to always show parent folder names in the tabs! In your User Settings, just add this line: "workbench.editor.labelFormat": "short" (other values are "long", "medium" or "default")
Result: the files init/views.js, init/routes.js and plugins/modal.js will be presented as such:
Another option is the User Setting "breadcrumbs.enabled": true which will give you an entire row of breadcrumbs showing the complete file path:
PS: To open User Settings use the File-menu → Preferences → Settings → User Settings. To view the settings in a JSON format just click the {} icon in the top right corner.
Go to the main menu File → Preferences → Settings. And search for (Cmd + F on Mac; Ctrl + F on Windows and Linux) workbench label format.
Choose the short option.
Visual Studio Code has now improved their tab-UI to resolve this issue.
When you've opened multiple tabs with the same filename, Visual Studio Code will automatically display the parent foldername in each of those tabs.
Here's an example: I've opened event.js and two index.js files. Visual Studio Code automatically decides it's a good idea to display the foldername for the index.js files :)
It pretty much solved the bulk of my problem.
I know this is too late to answer, but in case someone is looking for the file path to show on the title bar, you can follow this:
Open settings (command + ,)
Search for title
You'll see something like activeEditorShort, replace it with activeEditorLong
Save
Source:
https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330
Step 1: Go to File > Preferences > Settings
Step 2: search for "workbench.editor.labelFormat"
Step 3: select medium from a drop-down
You can install the nice-index extension for a better experience dealing with index files.
However, as of now, it only works when you have more than one index file open. This can be resolved by changing labelFormat to "short", as other answers suggest.
In VSCode 1.53 you can use thees settings:
Controls the window title based on the active editor. Variables are substituted based on the context:
${activeEditorShort}: the file name (e.g. myFile.txt).
${activeEditorMedium}: the path of the file relative to the workspace folder (e.g. myFolder/myFileFolder/myFile.txt).
${activeEditorLong}: the full path of the file (e.g. /Users/Development/myFolder/myFileFolder/myFile.txt).
${activeFolderShort}: the name of the folder the file is contained in (e.g. myFileFolder).
${activeFolderMedium}: the path of the folder the file is contained in, relative to the workspace folder (e.g. myFolder/myFileFolder).
${activeFolderLong}: the full path of the folder the file is contained in (e.g. /Users/Development/myFolder/myFileFolder).
${folderName}: name of the workspace folder the file is contained in (e.g. myFolder).
${folderPath}: file path of the workspace folder the file is contained in (e.g. /Users/Development/myFolder).
${rootName}: name of the opened workspace or folder (e.g. myFolder or myWorkspace).
${rootPath}: file path of the opened workspace or folder (e.g. /Users/Development/myWorkspace).
${appName}: e.g. VS Code.
${remoteName}: e.g. SSH
${dirty}: a dirty indicator if the active editor is dirty.
${separator}: a conditional separator (" - ") that only shows when surrounded by variables with values or static text.