I'm running into some strange formatting issues with vscode using svelte. Whenever I create an HTML tag, say <p></p>, as soon as I save or click elsewhere, it reformats to this: <p />. I have no idea what's going on. It also doesn't seem to like certain Svelte tags like <slot></slot>. Has anyone else encountered this? If so, what did you do to fix it?
If you are using the official Svelte extension, it only comes with one way of formatting the code: Prettier.
If you want control back, turn off svelte.plugin.svelte.format.enable. You could also create a .prettierrc and see if there are any Prettier options to change this particular behavior.
By the way: Even though something like <div /> would be invalid in HTML, it is not in Svelte because the code gets compiled anyway.
If you have just a div like that in a component, it gets compiled to:
function create_fragment(ctx) {
let div;
return {
c() {
div = element("div");
},
m(target, anchor) {
insert(target, div, anchor);
},
p: noop,
i: noop,
o: noop,
d(detaching) {
if (detaching) detach(div);
}
};
}
Or with SSR:
const App = create_ssr_component(($$result, $$props, $$bindings, slots) => {
return `<div></div>`;
});
If you are using Svelte for VS Code extension, you can enable svelte strict mode in extension settings, or put this in settings.json
"svelte.plugin.svelte.format.config.svelteStrictMode": true
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|}"
}
}
Is it possible to have stylelint detect when I have a typo in a named color? Like detecting that color: pruple is wrong, the real color name being purple.
So far I can only find rules for forcing all colors to be hex/alpha/named, but no check to validate the actual named values.
Is it possible to have stylelint detect when I have a typo in a named color?
Yes, by using the csstree-validator plugin. It will validate the property-value pairs of declarations, including those where the value can contain <color> types.
{
"plugins": [
"stylelint-csstree-validator"
],
"rules": {
"csstree/validator": true
}
}
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 currently have my extended_valid_elements set up as follows.
using EPiServer.Editor.TinyMCE;
namespace Customer.Web.Templates.Plugins.TinyMCE
{
[TinyMCEPluginNonVisual(AlwaysEnabled = true, EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*]' }")]
public class ExtendedValidElements
{
}
}
However, I need to add the ability to enter an extra entry next to a link, as the tinyMCE is currently stripping it out.
I cant seem to get the syntax right without crashing the edit mode of the site... my logic would suggest 'iframe[*]','a[data-lightbox]' }")] should do the trick, but it doesn't. I just get an error.
Any ideas? Many Thanks.
Marc.
According to the TinyMCE documentation,
When adding a new attribute by specifying an existing element rule
(e.g. img), the entire rule for that element is over-ridden so be sure
to include all valid attributes not just the one you wish to add.
So try
EditorInitConfigurationOptions = "{ extended_valid_elements: 'iframe[*], a[name|href|target|title|data-lightbox]' }")]
I would consider using an asterisk in place of the word 'lightbox' to allow any data attribute to be used.
if that doesn't work, you can find more information at about valid_elements and extended_valid_elements on the TinyMCE site.
Hope this helps