Trying to add a custom context menu item in VSCode that runs commands from an installed extension. Not sure what package.json to edit - visual-studio-code

I installed an extension called Faker, and the only way to access its commands are through the Command Palette. So I want to add a new entry to the editor's context menu using editor/context and contributes.menus as described here - and place all the Faker commands inside the new menu for easy access.
The format goes something like this (non-submenu):
{
"contributes": {
"menus": {
"editor/context": [
{
"command": "faker.address",
"group": "faker"
}
]
}
}
}
My question is, should I edit the extension's (Faker) package.json? Or is there is a global package.json that I can edit so I don't have to touch the extension's files?
What's the proper way to go about this?
Thanks much for any help.

Related

VSCode extension SCM view pane icons

I am maintaining a vscode scm extention. Everything works as expected. But there is one thing left. I want to have such quick action icons as shown in the screenshot below from the build in git scm. In the API documentation I didn't find anything about that.
Does anyone know how to get this to work? Or where I can find a sample code?
Thanks!

With the provided link I was able to get icons in the file list.
In the package.json I duplicated an entry in the node contributes > menues > scm > resourceState > context
{
"command": "extension.myCommand1",
"when": "scmProvider == myProvider",
"group": "inline"
}
The important information is the group property which has to be inline.
Beside that, to make this command visible you need to configure an icon.
In contributes > commands you can configure the command
{
"command": "extension.myCommand1",
"title": "Do something",
"category": "myCat",
"icon": {
"dark": "myIcon.png",
"light": "myIcon.png"
}
}

How to edit the style of items in the File Explorer view

I want to write a VSCode extension that changes the style of a file or folder according to globs specified in settings.json. For example, I want to set the opacity of an item to 0.5 if the file is an auto-generated .d.ts file. Currently, I can hide those files using the files.exclude setting, and I want to do basically the same thing using files.dim.
{
"files.dim": {
"**/*.d.ts": { "when": "$(basename).ts" }
}
}
The thing is, I can't find any way to access the File Explorer view from the VSCode API. Is it even accessible?

Automatic scoll down on document refresh (VS Code)

Since VS Code can auto-refresh a document when it is changed from outside, I would like to scroll down to the last line automatically.
I'm sure this feature worked on previous versions but now I found no entry in settings to enable it.
It is helpful in order to monitor a log file while been write.
Is there any way to enable this feature?

So I created a VS Code extension for this, it's called autoscrolldown.
Building the world's most expensive tail -f!

Auto Scroll extension does this.

You could use the keybinding to scroll to the bottom of the file:
{
"command": "workbench.action.terminal.scrollToBottom",
"key": "ctrl+end",
"when": "terminalFocus"
}
CTRL-End
I don't see any other way to have the scrolling be automatic when a file refreshes.

Unbind ZoomIn in Visual Studio Code

I'm using a Mac and would like to use cmd+= to switch between open windows in VSCode (1.6.1).
By default that key is bound to workbench.action.zoomIn.
I tried following these instructions to unbind that key, but so far have not had success.
In keybindings.json, I have:
{ "key": "cmd+=", "command": "-workbench.action.zoomIn" },
This doesn't seem to have any impact, however, as I still am able to zoom in with cmd+=.
What am I doing wrong here?

Unbinding seems to be broken. You should consider filing a bug here: https://github.com/Microsoft/vscode/issues
would like to use cmd+= to switch between open windows in VSCode
Then you don't need to unbind the current shortcut for workbench.action.zoomIn first. Just create a new keybinding like this one to overwrite the existing one:
{
"key": "cmd+=",
"command": "workbench.action.switchWindow"
}

how to add Intellisense to Visual Studio Code for bootstrap

I'd like to have intellisense for bootstrap specifically but even for the css styles I write in my project. I've got references in a project.json and a bower.json but they do not seem to be making the references available.

You can install HTML CSS Support Extension.
ext install vscode-html-css
This will add Intellisense in your HTML files:
You don't need to configure anything for local files, just close and reopen vscode after installing. For remote css files, you can add the following
"css.styleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
in the settings.json

Here is the common steps (not only for Bootstrap) to enable css IntelliSense in VS Code:
Step 1: Go to https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
or https://marketplace.visualstudio.com/items?itemName=gencer.html-slim-scss-css-class-completion
(Installation steps are already there)
Step 2: Click Install button that appear on the top of the website (screenshot below)
Step 3: After click, browser will show a pop-up window to access VS Code. Open it with VS Code.
Step 4: Click again the "install" button that appear inside the VS Code.
Step 5: After restarting the software, click the bottom left icon shown in the below image:
Step 6: Press "ctrl+[space]" inside the class quotes, you will get the complete class names from the attached stylesheets.

In the latest version of VS Code the IntelliSense in comments and strings have been disabled by default. Below are the two options to bring back "24/7 IntelliSense" functionality or customize it to your own liking.
First make sure you have installed the HTML CSS Support Extension mentioned by dwonisch above.
Control + ',' to go to settings or click File -> Preferences -> Settings.
Click workspace settings tab and enter the following JSON code:
{
"editor.quickSuggestions": {
"comments": false, // <- no 24x7 IntelliSense in comments
"strings": true, // but in strings and the other parts of source files
"other": true
}
}
The other option is to hit ctrl + space within the CSS quotes to activate the intelliSense. Example:
<div class="(ctrl+space)"> </div>

just add this 2 packeges and you are done.. !!!

Just install this extension in VS Code.
IntelliSense for CSS class names in HTML

Unfortunately, this feature is not currently available in VS Code. However, it has been added as a feature request for upcoming updates. You can track the issue on Github.

Open Visual Studio Code.
Use CTRL+, to get to the Workspace Settings
At your Right side window you will see something like this:
Another words paste this URL
{
"folders": [
{
"path": "D:\\Visual Studio\\AndreyCourse\\the-complete-web-developer-in-2018\\DocumentObjectModel"
}
],
"settings": {
"css.remoteStyleSheets": [
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
]
}
}
Enjoy The Bootstrap Intellisense :-)

For React use install this extension in VS Code
1: install IntelliSense for CSS class names in HTML
but this extension works on class property as default so update the settings to work on className.
2: create a extensions.json file in .vscode folder and add the below object
{
"recommendations": [
"Zignd.html-css-class-completion",
"html-css-class-completion.JavaScriptLanguages"
]
}
"Zignd.html-css-class-completion" for class property
"html-css-class-completion.JavaScriptLanguages" for className property

I am using Latest version of VS Code 2022 1.72.2. I have installed below Extension all the HTML, CSS and Bootstrap intelligence working fine.
IntelliSense for CSS class names in HTML
Turn comments on if required in setting by pressing ctrl+,
"editor.quickSuggestions": {
"comments": true,