How do I show reference count in Visual Studio Code? - visual-studio-code

I want to show references count in Visual Studio Code. How can I do it?

This feature is called CodeLens.
In Visual Studio find it in menu Options → Text Editor → All languages → CodeLens.
And in Visual Studio Code it is in menu File → Preferences → Settings → "editor.codeLens": true

Visual Studio Code version 1.28.2:
You need to add this to User Settings:
Menu File → Preferences → Settings:
"typescript.referencesCodeLens.enabled": true,

The menu structure ususally changes during years.
So in VSCode v.1.43 please follow the next steps:
Click Gear icon and go to Settings
In the "Settings" window in the input field type "reference", click "User" tab, under "Extensions" click "Typescript" and find "Reference Code Lens" checkboxes for javascript/typescript.
Checking/unchecking checkboxes will automatically apply your changes.

The simple process for show the reference count.
Step 1: From Settings – Type CodeLens and Enable the Editor: Code Lens and JavaScript > References Code Lens to check the references in JavaScript File.
Step 2: Then open any of your JavaScript file to identify the References of Property or Method in the file.
If any case, you can't show the reference, then enable(yes) assets to
build and debug in own project.
If you'll click to the yes button of assets then, you'll seen the .vscode file

Sometimes you don't want to turn it on/off completely, but toggle it on/off with a keyboard shortcut. If so, the following may help:
Install an extension: https://marketplace.visualstudio.com/items?itemName=rebornix.toggle
and configure it for your desires. (Preferences -> Keyboard Shortcuts -> keybindings.json)
For Example for TypeScript:
{
"key": "F4",
"command": "toggle",
"when": "editorTextFocus",
"args": {
"id": "myChosenIdWhatEverItIs",
"value": [
{
"typescript.referencesCodeLens.enabled": true,
},
{
"typescript.referencesCodeLens.enabled": false,
}
]
}
}

In Visual Studio 2019 Community it's in Tools → Options → Text Editor → All Languages → CodeLens.

On Visual Studio 2019 Community Edition, just hit Ctrl+Q or look for the text box next to Help, enter CodeLens there. That is by far the quickest and easiest.
CodeLens on Search Enable

Related

Is there a VS Code shortcut to edit the current global "settings.json" file

I frequently have to edit my global settings.json, but not frequently enough to be able to use the open recent menu in VS Code.
Is there a key binding or single button I can press that opens my current settings.json in the current VS Code window? It's irritating to have to keep navigating to /Users/ME/Library/Application\ Support/Code/User/settings.json every time.
Not by default but, if you open up File | Preferences | Keyboard Shortcuts and search for JSON, you'll find there's a Preferences: Open Settings (JSON) item that you can assign a shortcut to.
I've set mine to Alt, to make it similar to Ctrl,, the workbench setting editor.
You can, of course, also store this in your global keybindings.json:
{
"key": "alt+,",
"command": "workbench.action.openSettingsJson"
}

How do I enable document map in Visual Studio Code?

In the Sublime text as well as in Notepad++ I can enable Document Map.
Here is a screenshot of the document map of Notepad++.
Minimap was added in Visual Studio Code 1.10. The release notes say:
To enable VS Code's Minimap, set "editor.minimap.enabled": true to
turn on the rendering of a Minimap for the current file.
To set the preference open VS User Settings (Preferences > Settings). This will open two side-by-side documents. Add the entry and set the value to true. In the side-by-side view you choose between changing the "User Settings" (global) or "Workspace Settings" (current workspace only).
{
"typescript.check.tscVersion": false,
"git.confirmSync": false,
"editor.minimap.enabled": true
}
In visual studio 2017 you can simply right click on the scroll bar and click on scroll bar Option. Then on the right panel you can chose to activate the mapping mode on the scroll bar.
I realise this post is about Visual Studio Code and not Visual Studio 2017, but the names are so similar that a lot of people won't know the difference and end up here anyway. To see a post specificaly about Visual Studio 2017, go look this question.

How to disable VS Code minimap in Windowed mode?

I did the following in Visual Studio Code:
settings.json => "editor.minimap.enabled": true
Open 2ed files side by side (windowed mode)
Minimap exists in both windows
This takes up too much room, but I still want to use the Minimap when I'm editing a single file in a single window. Is there a way to have the Minimap enabled for a single file, but disabled in side-by-side "Windowed" mode?
Toggle minimap command has been added since vscode 1.16. Hit command + shift + p and select View: Toggle Minimap.
There is no way to do this in VS Code. Currently there is only the "editor.minimap.enabled": false setting which can be true or false and either always enables the minimap or always disables it.
Unfortunately, as shown in this issue, there is also no "toggleMinimap" command to assign to keybindings.
You might find this extension useful, though, as it can be used to create a toggle minimap command:
settings:
"settings.cycle": [
{
"setting": "editor.minimap.enabled"
}
]
keybindings.json:
{
"key": "ctrl+shift+t",
"command": "settings.cycle.workbench.colorTheme",
"when": ""
}
Simplest way is go to:
View -> Toggle Minimap
Update:
In newer versions:
View -> Show Minimap
To remove/disable/hide VS Code Minimap,
Go to the View tab and uncheck this: View > Show Minimap
1) Go to File -> Preferences -> Keyboard Shortcuts
2) type in "View: minimap"
3) right click and add a key binding.
I like to use ctrl+m ("m" for minimap)
If there are existing key bindings, you can use another one, or click the existing one(s) listed, then right click them and remove the binding before repeating steps 2 and 3 above.
New option available,
View-> Show minimap (uncheck)
In Visual Studio Code Version 1.41.1. Go to
Files >> Preferences >> Settings
Select
Text Editor >> Minimap >> Uncheck Enabled checkbox
I didnt find "minimap", instead I found:
[Options]>>[Text Editor]>>[All Languages]>>[Scroll Bars]>>Behavior>>"Use map mode for vertical scroll bar"
I am not able to embed image yet, check link

How to disable the light bulb in Visual Studio Code

I love Visual Studio Code but I hate the little lightbulb. It seems to clash with the dropdown when you Ctrl+. on word.
How do you disable the lightbulb in Visual Studio Code?
Just to clarify - I always use the Ctrl+.. But on the first time when I try to navigate down the drop down menu the menu disappears and the lightbulb re-appears. I then have to Ctrl+. again to go down the drop down list and get the selection I want. I just want to disable the lightbulb itself, not other functionality such as the quick fixes.
There's a new option that you can use to disable that. Go to your settings file and add:
"editor.lightbulb.enabled": false
Go to: > File >Settings
Enter "bulb"
Click on the checkmark to remove it.
Seems to me that the arrangement of the lightbulb has changed since the answers above. In my version of VS Code, the easiest way to disable or enable the lightbulb is to just type lightbulb on the Setting search bar.
Go to Setting
Type "lightbulb" or "bulb" on the Setting's search bar,
Check or uncheck the "Enable the code action lightbulb in the
editor"
If you don't want to use the search bar: go to
File > Preferences > Settings > Text editor
Then scroll down the list to find "Enable the code action lightbulb in the editor". Check or uncheck as you prefer.
I'm not sure what you mean. You want to disable the visual element of the lightbulb? Or you want to eliminate "quickFix" altogether?
There is this keybinding which triggers the same action as the lightbulb:
{
"key": "ctrl+.",
"command": "editor.action.quickFix",
"when": "editorHasCodeActionsProvider && editorTextFocus && !editorReadonly"
}
If you are wanting to disable the keyboard shortcut you could do that by adding this line to keybindings.json
"key": "ctrl+.", "command": ""
If you want something ELSE mapped to "ctrl+.", then you can put that command in the command above.
If you're wanting to disable the lightbulb itself from appearing, I don't think that is possible.

How can I change keyboard shortcut bindings in Visual Studio Code?

Using Visual Studio Code what is the procedure to:
Remap a built in command's keyboard shortcut. For example, say, Open File (default is Ctrl+O, it's unlikely that anyone would actually change this, but the same process should probably apply for any built in shortcut).
Remap an extension command's keyboard shortcut, say the Bookmark extension's toggle-bookmark (default Ctrl+Alt+K)
IN 2015, this involved editing configuration JSON files, but I don't know which one, or how. In 2021 there's a new UI, how do I find it?
Click File -> Preferences -> Keyboard shortcuts. Use the tab that opens up to edit and find available key bindings and assign them.
Historical Note: In very early versions of visual studio code, you would Click File -> Preferences -> Keyboard shortcuts and you would get JSON like this keybindings.json:
// Place your key bindings in this file to overwrite the defaults
[
{ "key": "ctrl+o", "command": "workbench.action.files.openFile" },
{ "key": "ctrl+alt+k", "command": "bookmarks.toggle",
"when": "editorTextFocus" }
]
But now in 2021 versions, there is a proper GUI, which is great because the json editing method was error prone and hard to discover.
The json editor feature has been moved to a new icon:
If you want to change the advance settings of keyboard shortcut such as when then you can follow these steps:
Update:(Thanks #phdoerfler for pointing it out that icon has changed)
File->Preferences->Keyboard Shortcuts
Click on icon on top right corner that says "Open Keyboard Shortcuts(JSON)" to open JSON version and place the keybinding.
You can find this in Documentation here.
The way to open the JSON file changed yet again in a recent version.
You need to click the middle of the three buttons in the tab bar.
You only need to do that if the change you need isn't possible on the normal settings screen.
On Windows:
go to File -> Preferences -> Keyboard shortcuts,
or press Ctrl+K, then Ctrl+S,
or edit %UserProfile%\AppData\Roaming\Code\User\keybindings.json file
On Mac:
go to Code -> Preferences -> Keyboard shortcuts,
or press Cmd+K, then Cmd+S
Keep in mind you can type things like shift ctrl c in the Search input in Keyboard Shortcuts panel to find commands by their keybindings.
Here you can find documentation which among other stuff contains also information about what When conditions you can use.
The latest version of Visual Studio Code 1.11.0 provides a rich and easy keyboard shortcuts editing experience using a new Keyboard Shortcuts editor. Read more here on their website.
I will not repeat others answers! And if like me! You get to install a mapping extension!
My prefered is Visual studio keys map
And the question would have been how you select it! How you change it ! Can we install multiples! And select between them!
First here some useful links about key binding and shortcuts
https://code.visualstudio.com/docs/getstarted/keybindings
https://code.visualstudio.com/docs/getstarted/tips-and-tricks
And before any, know that you can get to the keymaps extension by using the bottom left settings button for settings context menu! As in the picture bellow:
or through file>Preferences>keymap
Then you have to install one of the keymaps
The thing to know is that it will take place and make the changes right away!
What if you install another?
The new one take over! Or some mix! I couldn't tell!
And you may have problems!
How you change from one to another?
Remove the old ! remove the new one! And install it again! That's the way that i found it works! Disabling and reenabling didn't work!
And better always let only one installed at a time!
Unfortunitly as by Now 2020-05-08 no options to select between keys mapping exist!
Undo a keymap
Just remove! You may need to restart the editor!
Restart the editor
Also note that if you uninstalled all and reinstalled the one you want! And changes didn't take place! Close the editor and reopen it! That's help!
I hope that's help and may be save you some searching time!
And sure in the future we will have better handling! As vscode is just keeping getting more awesome and awesome! So an option to select and better handling will is expected to be added! And we will wait for it!
FYI on mac the keybindings.json file sits there:
/Users/your_user_name/Library/Application Support/Code/User/keybindings.json
ctrl + shift + p
Type open keyboard shortcut in the search bar
It opens keyboard Shortcuts. Here you can customize shortcuts.
(For extra info follow from 4th point)
There at the top right corner click on open keyboard shortcuts (JSON) (Refer to the image)
There you can modify the key, command, and when. That is also cool.
I tried
{
"key": "ctrl+a",
"command": "workbench.action.terminal.selectAll",
"when": "terminalFocus && !isMac"
}
by this now I can select all in vscode terminal
On Windows: Ctrl + K, then S
On Mac: ⌘ + K then ⌘ + S
This opens Keyboard Shortcuts Editor. It's searchable/filterable by either shortcut name or the key combination itself (example: type "ctrl" to see all bindings to the CTRL key.)
Image:
vscode search keyword shortcuts panel
Open Key Shortcuts from Preferences -> Keyboard Shortcuts
Search for the action in search field
Right click on one of the results and select "Show same keybindings"
Delete the conflicting key binding!