Expand emmet abbreviations without pressing TAB in vs code - visual-studio-code

This is my vs code's settings.josn shows me regarding emmet.
"emmet.includeLanguages": {
"javascript": "javascriptreact"
},
"emmet.showExpandedAbbreviation": "always",
"emmet.triggerExpansionOnTab": true,
I can use emmet abbreviations after pressing TAB key or clicking Edit -> "emmet : expand abbreviation". But I want to know if there is a way to do it automatically when vs code is getting started. If anyone knows that kind of way please let us know.

In VSCode go to
"settings → Extensions → Emmet → Edit in settings.json" and add this in settings.json file
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"typescript": "typescriptreact",
"html":"html"
},

Related

VSCode git action shortcuts/buttons taking up space in editor tab bar. Why are they there and how can I get rid of them?

I hit some shortcut and now I can't figure out how to make this row of shortcuts go away. It's blocking my file tabs, which is the more valuable real estate to me.
I tried toggling all the options under View > Appearance, but didn't find a way to remove these action buttons in the editor tab bar.
That's just a default part of the gitlens extension. I'm not aware of a way to disable it aside from disabling the extension.
You can remove those gitlens-related icons.
Run the command Gitlens: Open Settings from the Command Palette.
That will open a separate custom editor where you can enable or disable gitlens' settins.
Scroll way down to the Menus and Toolbars section.
Disable the Add to the editor group toolbar option.
That show remove those icons you see in the right of the editor group.
Alternatively, in your settings.json find this group of settings:
"gitlens.menus": {
"editor": {
"blame": false,
"clipboard": true,
"compare": true,
"history": false,
"remote": false
},
"explorer": {
"clipboard": true,
"compare": true,
"history": true,
"remote": true
},
// etc....many more
"editorGroup": false, // add this line anywhere in this setting

How can I add a keyboard shortcut to open settings.json on vscode?

I find myself in need of having touch the settings.json quite often and the manual approach is extreamly annoying as there is no directly visible link in the settings dialog.
Is there a way to create a shortcut that opens the files directly?
The commande that you're searching is : workbench.action.openSettingsJson
So to open Setting directly with a keyboard shortcut put this in your keybindings.json :
{
"key": "ctrl+k s",
"command": "workbench.action.openSettingsJson",
}
Keyboard Shortcuts: openSettingsJson
Command Palette: open settings (JSON)
There is a icon in the upper-right corner of settings(UI)

Disable automatic suggestions popping up in VSCode

Background
VSCode shows suggestions whenever I move the cursor into a function signature. I'm finding this very disruptive, as I use Vim keybindings and it interrupts my ability to move around a file quickly.
I'm looking for a way to configure VSCode to only show suggestions when I press the hotkeys, which my keybindings.json defines as CMD + .
What I've tried so far
I've added these lines to my settings.json but they did not solve my issue:
"editor.quickSuggestions": {
"other": false,
"comments": false,
"strings": false,
},
Am I missing something?

Override <ALT> to toggle menu bar on VS CODE

What I want to achieve is as follows:
Disable ALT to show menu bar by toggle-menu-bar completely.
-> Potentially map ALT to a NULL action?
Use a different shortcut to toggle-menu-bar.
Is there a way to achieve this?
On Ubuntu I needed this two settings in settings.json :
"window.titleBarStyle": "custom",
"window.customMenuBarAltFocus": false
(VS Code restart might be required)
Related:
https://github.com/microsoft/vscode/issues/84227
https://code.visualstudio.com/updates/v1_36#_disable-alt-key-focus-of-the-custom-menu-bar
My only solution is to set menu always hidden to prevent interfering with alt-hotkeys. But enabling mnemonics still allows you to reveal it by pressing Alt+F for example.
I have tried this on Win10, and adding these 3 lines to settings.json will work for me, while the latest upvoted answer will make the Menu bar hidden, which is not what we want.
"window.titleBarStyle": "custom",
"window.customMenuBarAltFocus": false,
"window.enableMenuBarMnemonics": false,
I'm using v1.25.1 and the setting to disable ALT menu selection is "window.enableMenuBarMnemonics": false. You can keep the menu visible.
This fixed it for me (I'm using Linux)
"window.titleBarStyle": "custom"
The solution is to set menu always hidden to prevent interfering with alt-hotkeys. But enabling mnemonics still allows you to reveal it by pressing Alt+F for example.
This can be achieved with "window.menuBarVisibility": "hidden", "window.enableMenuBarMnemonics": true in settings.json. The enableMenuBarMnemonics seem to be the default and hence unnecssary.
To access menu, press Alt-F or Alt-E, or Alt-whatever
This answer originates from Dmitriy Botov's answer
and my comment on it
As in Dmitriy Botov answer, adding those lines
"window.customMenuBarAltFocus": false,
"window.enableMenuBarMnemonics": false,
"window.menuBarVisibility": "hidden",
to the config works, but when I toggle the menu bar with e.g. alt+f the menu stays open.
If I use the toggle menu bar command/keybind the setting of "window.menuBarVisibility": "hidden" will be changed to "window.menuBarVisibility": "classic" and then to "window.menuBarVisibility": "toggle" which enables showing the menu bar on alt key again.
However, I'm using the Settings Cycler extension and build a command with it that does the job for me:
1. in settings.json add:
"settings.cycle": [{
"id": "toggleMenuBar",
"values":[
{ "window.menuBarVisibility": "hidden" },
{ "window.menuBarVisibility": "visible" }
]
}
],
2. Set a keybind for the new command:
{
"key": "alt+shift+w",
"command": "settings.cycle.toggleMenuBar",
}
This shows the menu bar and removes the "toggle on alt key" functionality when hidden.
Tested on vscode 1.60.0
Just "window.menuBarVisibility": "hidden" works.
open setting from File --> Preferences --> Settings and in searchBox type menu bar
in Result you can turn off it and whatever you want to doenter image description here

How do I show reference count in 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