Is there any way to define custom variables for VS Code snippets?
Particularly, I want to set variable values from settings.
For example, with config setting "my-user-name-test.user.name" in setting.json, I want to define snippets like the below example.
{
"Input User Name": {
"prefix": "user-name",
"body": [
"{",
" \"user_name\": \"${config:my-user-name-test.user.name}\"",
"}"
],
"description": "Test config user name"
}
}
Related
We are using a custom json format for our i18n resources that contain comments for the translation bureau, so they understand better the context of the strings to translate:
Example en.json:
{
"headerbar": {
"search": {
"placeholder": {
"value": "Enter your search here...",
"comment": "This string will be shown in the search input if empty. Truncated after 100 characters."
}
},
"welcome": {
"heading": {
"value": "Welcome, {{name}}!",
"comment": "This string should not be longer than 50 characters."
}
}
}
How can I configure i18next (or react-i18next) such that the translation is always retrieved from the value property? Without having to use {returnObjects} in every t().
t('headerbar.search.placeholder') // === 'Enter your search here...'
t('welcome.heading', {name: 'Bob'}) // === 'Welcome, Bob!'
I also have this requirement, but it appears i18next does not have the capability to define comments or descriptions, because 1) the API doesn't have a way to define those, and 2) the most popular extractor, i18next-parser, doesn't support generating files with comments included.
Alternatively, you could consider Format.JS which has this capability:
https://formatjs.io/docs/getting-started/message-declaration
Problem
The automatic indents in .vm files don't behave as I want them to. Below I add the auto formatted file and also the formatting I want.
The following code snippet is auto formatted by IntelliJ:
#styleTitle('sample-title')
##styleDescription()
A short description of the component
#end
##styleComponent('/components/molecules/sampleComponent/sampleComponent', {
"headline": 'A headline title',
"alertText": "Alert text example",
"link" : {
"href": "www.stackoverflow.com",
"text": "Click here!"
}
})#end
What I want:
#styleTitle('sample-title')
##styleDescription()
A short description of the component
#end
##styleComponent('/components/molecules/sampleComponent/sampleComponent', {
"headline": 'A headline title',
"alertText": "Alert text example",
"link" : {
"href": "www.stackoverflow.com",
"text": "Click here!"
}
})#end
Question
I couldn't find any additional configuration under IntelliJ IDEA | Preferences | Editor | Code Style | Velocity to adjust indention for different code blocks.
How can I configure the code style manually for a specific file type in IntelliJ and how does such a configuration file look like?
When a snippet (for whatever language) is triggered, and the cursor is moved to a tab-stop, the area is "selected" (that is, you are still in "snippet mode" where you can go to another tab-stop). But I would like to get out of this "snippet mode" (e.g not having the area selected after tab-stop), because it suppresses intellisense (the selected area after snippet was triggered accepts anything, so it does no longer suggest intellisense function, variables, etc. Is there a settings in vscode to disable this "selection" after snippet is triggered?
If you have only one tabstop you can use $0 to avoid the "selecttion".
But if you have more than one i don't think it's possible.
I don't believe that's possible.
Snippets often have placeholders such as ${1:name} to indicate what's expected in that tab stop.
Take this one for example:
"JS arrow function": {
"prefix": "af",
"body": [
"const ${1:name} = (${2:props}) => {",
"\t$3",
"}"
],
"description": "Create arrow function"
}
Using tab will cycle over $1, $2 and $3, and for $1 and $2 there is a placeholder.
You can omit the placeholders if you want:
"JS arrow function2": {
"prefix": "af2",
"body": [
"const $1 = ($2) => {",
"\t$3",
"}"
],
"description": "Create arrow function"
}
But instellisense won't work until you press escape.
You can add your own snippets globally or per language if you prefer to customise them and avoid placeholders.
See this link for more information.
We are using Survey Creator to allow our users to build questionnaires. However, we want to keep it simple and we don't want them to have to deal with pagination.
In other words, in the builder, we want to disable pages (showPagesToolbox = false) and have them create a set of questions all on a single page.
When we present this to respondents, we want them to see a single question per page. I.e. Q1 is on page 1, Q2 is on page 2, etc.
Does the SurveyJS library provide a way of handling this situation, i.e. here are all the questions, show them with N questions per page?
There is an option, whch allows you to automatically display one question per page. To enable this you need to set "questionsOnPageMode": "questionPerPage" on the survey level. Here's an example:
{
"pages": [
{
"name": "page1",
"elements": [
{
"type": "text",
"name": "question1"
},
{
"type": "checkbox",
"name": "question2",
"choices": [
"item1",
"item2",
"item3"
]
}
]
}
],
"questionsOnPageMode": "questionPerPage"
}
This is also configurable through the SurveyJS creator by opening the "Survey Settings" dialog, then going to the "Navigation" section, and finally setting the "Questions on page mode" value.
Unfortunately at this time there is no option to specify N number of questions per page. The documentation for this setting is here.
I have a definition (below) file for a JavaScript library.
How can I hook it up to Visual Studio Code code completion?
It has the following format:
{
"!name": "SomeLibrary",
"someMethod" :
{
"!doc" : "Description of some method.",
"!type" : "fn(someParameter: someType) -> someReturnType"
},
"SomeClass" :
{
"!doc" : "Description of some class.",
"someOtherMethod" :
{
"!doc" : "Description of some other method.",
"!type" : "fn(someParameter: someType) -> someReturnType"
}
}
}
Bonus question: What is the name of this format at all?
UPDATE: I found out that I should create a Typescript definition file, but I really don't know how to convert it from this file I have. Is this a standard format at all?
What you want to create is called a snippet:
You can define your own snippets, either global snippets or snippets for a specific language. To open up a snippet file for editing, select User Snippets under File > Preferences (Code > Preferences on macOS) and select the language (by language identifier) for which the snippets should appear or create a new global snippet (New Global Snippets file...).
Since snippets themselves are defined as JSON, your example could get a bit messy, but basically it would look like this:
{
"You Interface Definition": {
"prefix": "idef",
"body": [
"{",
"\t\"!name\": \"<LIBRARY_NAME>\",",
"\t\"<METHOD_NAME>\" : ",
"\t\t{",
"\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\"!type\" : \"fn(<PARAMETER_NAME>: <PARAMETER_TYPE>) -> <RETURN_TYPE>\"",
"\t\t},",
"\t\"<CLASS_NAME>\" : {",
"\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\"<METHOD_NAME>\" : {",
"\t\t\t\"!doc\" : \"<DESCRIPTION>\",",
"\t\t\t\"!type\" : \"fn(<PARAMETER_NAME>: <PARAMETER_TYPE>) -> <RETURN_TYPE>\"",
"\t\t}",
"\t}",
"}",
]
},
}
Note that I'm using \t rather than spaces, since that will respect a user's indentation settings
Now, once you type the prefix idef and press Tab the snippet will expand. You can add tab-stops with placeholder text, in case you want to change <DESCRIPTION> or <PARAMETER_NAME>. Here's a simplified example:
\"fn(${1:<PARAMETER_NAME>}: ${2:<PARAMETER_TYPE>}) -> ${3:<RETURN_TYPE>}\""
Note those parts enclosed by curly braces. Once your snippet is expanded you can use Tab to jump between those tab-stops and modify the selected text. The same tab-stop can be repeated multiple times, should you have the need to insert the same text at multiple places.