I have a custom js-doc attribute which contains the path to the dependency file.
eg: #dependency {import('loadash/somefile')}
Since this is simple string and error prone, I am looking for a way to extend vs-code import intellisense to this custom js-doc attribute. Vscode supports intellisense for standard js-doc attributes #type, #param and #typedef, would be great if there is a way to extend this behavior to my custom attribute.
example of the intellisense for #type attribute
I looked at few extensions related to this, but none offer the rich experience vscode offers. Any pointers in this regard would be really helpful.
Thank you for your time.
You could write a snippet for a quick and dirty solution. A snippet will show the intellisense menu and insert a piece of code based on a prefix you enter. They are saved in a JSON file in your settings directory ~/.vscode and would look something like this:
{
"deprecated": {
"scope": "javascript",
"prefix": "#D",
"body": "#Deprecated {import('${1:path}')}"
}
}
Related
I want to extend postcss autocomplete with my custom colors/fonts/etc variables via custom-data-format. I can generate JSON like this in my UI Kit easily.
The problem is - I use postcss as syntax for *.css files therefore I'm unable to use autocomplete values as they're defined for css only in css.css-data.json. if I choose css syntax for those files - autocomplete works fine, but it obviously disables other PostCSS language features/syntax highlight etc.
How do I configure customData so whatever I define in css.css-data.json will work with postcss syntax?
I tried postcss.customData without any luck. Easily reproducible on this sample workspace
Any help appreciated, thanks!
As of now postcss syntax is not supported (you can track this issue for info), here's workaround to solve autocompletion :
You can achieve sort-of-autocomplete via snippets - here I've generated json named my-autocomplete.code-snippets and simply put it into workspace/.vscode:
{
"my-ui-kit-variables": {
"scope": "postcss",
"prefix": "$my-ui-kit",
"body": "${2|$my-ui-kit-color-white,$my-ui-kit-color-transparent,$my-ui-kit-color-black,$my-ui-kit-color-gray-night-10,$my-ui-kit-color-gray-night-100,$my-ui-kit-color-gray-night-200,$my-ui-kit-color-gray-night-250,$my-ui-kit-color-gray-night-300,$my-ui-kit-color-gray-night-400,$my-ui-kit-color-gray-night-500,$my-ui-kit-color-gray-night-600,$my-ui-kit-color-gray-night-700,$my-ui-kit-color-gray-night-800,$my-ui-kit-color-gray-day-10,$my-ui-kit-color-gray-day-100,$my-ui-kit-color-gray-day-200,$my-ui-kit-color-gray-day-250,$my-ui-kit-color-gray-day-300,$my-ui-kit-color-gray-day-400,$my-ui-kit-color-gray-day-500,$my-ui-kit-color-gray-day-600,$my-ui-kit-color-gray-day-700,$my-ui-kit-color-gray-day-800,$my-ui-kit-color-gray-day-900,$my-ui-kit-color-sonic-100,$my-ui-kit-color-sonic-200,$my-ui-kit-color-sonic-300,$my-ui-kit-color-sonic-400,$my-ui-kit-color-sonic-500,$my-ui-kit-color-sonic-600,$my-ui-kit-color-sonic-700,$my-ui-kit-color-sonic-800,$my-ui-kit-color-sonic-900,$my-ui-kit-color-sonic-night-disabled,$my-ui-kit-color-minion-100,$my-ui-kit-color-minion-200,$my-ui-kit-color-minion-300,$my-ui-kit-color-minion-400,$my-ui-kit-color-minion-500,$my-ui-kit-color-minion-600,$my-ui-kit-color-minion-700,$my-ui-kit-color-minion-800,$my-ui-kit-color-minion-900,$my-ui-kit-color-minion-night-disabled,$my-ui-kit-color-karl-100,$my-ui-kit-color-karl-200,$my-ui-kit-color-karl-300,$my-ui-kit-color-karl-400,$my-ui-kit-color-karl-500,$my-ui-kit-color-karl-600,$my-ui-kit-color-karl-700,$my-ui-kit-color-karl-800,$my-ui-kit-color-karl-900,$my-ui-kit-color-karl-night-disabled,$my-ui-kit-color-candy-100,$my-ui-kit-color-candy-200,$my-ui-kit-color-candy-300,$my-ui-kit-color-candy-400,$my-ui-kit-color-candy-500,$my-ui-kit-color-candy-600,$my-ui-kit-color-candy-700,$my-ui-kit-color-candy-800,$my-ui-kit-color-candy-900,$my-ui-kit-color-candy-night-disabled|}"
}
}
I want to create a small VSCode plugin that has autocomplete function for the Bootstrap classes.
I would like this autocomplete to work only when the cursor is between double quotation marks.
Is it possible to restrict the display of the auto-complete list only for this range?
I tried something like this:
"BTN": {
"scope": "string.quoted.double.html",
"prefix": "work-btn",
"body": [
"test-class;",
],
"description": "BS4"
}
but not working
It isn't possible to use syntax scopes in a snippet, see the discussion at
https://github.com/microsoft/vscode/issues/71187
I was going to suggest upvoting that issue but it has been locked. The functionality seems like it would be useful for various reasons, but might be cpu-intensive.
in VS Code does anyone know how to change the color theme for variable names for C++. I can change the colors for functions, comments, keywords, but I can't get variables to work. Any help would be great Thanks.
This has changed since the original answer was posted and it is now outdated.
As #alex-myers mentioned in the comments, you can use TextMate to target intellisense tokens.
For example:
"editor.tokenColorCustomizations": {
"[Visual Studio Dark]": {
"textMateRules": [
{
"scope": "variable.other.local",
"settings": {
"foreground": "#FF0000",
}
}
]
}
}
See: https://code.visualstudio.com/docs/cpp/colorization-cpp
UPDATE: this is now possible with the C++ extension. Upvote #TheBat's answer since he originally posted the update. The scope is variable.other.local and his answer shows what to add to your settings file.
NOTE: the answer below is still accurate if you do not have the extension
I'm the maintainer of the VS Code C++ Syntax, and sadly there is not yet a way to change the color of all C++ variables, the Python syntax is the same way. You can change the color of source.cpp which will change the default color, and you can change the color of some existing variables with variable and variable.parameter, but this will still not affect many of the untagged variables.
We're working on changing this, but it is going to take quite awhile.
For general scope names, look at https://macromates.com/manual/en/language_grammars#naming-conventions
You can edit the corresponding theme *.json file. For example, if you are using the Dark+ (default dark) theme, you can find the theme json file at extensions/theme-defaults/themes/dark_plus.json. In this file we find the following text mate theme rule:
{
"name": "Variable and parameter name",
"scope": [
"variable",
"meta.definition.variable.name",
"support.variable",
"entity.name.variable"
],
"settings": {
"foreground": "#9CDCFE"
}
}
Please note that some themes do not define styling for the variable scope so you would have to add your own (like the above snippet). Also not all styles of variable naming are defined in the c++ grammar file. For more details on how to add your specific naming style grammar you can see this answer.
I'd like to know what's the syntax or the language used to format the code templates in netbeans ide. I mean, in the default templates I can see things like;
while (${EXP default="exp"})
{
${selection line}${cursor}
}
And:
// <editor-fold defaultstate="collapsed" desc="${comment}">
${selection}${cursor}// </editor-fold>
And I experimented and did this:
int ${IDX newVarName default="loop"};
for (${IDX} = 0; ${IDX} < ${SIZE int default="size"}; ${IDX}++)
{
${cursor}
}
And it works but I don't really know where the "${IDX}" or the "${SIZE int default="size"}" or the "${selection}${cursor}" comes from and what other statements can I use to format my templates.
Is this some scripting or programming language?
Where can I find this information?
I think Netbeans uses the template engine Freemarker for this. So all variables (= ${...}) are filled in by Netbeans at the time you use the template.
Unfortunately I don't have a full list of all default variables / methods you can use, but here are two of them listed:
${cursor}:
defines a position where the caret will be located after the editing
of the code template values finishes.
${selection}:
defines a position for pasting the content of the editor selection.
This is used by so-called 'selection templates' that appear as hints
whenever the user selects some text in the editor.
See here: http://wiki.netbeans.org/Java_EditorUsersGuide#How_to_use_Code_Templates
${IDX} looks like a custom variable you use.
See also:
- Code Assistance in the NetBeans IDE Java Editor: A Reference Guide (Code Template)
- Code Templates in NetBeans IDE for PHP
How_to_use_Code_Templates pretty much covers everything there is.
Looking at CodeTemplateParameter.java shows there is another hint called "completionInvoke" which requests showing of the code completion popup for the currently focused text component, but that is all.
One particular problem I was having was using ${word_selection} in an Eclipse PDT template.
I was recently trying to use some code templates with Eclipse PDT 2.1 to speed up some common tasks. We use a lot of getters/setters, so I wrote the following template.
function get${word_selection}() {
return $$this->getData('${word_selection}');
}
function set${word_selection}($$${word_selection}) {
$$this->setData('${word_selection}', $$${word_selection});
}
I named the template "getset" and the only way I know to use the Code Assist is to type: "getset" then hit my code assist keys (I have it set to Esc, but I think the default was Ctrl+Space). The problem is, this doesn't actually let me select a word to be used by the ${word_selection}.
how do I type in my template name, hit the key combo, and have a word selected all at the same time?
I also want to know what kinds of templates people have set up and any other tips for using templates to speed of programming.
Look at this link : http://2tbsp.com/node/104
It describes two things : pdt code templates and code snippets.
how do I type in my template name, hit the key combo, and have a word selected all at the same time?
I think this cannot be achieved with code templates, but with code snippets. Personnally I do not use them at all, but I might start :-)