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 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 have following CSS in my style.css:
.btfl-alert-warning:not(.selectize-control):not(.selectize-dropdown-content):not(.selectize-dropdown)
{
//some properties
}
Now, when I use Eclipse formatting, eclipse make space between 'not' and parenthesis and I get something like this:
.btfl-alert-warning:not (.selectize-control ):not (.selectize-dropdown-content
):not (.selectize-dropdown ) {
}
After using formatter second time it looks much worse, but the point is after adding this 'space' this selector just stop work. I checked all CSS formatter options in Eclipse but nothing helped me.
Do you have any idea how to prevent ruining this CSS?
You could go to Preferences -> CSS -> Code Style:
Then modify it as you want it to show.
In the case you can't make it in the CSS(Code Style), you might don't apply the format in eclipse, it is fine to do all the work in Eclipse, once you finish when you have a production ready CSS/HTML/JS/.... you can use atom from GitHub to apply format to your CSS/HTML/JS/.... use the plugins from AtomLinter
I hope this helps you.
I ended up using additional css file called style_do_not_format.css which contains only that css and comment about not formatting this file because it cause css to stop work. In my style.css file i use
#IMPORT url("style_do_not_format.css");
Recently I did something wrong and it ruined my project's code style format, my eyes bleed with the new code style format and I neither can read or edit my code. I fixed the project settings by restoring to default, but pre-formatted code resits the new Eclipse Format and I have to fix every Java file one by one by hand...
This is how all my sources look like after the mistake
dropDat.setItemId(Integer
.parseInt(attrs
.getNamedItem(
"itemid")
.getNodeValue()));
dropDat.setMinDrop(Integer
.parseInt(attrs
.getNamedItem(
"min")
.getNodeValue()));
dropDat.setMaxDrop(Integer
.parseInt(attrs
.getNamedItem(
"max")
.getNodeValue()));
dropDat.setChance(Integer
.parseInt(attrs
.getNamedItem(
"chance")
.getNodeValue()));
The same code should look like:
dropDat.setItemId(Integer.parseInt(attrs.getNamedItem("itemid").getNodeValue()));
...
dropDat.setItemId(Integer.parseInt(attrs.getNamedItem("chance").getNodeValue()));
My whole project is destroyed (30.000+ Java files) into this annoying coding style... What should I do to automatically fix it?
Create a formatter profile here Windows > Preferences > Java > Code Style > Formatter.
Then in package explorer view right click on project then select Source > Format.
You can also create your source clean up profile here Windows > Preferences > Java > Code Style > Clean Up
Then in package explorer view right click on project then select Source > Clean up.
You have to repeat it for all projects.
If you have many many projects then try this solution