How to add "show preview" button to VS Code extension? - visual-studio-code

I have a VS Code extension that analyses custom JSON and YAML files. So in the project's package.json, there is this:
"activationEvents": [
"onLanguage:yaml",
"onLanguage:json",
"onCommand:extension.sidePreview"
],
Whenever someone opens one of these files, I'd like to add a "show preview" icon in the top right corner of the editor:
So I added the corresponding icon resources to the project, and:
"contributes": {
"commands": [
{
"command": "extension.sidePreview",
"title": "Preview file",
"icon": {
"dark": "./resources/open-preview-dark.svg",
"light": "./resources/open-preview-light.svg"
}
}
],
"menus": {
"editor/title": [
{
"command": "extension.sidePreview",
"when": "true"
}
]
},
But this doesn't work... I don't see any icon.
I'd also like to ensure that this button and command are only available when my function isCustomFile in server.ts returns true. Is there a way of doing this?

That's because you added the wrong section under menus.
You are supposed to add editor/title instead.
Reference

Related

I want to show clock on vscode on my macbook touchbar using extension api

I know basics of vscode extensions API. I have created my own extension git-touchbar for my personal use for some git commands. So coming to the point,What I want to show is clock(hh:mm) on my touchbar extension. As far as i read docs, if i want to show some text on touchbar, i can do something like this...
"contributes": {
"commands": [
{
"command": "git-touchbar.showTime",
"title": "12:00"
}}}
But it's static. What i want do is to update title property on touchbar after some interval like 1 minute. it doesn't have to update after each second 😅. There is already some extensions available which shows clock on status bar. but i want to show it on my touchbar extension.
Thanks in advance
you can add 24 (00-23) hour commands and 60 (00-59) minute commands to the menu and use the context variables touchbar-hour and touchbar-minute to control which command is visible.
"contributes": {
"commands": [
{
"command": "git-touchbar.hour00",
"title": "00:"
},
{
"command": "git-touchbar.hour01",
"title": "01:"
},
.....
]
"menus": {
"touchBar": [
{
"command": "git-touchbar.hour00",
"group": "gittools",
"when": "touchbar-hour == 0"
},
{
"command": "git-touchbar.hour01",
"group": "gittools",
"when": "touchbar-hour == 1"
},
.....
]
}
In your extension you set the value of the 2 context variables.
You should write a small Node or Python script to generate the 168 entries of package.json

How to use VSCode product icon for command in extension

I am trying to add a button to the 'editor/title' section which runs my command. With my current configuration, my command name appears when unfolding the menu by clicking the 3 buttons. What I want is to have an icon presented (like for the split editor button), which runs my command.
From the documentation I found that it should be possible to supply an svg file for the icon, but I prefer to use an icon from the product icons. This way the icon can change along with the theme.
Is that even possible, or am I just configuring it incorrectly?
This is the config I have so far:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "preview" // <-- this refers to the icon from 'product icons'
}
],
"menus": {
"editor/title": [
{
"when": "resourceExtname == .xyz",
"command": "my-extension.my-command"
}
]
}
}
This should works:
"contributes": {
"commands": [
{
"command": "my-extension.my-command"
"title": "My Command",
"icon": "$(preview)" // <-- the syntax for using a 'product icon' is $(iconIdentifier)
}
],
}

VSCode Running a Script Using Macros

tl;dr:
I wanna run a script through a macro using "macros" extension for VSCode, see the extension here
Is it possible? if yes, then how?
long story:
There is this extension called "powertools" (see it here), and I used it to add a custom button that runs a script when I click it.
I wanna add a functionality to this button, such that each time I click the button, it saves all of my files using this command ID "workbench.action.files.saveAll", and then shall it run the script.
defining the button goes like this:
"ego.power-tools": {
"buttons":
[
{
"text": "Compile Folder",
"tooltip": "Compile all the .Jack files in the current folder.",
"action":
{
"type": "command",
"command": "macros.compile_button_click",
}
}
],
}
And I want the macro to look something like this:
"macros": {
"compile_button_click": [
"workbench.action.files.saveAll",
{
"action":
{
"type": "script",
"script": "compile_folder.js"
}
},
]
}
Thanks in advance!
P.S - It is important that the macro will first save the files, and only then shall it execute the script
THE SOLUTION:
as #rioV8 said, using powertools you can define a command to execute a script, and then you can add the newly defined command to the macros.
THIS IS HOW I DID IT:
"ego.power-tools": {
"buttons":
[
{
"text": "Save & Compile",
"tooltip": "Compile all the .Jack files in the current folder.",
// Running the macro on button click
"action":
{
"type": "command",
"command": "macros.compile_button_click"
}
}
],
"commands": {
// Define a command that runs a script
"compile_folder": {
"script": "compile_folder.js"
}
}
},
"macros": {
// Define a macro command
"compile_button_click": [
"workbench.action.files.saveAll",
"compile_folder"
]
}

How do I hide a command in the palette menu from my extension in VS Code

I am building a VS Code extension starting from this page. Now I want to hide in the palette menu the command extension.timerStart after I run it. I have read this page, didn't helped. I have the code bellow for package.json. How do I make the varFromMyExtension===false part work?
"contributes": {
"commands": [
{
"command": "extension.timerStart",
"title": "Timer Start"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.timerStart",
"when": "varFromMyExtension===false"
}
]
}
I think it is not possible to access variables from your extension directly in a when clause. However you can access any configuration of the settings.json.
From the docs (at the bottom of the chapter):
Note: You can use any user or workspace setting that evaluates to a boolean here with the prefix "config.".
So when your extension contributes a boolean configuration called varFromMyExtension you should be able to use it in the when clause. This configuration then can be manipulated programmatically, too.
So your package.json would probably contain something like this (not tested):
"contributes": {
"commands": [
{
"command": "extension.timerStart",
"title": "Timer Start"
}
],
"menus": {
"commandPalette": [
{
"command": "extension.timerStart",
"when": "!config.myextension.varFromMyExtension"
}
]
},
"configuration": {
"type": "object",
"title": "Indicates whether ...",
"properties": {
"myextension.varFromMyExtension": {
"title": "My title.",
"description": "My description",
"type": "boolean",
"default": false,
"pattern": "(true|false)"
}
}
}
}
But bare in mind that the user can see and edit this setting, too.

Jupyter lab shortcuts

I've been using Jupyter Notebooks for a couple of years now. I've just headed over to Jupyter Lab, but I've found the lack of shortcuts to be a burden.
For example, I noticed that I can search for commands in the left hand palette. But I can't seem to easily bind them to a keyboard shortcut. Is this even possible?
For example, I want to collapse the current cell output with "O" and collapse all code cells with "Shift O".
This question is answered on GitHub here. You can also look here for the correct command names to enter in your keyboard shortcut user overrides because they are not always the same as what is shown in the Commands side-bar.
The following are some that I use:
{
"shortcuts": [
{
"command": "notebook:hide-cell-outputs",
"keys": [
"O"
],
"selector": ".jp-Notebook:focus"
},
{
"command": "notebook:show-cell-outputs",
"keys": [
"O",
"O"
],
"selector": ".jp-Notebook:focus"
},
{
"command": "notebook:hide-all-cell-outputs",
"keys": [
"Ctrl L"
],
"selector": ".jp-Notebook:focus"
},
{
"command": "notebook:hide-all-cell-code",
"keys": [
"Shift O"
],
"selector": ".jp-Notebook:focus"
}
]
}
which allows you to hide a cell output by pressing O once and showing the cell output by pressing O twice. The last one collapses all cell code with Shift + O as you requested.
On keyboards shortcuts of advance settings this code works fine for moving cells up and down
{
// Move cell up
"shortcuts": [
{
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-up",
"keys": [
"Alt ArrowUp"
]
},
// Move cell down
{
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-down",
"keys": [
"Alt ArrowDown"
]
}
]
}
I use these settings to bind the actions to move a cell up/down to Ctrl + Up/Down:
{
// Move cell up
"notebook:move-cell-up": {
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-up",
"keys": [
"Ctrl ArrowUp"
]
},
// Move cell down
"notebook:move-cell-down": {
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-down",
"keys": [
"Ctrl ArrowDown"
]
}
}
pX0r and plalanne's answers above combined worked for me with minor modification for Mac.
I hope this step-by-step iteration is helpful for someone like me who's a baby programmer. To summarize:
Open Advanced Settings Editor under the Settings tab, or command , in Mac.
Navigate to Keyboard Shortcuts. You should see the screen plalanne answered with.
Use pX0r's codes, however making one change in the key binding as Ctrl Arrowup is reserved in Mac to view all running applications (if you have it set up that way). Similarly, Shift Arrowup is for selecting multiple cells. As a result, I opted for Alt Arrowup. Notice the key on your Mac keyboard says alt/option. You have to refer to it as Alt to work. There you have it. Copy the codes below to User Overrides which is the right pane.
Re-open your notebook and test if it works as intended.
You can customize more keys in this fashion as long as it is defined here on GitHub. For the most part, all that you need are the command IDs starting line 72.
{
// Move cell up
"notebook:move-cell-up": {
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-up",
"keys": [
"Alt ArrowUp"
]
},
// Move cell down
"notebook:move-cell-down": {
"selector": ".jp-Notebook:focus",
"command": "notebook:move-cell-down",
"keys": [
"Alt ArrowDown"
]
}
}
You should edit the settings file in Settings/Keyboard Shortcuts. Here :
There you can specify any custom shortcut that you would like!
If you cannot save the "User Preferences" settings and get a syntax error
[additional property error] command is not a valid property
you have probably missed to nest within the "shortcuts" list, as described here. Additionally, to override an old setting you do the following, using Activate Next Tab and Activate Previous Tab as examples:
{
"shortcuts": [
{
"command": "application:activate-next-tab",
"keys": [
"Ctrl Shift ]"
],
"selector": "body",
"disabled": true // disable old setting
},
{
"command": "application:activate-previous-tab",
"keys": [
"Ctrl Shift ["
],
"selector": "body",
"disabled": true // disable old setting
},
{
"command": "application:activate-next-tab",
"keys": [
"Ctrl 1" // enable new shortcut key
],
"selector": "body"
},
{
"command": "application:activate-previous-tab",
"keys": [
"Ctrl 2" // enable new shortcut key
],
"selector": "body"
}
]
}
Now you can click save and refresh your browser for the new setttings to take effect.