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|}"
}
}
Related
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.
Im looking to add IntelliSense support to my VS Code Extension.
Within the extension i have a few files like:
server.d.ts
client.d.ts
And files like below, with the d.ts that should provide IntelliSense behind it.
/server/script.js > server.d.ts
/client/script.js > client.d.ts
/widget/script.js > server.d.ts
/widget/widget.js > client.d.ts
I have the data for the mapping, but cant figure out what to do in the extension. Clues?
You might wanna try this extension,
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
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}')}"
}
}
For a new project I am going to use tailwind.css with sass in visual studio code. Tailwind provides a #apply function to mix the contents of existing tailwind classes to my custom scss.
So I can do sth like this:
.btn {
#apply .font-bold .py-2 .px-4 .rounded;
}
The compiled css file will then automatically have tailwinds rules for these settings. However this causes error notifications in the pure scss file of course. To be consistent among my code I am planning to solve as much as I can with the apply rule, which will result in many "false" errors.
Is there a way to solve this, for example that IntelliSense will accept the #apply rule in my scss files?
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.