Normally when I choose either "Go to Definition" or "Go to Implementations" from the context menu on a function name of a function definition in a JavaScript file, or press F12 or CTRL+Click on the function name, VS Code shows in a popup all the places across the project where that function is used.
For some reason this doesn't work with some of my projects.
Here is a simple repro structure that still has the problem for me:
foo.js
bar
|_ bar.js
// foo.js
import bar from './bar/bar';
export const foo = () => {
bar();
};
// bar/bar.js
export default function bar() {
console.log('function bar called')
}
That's all.
The command works fine when both files are open in the editor. The command also works if both files are in the same directory, no matter root or deeper. If I rename or move one of the files, the changes get correctly automatically reflected in the import line of the other file, which means VS Code understands the file structure.
Why doesn't the definitions / implementations popup appear, neither for .js files, nor for .ts files?
You must include a jsconfig.json or a tsconfig.json file in the root of your project in order for the InteliSense to understand that you are indeed inside a JavaScript project and to link the files together rather than treating them as separate entities. See details on jsconfig.json in VS Code documentation.
Related
Often, I am editing files that reference other files, and I would like to be able to Cmd-click the filenames to open the referenced file.
An example would be a configuration file that points to another config file, cf. the following JSON snippet:
"structureDefinitionFilename": {
"doc": "Filename of the Structure definitions",
"default": "./structureDefinition.json"
},
When my cursor is on the ./structureDefinition.json, I would like to be able to run a command that opens that file. (I am not using the mouse a lot, so I was just mentioning Cmd-click as an example.)
Another example would be Python source code which opens a data file:
with open('data/structures.lst') as f:
...
Again, it would be nice to be able to quickly open data/structures.lst.
Is there any built-in method or an extension that allows this?
Are there any extensions/features in vs-code which could let me know where the current file is imported? I usually do a global search of the filename but it is time consuming when the file name is similar to any variable or there are similar named files.
You can do a right-click on every function / variable or class. Then you choose "Find all references" to show where each function / variable or class is called.
For this you do not need an extension, because it is a standard feature of vscode
- find unused exports in project:
you can use this extension in vscode to find all unused exports
+ find name references (e.g. used exports) in project:
click on name then press shift+alt+F12
NO EXTENSION REQUIRED
Yes, We can find the references of a file in VSCODE like this:
Right-click on the file and then select Find References.
VSCODE will show all the references/imports of the file.
image reference
Right-click > Go to References (Shift + F12)
There is also an extension to change the appearance of how references show https://marketplace.visualstudio.com/items?itemName=jrieken.references-plusplus
If you are limiting your search to the current open workspace / folder, you can
do a search for 'import' using the magnifying glass or pressing ctrl+shift+s
open the results in editor by either clicking the link that says 'Open in editor' or by pressing alt+enter
In the document that opens, search for the name of your module.
In this way you will discover all of the imports that involve your module, regardless of whether you have used 'import mymodule' or 'from mymodule import myfunction' or anything else. I'm specifically thinking of how I'd structure a python project, but if you are using another language, you can alter the search in a way that works for the way your language does imports.
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'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.
How would you filter the files shown in the folder view in Visual Studio Code?
Reference: Filter files shown in folder
Hiding files and folders
The files.exclude setting lets you define patterns to hide files and folders from several places in VS Code like the explorer and search. Once defined, files and folders matching any of the patterns will be hidden.
{
"files.exclude": {
"**/*.js": true
}
}
Hide derived resources
If you use a language that compiles to another file at the same location of the source file, like TypeScript does to JavaScript, you can easily set an expression to hide those derived files:
"**/*.js": { "when": "$(basename).ts"}
Such a pattern will match on any JavaScript file (**/*.js), but only if a sibling file with the same name and extension, *.ts in this example, is present. The same technique can be used for other transpiled languages, like Coffee Script or Less/Sass, too.
Source: VS Code v0.5.0 (July 2015)
In version after VScode 1.70 (July 2022) all you need to do is press Ctrl+F or F3 to search.
Please refer following post
Searching in Explorer panel after VSCode 1.70
Only applicable for v1.69 and below.
Step #1
Click on Explorer window. This is critical as without focus on Explorer it will not work.
Step #2
Start Typing name you want to filter. It's weird that there is no textbox to take input but... take a leap of faith and type. You will see your typed text in top-right corner in brown background. Now hover on that text.
Step #3
Click on 3 stacked lines to filter..
They look like hamburger menu but they are not. They are saying if it's filtered or not. They are toggled between filtered and just highlight. So, make sure they are like inverted pyramid.
That's it. It should be filtered now.
If you only want to change the setting for this project, then do the following:
File > Save Workspace As > ... enter your {project name}
Then open file: {project name}.code-workspace
And update section settings.
Sample:
{
"folders": [
{
"path": "."
}
],
"settings": {
"files.exclude": {
"**/*.log": true
}
}
}
VScode 1.70 (July 2022) should improve on this "tree filter" feature.
(Available today in Code insiders)
See issue 70646 and PR 152481:
Support find widget in lists/trees
This PR replaces the existing list/tree type filter:
with an bona fide find widget:
While a seemingly simple change, this has some (desired) consequences when searching/filtering in trees. Namely:
We will restore simple keyboard navigation by default.
That is: pressing the letter A will focus the next element which starts with A.
Initiating a search operation requires pressing Ctrl-F or F3, like the editor.
While searching, focus is in the find input box as opposed to the list itself.
Pressing DownArrow will focus the first list element which was found.
We'll preserve all custom behavior of context keys, eg. used by the VIM extension).
In VIM, the pre-existing / command will trigger simple keyboard navigation, as opposed to opening the find widget.
The VIM extension has the option to change this behavior themselves.
And:
In general:
Keyboard navigation is now called type navigation
Filter on type is now called find mode, aligned with a new find concept
Settings
workbench.list.keyboardNavigation has been renamed to workbench.list.defaultFindMode
workbench.list.automaticKeyboardNavigation has been deleted
Commands
list.toggleKeyboardNavigation has been renamed to list.triggerTypeNavigation
list.find has been added
list.closeFind has been added
list.toggleFilterOnType has been renamed to list.toggleFindMode
Context Keys
Mainly used by the vim extension:
listSupportsKeyboardNavigation has been renamed to listSupportsTypeNavigation
listAutomaticKeyboardNavigation has been renamed to listTypeNavigationMode
"With the focus on the File Explorer start to type part of the file name you want to match.You will see a filter box in the top-right of the File Explorer showing what you have typed so far and matching file names will be highlighted."
"Hovering over the filter box and selecting Enable Filter on Type will show only matching files/folders."
documentation: https://code.visualstudio.com/docs/getstarted/userinterface#_filtering-the-document-tree