How to Invoke WebView Extension from File Type - visual-studio-code

I am creating a VS Code WebView extension that I wish to invoke/trigger when I open a file of a specific file extension name. e.g. MyFile.abc.
Within myExt I added the onFileSystem to the activationEvents within package.json:
{
"name": "myext",
"description": "A Webview API Sample",
"version": "0.0.2",
"publisher": "vscode-myext",
"engines": {
"vscode": "^1.25.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onWebviewPanel:myExt",
"onFileSystem:abc",
"*"
],
"main": "./out/extension.js",
"contributes": {
"commands": [
{
"command": "myExt.start",
"title": "Start myExt ",
"category": "My Ext"
}
]
},
"scripts": {
"vscode:prepublish": "tsc -p ./",
"compile": "tsc -p ./",
"watch": "tsc -w -p ./",
"postinstall": "node ./node_modules/vscode/bin/install"
},
"dependencies": {
"supports-color": "^6.0.0",
"vscode": "^1.1.18"
},
"devDependencies": {
"#types/node": "^10.5.2",
"tslint": "^5.11.0",
"typescript": "^2.9.2"
}
}
When I add "onFileSystem:abc" to activationEvents in myExt I was expecting my webview extension to open anytime I opened a file with the extension .abc however nothing happened.
I then tried the activationEvents setting "*", expecting that my webview extension would open at the start of VSCode but that too did not open my extension.
I am able to open and run my extension through Ctrl+Shift+P as per normal.

I don't think there's any activation event that fires when a file with a specific name or extension is opened. The onFileSystem event you were trying has a different purpose and checks for the scheme of a file.
Normally you would use onLanguage for this, and use the language identifier that your .abc extension is associated with. If it's not a popular file extension, you might need to register it in the contributes.languages section.
I then tried the activationEvents setting "*", expecting that my webview extension would open at the start of VSCode but that too did not open my extension.
The activate() method of your extension should always be called if the activation event is *. I assume by "running it with the command palette" you mean debugging the extension through the extension development host? Unless your extension is in your <User>/.vscode/extensions directory, it wouldn't be included in regular VSCode executions. It should then also be listed in the Extensions panel.

I think that you need to use
"workspaceContains:*.abc" as activationEvents

I think you have to do something for below in package.json
{
"activationEvents": [
"onCommand:"**HERE WILL BE YOUR EXTENSION NAME WHICH YOU REGISTERED**"
],
"contributes": {
"menus": {
"explorer/context": [
{
"when": "resourceLangId == **abc**", // this is the extension of the file where you want to execute your command
"command": "**YOUR COMMAND NAME**",
"title": "Anything relevent title",
"group": "navigation"
}
]
}
}
}

According to custom-editor-sample example by Microsoft, you need to do the following configuration in package.json:
"contributes": {
"customEditors": [
{
"viewType": "catCustoms.catScratch",
"displayName": "Cat Scratch",
"selector": [
{
"filenamePattern": "*.cscratch"
}
]
},

Related

Is it possible to specify user specific pre commands in VS Code?

We have a slew of folks doing development through the same GitLab repo. We are using VS Code tasks to execute internal commands. The main command is the same for everyone: internal_command on Windows and internalCommand on Linux.
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label" : "do it",
"type" : "shell",
"windows": {
"command": "internal_command"
},
"linux": {
"command": "internalCommand"
}
}
]
}
This works as expected.
Some users need/want to run a specific command before the main command. For example, one use wants to rename a file, another user wants to change an environment variable, etc...
We don't want to have multiple versions of .vscode/tasks.json cause that is a mess when pushing things to GitLab.
So I am wondering if there is a way to specify user specific tasks in the project's .vscode/tasks.json file?
You can with the help of the extension Command Variable it allows you to use the content of a file as a command in the terminal. The file can also contain Key-Value pairs or be a JSON file.
Say you store this userTask.txt or userTask.json file in the .vscode folder and add the file to the .gitignore file.
With the current version of the extension the file userTask.txt has to exist, I will add an option to supply alternative text in case the file does not exist. You can fill the file with a dummy command like echo No User Task
Set up your task.json like
{
"version": "2.0.0",
"tasks": [
{
"label" : "do it",
"type" : "shell",
"windows": {
"command": "internal_command"
},
"linux": {
"command": "internalCommand"
},
"dependsOrder": "sequence",
"dependsOn": ["userTask"]
},
{
"label" : "userTask",
"type" : "shell",
"command": "${input:getUserTask}"
}
],
"inputs": [
{
"id": "getUserTask",
"type": "command",
"command": "extension.commandvariable.file.content",
"args": {
"fileName": "${workspaceFolder}/.vscode/userTask.txt"
}
}
]
}

Can't run vscode extension app in certain vscode versions

I created a vscode extension app and it works perfectly for some versions of vscode and not for others. So far, I've noticed this issue only in mac, but doesn't mean the same issue might happen for other versions of windows. In mac, when I try my extension app on version 1.40.2 it doesn't seem to work. There is no option to run my app in command palette or context menu. It's missing. But if I try it on version 1.55.2 (Universal) then the extension app appears and runs successfully in context menu and command palette no problem.
When I run it on my mac on version 1.40.2, I get the dialog message Extension is not compatible with Code 1.40.2. Extension requires: ^1.55.0.
Another error I've seen is in the console it come up with this error, which I created a new project by running yo code in that problem vscode version and hit F5 on a fresh template and I still got this error so not sure if it's related or not.
Error: Invalid problemMatcher reference: $ts-webpack-watch
Error: Invalid problemMatcher reference: $tslint-webpack-watch
I've also seen this error too
Why am I having a version compatibility issue? I don't think it's something in my extension.ts file because if I remove all my code ie
'use strict';
import * as vscode from 'vscode';
const ncp = require("copy-paste");
const os = require('os');
let folderOutput: string;
let fileOutput: vscode.Uri;
export function activate(context: vscode.ExtensionContext) {
let disposable = vscode.commands.registerCommand('my-app.startApp', async (uri: vscode.Uri) => {
});
context.subscriptions.push(disposable);
}
then the issue is still there so that eliminates that file from being the issue. I appreciate any help!
Package.json
{
"name": "my-app",
"displayName": "my app",
"description": "does something interesting",
"version": "0.0.1",
"engines": {
"vscode": "^1.55.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:my-app.startApp"
],
"main": "./dist/extension.js",
"contributes": {
"commands": [
{
"command": "my-app.startApp",
"title": "Start My App"
}
],
"menus": {
"editor/context": [
{
"command": "my-app.startApp"
}
]
}
},
"scripts": {
"vscode:prepublish": "npm run package",
"compile": "webpack",
"watch": "webpack --watch",
"package": "webpack --mode production --devtool hidden-source-map",
"test-compile": "tsc -p ./",
"test-watch": "tsc -watch -p ./",
"pretest": "npm run test-compile && npm run lint",
"lint": "eslint src --ext ts",
"test": "node ./out/test/runTest.js"
},
"devDependencies": {
"#types/vscode": "^1.55.0",
"#types/glob": "^7.1.3",
"#types/mocha": "^8.0.4",
"#types/node": "^12.11.7",
"eslint": "^7.19.0",
"#typescript-eslint/eslint-plugin": "^4.14.1",
"#typescript-eslint/parser": "^4.14.1",
"glob": "^7.1.6",
"mocha": "^8.2.1",
"typescript": "^4.1.3",
"vscode-test": "^1.5.0",
"ts-loader": "^8.0.14",
"webpack": "^5.19.0",
"webpack-cli": "^4.4.0"
},
"dependencies": {
"copy-paste": "^1.3.0",
"simple-git": "^2.38.0"
}
}

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.

Error when trying to load custom theme in Visual Studio Code

What I did:
npm install -g yo generator-code
yo code and selected New Color Theme
Following instructions for name, author etc.
The ready made folder I moved to $HOME/.vscode/extensions (I am on Mac)
Content of my folder:
Inside the themes folder:
I restarted the vscode and from Code->Preferences->Color Theme I chose my theme and have the following error:
The theme was generated with editor. I also tried with theme from colorsublime but I had the same error.
This is package.json file:
{
"name": "random",
"displayName": "randomtheme",
"description": "theme",
"version": "0.0.1",
"publisher": "Milenito",
"engines": {
"vscode": "^1.5.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "Random",
"uiTheme": "vs-dark",
"path": "./themes/milenekai.tmTheme"
}
]
}
}
I really can't see where is the problem. I would appreciate any help.