How to ignore an false error in visual studio code? - visual-studio-code

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?

Related

Have VSCode ignore specific reference links in markdown validation

In Visual Studio Code with Markdown validation enabled (markdown.validate.enabled: true), I can ignore links to specific files that may not exist in the current context via the markdown.validate.ignoredLinks setting. However, that setting does not seem to apply to reference links (e.g. [link]: some-reference), nor can I find a corresponding setting specific to reference links.
Why do I want this? My specific use-case involves an extension the "standard" (CommonMark) markdown format to auto-generate a table-of-contents using the following syntax (and no, I don't expect VSCode to generate a preview of that TOC):
[[_TOC_]]
<!-- or -->
[TOC]
VScode happily generates a warning for such links, namely:
No link definition found: 'TOC' (link.no-such-reference)
Somewhat obviously, I can make the warning disappear I define a (bogus) TOC reference, such as:
[toc]: bogus
I can also disable validation of all reference links ("markdown.validate.referenceLinks.enabled": false), but I don't want to do that. I want to ignore the error for a specific reference, much like one can ignore a GLOB pattern for file links (markdown.validate.ignoredLinks).
Does anyone know of a such a setting before I submit a bug/missing-feature report?

How do I use VSCode css.customData for postcss syntax

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|}"
}
}

VS Code - Dynamically link IntelliSense to files from Extension

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

Extending vscode 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}')}"
}
}

Eclipse formatting cause CSS to stop working

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");