SCSS linting

[bleucitron]

Hello!
If i understand correctly, this is the official repo for VSCode Svelte extension, and UnwrittenFun's repo is not maintained anymore.

There are quite a few issues in the legacy repo that raise the issue of incorrect SCSS linting within the extension, and it seems this problem is still present in this official extension.

To quote a few:
jamesbirtles/svelte-vscode#103 (comment)
jamesbirtles/svelte-vscode#113

Are there some instructions we are still missing to allow clean linting of SCSS in .svelte files ?

[dummdidumm]

We did not have time/resources to look into these old issues yet, so they probably still persist. We hope to look into those issues soon. Thanks for pointing them out.

[orta]

And you're welcome to take a look at fixing them too 👍

[bleucitron]

I'm a total newbie on writing a VS Code extension, but i'd be happy to learn.
Any suggestion on where/how to begin ?

[orta]

https://code.visualstudio.com/api/language-extensions/embedded-languages is an overview of the techniques used in these tools - once you get how the tutorial works, then you'll get how this repo works 👍

[dummdidumm]

From what I understand so far there are two error sources:

CSSPlugin

We have a CSSPlugin class which uses vscode-css-languageservice to do the work for us. If this throws errors you get error messages which are attributed to "scss", for example "scss(unknownProperties)" - these attributions appear behind the error message. It should not matter if you enable preprocessors or not for this part of the linting/highlighting experience of style-tags. The vscode-css-languageservice package, which handles css/less/scss (note: not sass) is not dependent on node-sass.

SveltePlugin

Our SveltePlugin class tries to compile the svelte file and extracts the diagnostics. If this throws errors you get error messages which are attributed to "svelte", for example "svelte(css-syntax-error)" - these attributions appear behind the error message. If this happens, it means something goes wrong while compiling, most likely while preprocessing already.

Since I cannot reproduce the issue, it would be great if you could first check yourself if the errors you are getting are attributed to "scss" or "svelte" and report in here.

Then, you could dig deeper and try to debug it yourself.

1. First uninstall the svelte-beta extension
2. Follow instructions here to setup and run the extension in dev mode.
3. Open a svelte file to reproduce your issue in the opening "Extension Development Host" window.

If the error is attributed to "svelte":

1. Set at debug point at this line in the SveltePlugin
2. Do some modification to your svelte file (adding a space or whatever) to trigger recompilation of the svelte file
3. It should now stop at your break point, debug from there on to see what happens.

If the error is attributed to "scss":

1. Set a degbug point at this line in the CSSPlugin
2. Do some modification to your svelte file (adding a space or whatever) to trigger recompilation of the svelte file
3. It should now stop at your break point, debug from there on to see what happens.

Don't forget to reinstall the extension afterwards 😄

[bleucitron]

Thanks for all the tips. I'll try to give it a go this weekend.

[dummdidumm]

Any update on this @iOiurson ? If the error still exists, could you tell us exactly what the error says? What OS/IDE/Plugin do you use? What Plugins apart from the one for svelte do you use in the IDE?

[bleucitron]

Sorry, i haven't had the time to look into it at all.
I'll keep you posted when i do, soon i hope.

[dummdidumm]

@iOiurson we recently pushed an update which might have more verbose error messages for your case. Could you check what your error message says now, and if it is something like "some suggestions: X, Y, Z", did you try all suggestions?

[dummdidumm]

Anyone still experiencing issues like this? If not, I'm going to close this.

[bleucitron]

Last time i checked, i could not reproduce anymore.
I'm not sure why, this probably can be closed.