I am trying to create a new VS Code theme, but whenever I try to run the debugger vs code shows a warning "You don't have an extension for debugging 'JSON with comments'. Should we find a 'JSON with comments' extension in the marketplace?'
My launch.json file:
{
"version": "0.2.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"args": ["--extensionDevelopmentPath=${workspaceFolder}"]
}
]
}
My package.json file:
{
"name": "theme",
"displayName": "theme",
"description": "theme",
"version": "0.0.1",
"engines": {
"vscode": "^1.58.0"
},
"categories": [
"Themes"
],
"contributes": {
"themes": [
{
"label": "theme",
"uiTheme": "vs-dark",
"path": "./themes/theme-color-theme.json"
}
]
}
}
I tried finding the JSON with comments debugger in the marketplace, but couldn't find it. Does anyone has any idea what I am doing wrong?
When debugging a theme your "./.vscode/launch.json" should look like this:
// "./.vscode/launch.json"
{
"configurations": [
{
"args": ["--extensionDevelopmentPath=${workspaceFolder}"],
"name": "Launch Extension",
"request": "launch",
"type": "pwa-extensionHost"
}
]
}
"You only need four (4) settings total, which are displayed in the snippet above. Everything else is unnecessary junk when debugging a theme."
You need to do one more thing:
At the very top of your "./themes/theme-color-theme.json" file add the following lines:
// "./themes/theme-color-theme.json"
{
"name": "Your-themes-name",
"type": "dark",
"$schema": "vscode://schemas/color-theme",
"colors": {
// theme highlighting...
},
}
EDIT:
I unintentionally added "semanticHighlighting": true to the snippet above. That's something that isn't related to this question so I removed it from the example. Semantic Highlight is important, though, and you should read about it before choosing true or false, if you haven't read about it already.
Related
When writing an extension in vsCode, is it possible to create a configuration (a field in my settings.json) where I can store multiple values and configure an actively selected one?
Say I have an external dependency, which I need to reference in my tasks.json. Through the configuration contribution point of the extension i can provide the following property:
"myextension.dependencyDir": {
"scope": "resource",
"type": "string",
"description": "Path to the external dependency"
}
I can now reference this path in my tasks.json through ${config:myextension.dependencyDir}
However, lets say my dependency comes in various versions, which I would like to switch from the comfort of my settings(UI)
I know that by using an array I can store multiple versions of the dependency.
"myextension.dependencyDir": {
"scope": "resource",
"type": "array",
"items": {
"type": "string"
},
"description": "Path to the external dependency"
},
However, I cannot seem to reference single elements out of this array from my tasks.json.
By calling ${config:myextension.dependencyDir} now, i get the entire array.
I have tried to call
${config:myextension.dependencyDir[0]}
${config:myextension.dependencyDir(0)}
${config:myextension.dependencyDir:0}
... and many other variations
to query the first item in my array. Neigther of those attempts have worked.
${config:myextension.dependencyDir}[0] just appends '[0]' to the
last element.
I know that I can create custom objects and configure them in my settings.
"myextension.dependencyDir": {
"scope": "resource",
"type": "array",
"items": {
"type": "object",
"properties": {
"name": {
"type": "string",
"description": "Name of your dependency version"
},
"value": {
"type": "string",
"description": "Path to the specific Dependency version"
}
}
},
"description": "Path to the external dependency"
},
However, just like before, I don't know how to access a single entry in my array, let alone adress the specific fields name and value.
Is what I am trying to do possible? Is it even the proper way of doing this? Does anyone have a solution to my problem or suggestions for a different approach?
Thanks in advance
BioZons
You can use the extension Command Variable v1.30.0
It has a command extension.commandvariable.config.expression. It allows to apply a JavaScript expression to the value of a configuration variable.
If the config variable is an array:
{
"version": "2.0.0",
"tasks": [
{
"label": "echo config var",
"type": "shell",
"command": "echo",
"args": [
"ConfigArray: ${input:configArray}",
],
"problemMatcher": []
}
],
"inputs": [
{
"id": "configArray",
"type": "command",
"command": "extension.commandvariable.config.expression",
"args": {
"configVariable": "myextension.dependencyDir",
"expression": "content[1]"
}
}
]
}
If the config variable is an array and you want to pick the array element:
{
"version": "2.0.0",
"tasks": [
{
"label": "echo config var",
"type": "shell",
"command": "echo",
"args": [
"ConfigArrayPick: ${input:configArrayPick}",
],
"problemMatcher": []
}
],
"inputs": [
{
"id": "configArrayPick",
"type": "command",
"command": "extension.commandvariable.config.expression",
"args": {
"configVariable": "myextension.dependencyDir",
"expression": "content[${pickStringRemember:serverNr}]",
"pickStringRemember": {
"serverNr": {
"description": "Which server to use?",
"options": [
["development", "0"],
["live", "1"]
]
}
}
}
}
]
}
If the config variable is an array of objects:
{
"version": "2.0.0",
"tasks": [
{
"label": "echo config var",
"type": "shell",
"command": "echo",
"args": [
"ConfigObject: ${input:configObject}",
],
"problemMatcher": []
}
],
"inputs": [
{
"id": "configObject",
"type": "command",
"command": "extension.commandvariable.config.expression",
"args": {
"configVariable": "myextension.dependencyDir",
"expression": "content[1].name"
}
}
]
}
Is there a way to nest an input variable inside other variables, particularly ${workspaceFolder}? As an example .code-workspace file:
{
"folders": [
{
"name": "Client",
"path": "path/to/client/code"
},
{
"name": "Server",
"path": "path/to/server/code"
},
{
"name": "Shared",
"path": "path/to/shared/code"
}
],
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "(gdb) Launch",
"type": "cppdbg",
"request": "launch",
"cwd": "${workspaceFolder}",
"program": "apphere"
}
],
"inputs": [
{
"id": "pickProject",
"type": "pickString",
"description": "Select a project:",
"options": [
"Client",
"Server"
]
}
]
}
}
All projects (Client and Server in this example) would share the same launch configurations, the only thing that would need to change is the cwd value. Unfortunately you cannot use ${workspaceFolder} directly in a multi folder workspace as you receive this error:
Variable ${workspaceFolder} can not be resolved in a multi folder workspace. Scope this variable using ':' and a workspace folder name.
What would be perfect is being able to do something like this:
"cwd": "${workspaceFolder:${input:pickProject}}"
Unfortunately this does not work. Is there another way to provide a dynamic scope for the workspaceFolder variable?
I did figure out one rather hacky way to handle this although it feels like there should be a better way: If you change the pickString input options to the folder paths and then change the debug cwd to "cwd": "${workspaceFolder:Shared}/../../../${input:pickProject}" you can arbitrarily pick one of the folders, traverse back out to the root workspace directory, and then append the ${input:pickProject} variable onto the end. In addition to the directory traversals, the debug choices you see will be "path/to/client/code" and "path/to/server/code" instead of the more clean "Client" and "Server". But at least it does seem to work, albeit not overly ideal.
With the extension Command Variable you have possible solutions
extension.commandvariable.file.fileAsKey
When you have a file open and current for Client or Server the F5 will select the correct cwd based on the path of the current file.
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "(gdb) Launch",
"type": "cppdbg",
"request": "launch",
"cwd": "${input:getCWD}",
"program": "apphere"
}
],
"inputs": [
{
"id": "getCWD",
"type": "command",
"command": "extension.commandvariable.file.fileAsKey",
"args": {
"/client/": "/path/to/client/code",
"/server/": "/path/to/server/code"
}
}
]
}
extension.commandvariable.pickStringRemember
If you want a pick list that shows Client and Server but returns the corresponding paths use:
"launch": {
"version": "0.2.0",
"configurations": [
{
"name": "(gdb) Launch",
"type": "cppdbg",
"request": "launch",
"cwd": "${input:pickPath}",
"program": "apphere"
}
],
"inputs": [
{
"id": "pickPath",
"type": "command",
"command": "extension.commandvariable.pickStringRemember",
"args": {
"description": "Select a project:",
"options": [
["Client", "/path/to/client/code"],
["Server", "/path/to/server/code"]
]
}
}
]
}
I'm not sure if it was a recent update, but for some reason I'm not getting the quick fixes for ESLint any longer. It will say "Checking for quick fixes...", but I will not display any. In the ESLint server I can see the fix available, but the command is missing in VS Code.
[Trace - 5:30:49 PM] Received response 'textDocument/codeAction - (13)' in 0ms.
Result: [
{
"title": "Disable no-unused-vars for this line",
"command": {
"title": "Disable no-unused-vars for this line",
"command": "eslint.applyDisableLine",
"arguments": [
{
"uri": "file:///d%3A/Development/sfdx/insider/force-app/main/default/lwc/apexImperativeMethod/apexImperativeMethod.js",
"version": 14,
"ruleId": "no-unused-vars"
}
]
},
"kind": "quickfix"
},
{
"title": "Disable no-unused-vars for the entire file",
"command": {
"title": "Disable no-unused-vars for the entire file",
"command": "eslint.applyDisableFile",
"arguments": [
{
"uri": "file:///",
"version": 14,
"ruleId": "no-unused-vars"
}
]
},
"kind": "quickfix"
},
{
"title": "Show documentation for no-unused-vars",
"command": {
"title": "Show documentation for no-unused-vars",
"command": "eslint.openRuleDoc",
"arguments": [
{
"uri": "file:///",
"version": 14,
"ruleId": "no-unused-vars"
}
]
},
"kind": "quickfix"
}
]
Same was happening to me as well and after trying multiple things what worked for me was a clean reinstall of Code which meant uninstalling Code, deleting the extension folder and and installing the code followed by extensions. And quick fix is back.
I'm trying to create a launch configuration where an environment variable is dynamically determined by a shell script. Even though a command variable can start a task via workbench.action.tasks.runTask, it doesn't seem to be possible to specify which task to run. Input variables seem to be a little more flexible in that regard, but I can't seem to get it to work. Here is what I got:
launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "auto",
"program": "${workspaceFolder}/main.go",
"env": {
"XXX": "${input:foo}"
},
"args": []
}
],
"inputs": [
{
"type": "command",
"id": "foo",
"command": "workbench.action.tasks.runTask",
"args": {
"args": "bar",
}
}
]
}
tasks.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "bar",
"type": "shell",
"command": "find /dev -name 'myspecialdevice*' -maxdepth 1"
}
]
}
The issue is that the user is still queried for which task to run. I'm most insecure about the inputs.args section of the launch.json. I don't really know what the key value should be. Perhaps the implementation helps to figure this out?
This answer not really relates to make use of a vscode task, but your introducting sentence offers the motivation/what is intended to be solved.
I was faced to the same question and was wondering about vscode's input type:command. It offers a way to embed a (custom) vscode command -- which looks like a powerfull mechanism to embed a (custom) extension here. But I didn't found a builtin command that simply executes a shell script and returns it stdout. Thus an extension to capture the output of a shell command is imho required todo the trick.
E.g. https://marketplace.visualstudio.com/items?itemName=augustocdias.tasks-shell-input
provides a command shellCommand.execute doing exactly this.
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "auto",
"program": "${workspaceFolder}/main.go",
"env": {
"XXX": "${input:foo}"
},
"args": []
}
],
"inputs": [
{
"id": "foo",
"type": "command",
"command": "shellCommand.execute",
"args": {
"command": "find /dev -name 'myspecialdevice*' -maxdepth 1",
"cwd": "${workspaceFolder}",
/* To prevent user from selecting output (if there is just
one line printed by command), un-comment next line */
//"useSingleResult": true
}
}
]
}
(Inspired by https://stackoverflow.com/a/58930746/1903441)
In your launch.json, try replacing
"args": {
"args": "bar",
}
with
"args": "bar"
It seems that in vscode, you cannot pass a return or even an environment variable from task.json to launch.json. But you can use a file as a intermediate.
For example, in task.json:
{
"version": "2.0.0",
"tasks": [
{
"label": "bar",
"type": "shell",
"command": "find /dev -name 'myspecialdevice*' -maxdepth 1 > ${workspaceFolder}/.vscode/temp"
}
]
}
In launch.json you set bar as preLaunchTask, and later access the file using inputs, like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "go",
"request": "launch",
"mode": "auto",
"program": "${workspaceFolder}/main.go",
"env": {
"XXX": "${input:foo}"
},
"args": [],
"preLaunchTask": "bar",
}
],
"inputs": [
{
"id": "foo",
"type": "command",
"command": "extension.commandvariable.file.content",
"args": {
"fileName": "${workspaceFolder}/.vscode/temp",
}
}
]
}
To get the comment working, just install this extension: https://marketplace.visualstudio.com/items?itemName=rioj7.command-variable
Is it possible to invoke more than one pre-launch task using VS Code?
I try to restore packages then build then run but I can only get to configure build.
My launch.json:
{
"name": ".NET Core Launch (console)",
"type": "coreclr",
"request": "launch",
"preLaunchTask": "build",
"program": "${workspaceRoot}/src/myProject/bin/Debug/netcoreapp1.0/myProject.dll",
"args": [],
"cwd": "${workspaceRoot}/src/myProject",
"stopAtEntry": false,
"externalConsole": false
},
My tasks.json:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "dotnet",
"isShellCommand": true,
"args": [],
"tasks": [
{
"taskName": "build",
"args": [
"./**/project.json"
],
"isBuildCommand": true,
"showOutput": "always",
"problemMatcher": "$msCompile"
}
]
}
so I tried to specify the dotnet restore command however it does not work.
I know this is long over due. However, I think I figured out the solution. Steps I did.
Create a workspace to include all the projects in the workspace.
Go to Run and Debug, and click on "Add Config (workspace)
the format is the following:
{
"folders": [
{
"path": "project1"
},
{
"path": "project2"
},
],
"launch": {
"version": "0.2.0",
"compounds": [{
"name": "Chain Stars",
"configurations": [
"ConfigurationName1",
"ConfigurationName2",
]
}]
}
}
ConfigurationName1, and ConfigurationName2 is the profile name you would like to put them in sequence to launch your website.
4. Save the profile. In this case. "Chain Stars" is going to show up in the profile name for you to run it. Let me know if you have any questions.