I am trying to give the option to customise a VS Code Extension with user defined settings (configuration) of their preferred quote style. I have configured it in my package.json:
"contributes": {
"configuration": {
"type": "object",
"title": "Jasmine code snippets configuration",
"properties": {
"jasmineSnippets.quoteStyle": {
"type": "string",
"enum": [
"'",
"\"",
"`"
],
"default": "'",
"description": "Code snippets quote style"
}
}
}
},
And can access it in my settings.json like this:
"jasmineSnippets.quoteStyle": "`"
How can I now use that value in my snippets.json file? For this snippet, for example, I want to change the hardcoded ` to the configured property.
"it": {
"prefix": "it",
"body": "it(`${1:should behave...}`, () => {\n\t$2\n});",
"description": "creates a test method",
"scope": "source.js"
},
All I could find from the docs is not helpful as it assumes you're reading it from a JavaScript file not a JSON file:
You can read these values from your extension using vscode.workspace.getConfiguration('myExtension').
I think this requires implementing a CompletionItemProvider and returning the snippet from that, rather than statically declaring it in a JSON. Here's an example of what that might look like:
'use strict';
import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
vscode.languages.registerCompletionItemProvider('javascript', {
provideCompletionItems(doc, pos, token, context) {
var quote = vscode.workspace.getConfiguration('jasmineSnippets').get("quoteStyle", "`");
return [
{
label: "it",
insertText: new vscode.SnippetString(
`it(${quote}\${1:should behave...}${quote}, () => {\n\t$2\n});`),
detail: "creates a test method",
kind: vscode.CompletionItemKind.Snippet,
},
];
}
});
}
And then with "jasmineSnippets.quoteStyle": "\"" in the settings:
Related
I am trying to add a simple configuration to my VSCode extension, but I can't find the correct information.
I just want that the user have a string input field, that has a default value, and read it from my typescript code through the vscode library
Can someone provide me and example about which file should I add, where, and how to consume? also if more configurations are needed.
Thanks!
Ok, found
I need to add into my package.json
...
"contributes": {
"commands": [
...
],
"configuration": {
"title": "My Extension",
"properties": {
"myExtension.myProperty": {
"type": "string",
"default": "default",
"description": "description"
}
}
}
},
and consume
vscode.workspace.getConfiguration('myExtension').myProperty;
As the title suggests, I would like to define a vscode defaultSnippet for the additionalProperites of a JSONObject. The JSONSchema looks like the following
"$schema ": "http://json-schema.org/draft-07/schema#",
"type":"object",
"additionalProperties":{
"type": "object",
"properties":{
"name":{"type":"string"}
}
}
So just adding defaultSnippet property does not seem to work:
"$schema ": "http://json-schema.org/draft-07/schema#",
"type":"object",
"additionalProperties":{
"defaultSnippets": [{
"label": "test",
"description": "Additional property template",
"body": {
"$1": {
"name": "$2"
}
}
}],
"type": "object",
"properties":{
"name":{"type":"string"}
}
}
Is there a workaround to obtain the same behavior?
Your code is correct, but vscode at this moment is only checking properties for snippets. I had the same problem, so I've created Pull Request with fix for this issue.
https://github.com/microsoft/vscode-json-languageservice/pull/62
You can replace default extension if you in rush or just wait for merge and update.
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.
I have already created a function in IBM Cloud Functions, but how would I implement the parameters from user input?
What I'm trying to do is
For example: When a user types in "I need product" / "Buy product now" / Show me products. The product input is taken as a parameter and implements it into my Cloud Function, which displays all products that uses product as a keyword.
The response text would get info from the Cloud Function return output (which is a JSON array)
(res.body.items[?].name)
Example layout from IBM:
{
"context": {
"variable_name" : "variable_value"
},
"actions": [
{
"name":"getProducts",
"type":"client | server",
"parameters": {
"<parameter_name>":"<parameter_value>"
},
"result_variable": "<result_variable_name>",
"credentials": "<reference_to_credentials>"
}
],
"output": {
"text": "response text"
}
}
There is a full tutorial I wrote available in the IBM Cloud docs which features IBM Cloud Functions and a backend database. The code is provided on GitHub in this repository: https://github.com/IBM-Cloud/slack-chatbot-database-watson/.
Here is the relevant part from the workspace file that shows how a parameter could be passed into the function:
{
"type": "response_condition",
"title": null,
"output": {
"text": {
"values": []
}
},
"actions": [
{
"name": "_/slackdemo/fetchEventByShortname",
"type": "server",
"parameters": {
"eventname": [
"<? $eventName.substring(1,$eventName.length()-1) ?>"
]
},
"credentials": "$private.icfcreds",
"result_variable": "events"
}
],
"context": {
"private": {}
},
Later on, the result is presented, e.g., in this way:
"output": {
"text": {
"values": [
"ok. Here is what I got:\n ```<? $events['result'] ?>```",
"Data:\n ``` <? $events['data'] ?> ```"
],
"selection_policy": "sequential"
},
"deleted": "<? context.remove('eventDateBegin') ?><? context.remove('eventDateEnd') ?> <? context.remove('queryPredicate') ?>"
},
Some fancier formatting can be done, of course, by iterating over the result. Some tricks are here. The code also shows how to use a child node to process the result and to clear up context variables.
To obtain the parameter, in your case a product name or type, you would need to access either the input string and find the part after "product". Another way is to use the beta feature "contextual entity" which is designed for such cases.
My goal is to create a collection of Snippets that will be available in the VSCode Marketplace. These snippets will be for 3 languages (html, css, and JS). This will be helpful for anyone who works on the specific framework, but especially my team.
I know that I can scope snippets (How can I add language-agnostic snippets in vscode?) to multiple languages. I also know that according to the docs I'm supposed to have a contributes object that has a snippets array in it. In my package.json for my vsc-extension the default is like the below:
"contributes": {
"snippets": [
{
"language": "markdown",
"path": "./snippets/markdown.json"
}
]
}
Is it correct for me to then update my package.json to something like:
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
]
}
and then have my snippets declare their own scope ("scope": "html")?
The way I went about this was to create a file for each type of snippet: php-snippets.json, js-snippets.json, etc. and then add those files to the snippets array.
"contributes": {
"snippets": [
{
"language": "php",
"path": "./snippets/php-snippets.json"
},
{
"language": "javascript",
"path": "./snippets/js-snippets.json"
}
]
}
One piece of information I left out from my question is that I used the Yo generator to create my snippet project. This was the recommended action in the documentation.
This worked. I added several languages to the snippets array in contributes as seen below.
"contributes": {
"snippets": [
{
"language": "html",
"path": "./snippets/snippets.json"
},
{
"language": "javacript",
"path": "./snippets/snippets.json"
}
,
{
"language": "scss",
"path": "./snippets/snippets.json"
}
]
}
Then inside snippets/snippets.json there is one large object that contains all of my snippets. You can see an example of that below. The key lines for each are "scope": "html and "scope": "scss".
"Each Helper": {
"scope": "html",
"prefix": "each",
"body": [
"{{#each $1}}",
" $2",
"{{/each}}"
],
"description": "Creates each helper -- handlebars"
},
"Break Point Small": {
"scope": "scss",
"prefix": "bps",
"body": [
"",
"#include breakpoint(\"small\") {// 551px and up",
" $1",
"}"
],
"description": "Tablet Break Point --Stencil"
},
I suppose I should have just tried it after not being able to find the answer here or in documentation.