vscode .svelte extension plugin doesn't play nice with style tag attributes (heads up)

[nicobrinkkemper]

As the title says. Probably a bug on the extension side. Currently all color highlighting drops when adding a attribute to the style tag. The fix: change extension to .html

[skdigital]

yep I have the exact same problem and cant get the errors to disappear. All variables and nested statements are marked as errors in vscode.

[LukasHechenberger]

Works fine for me with the svelte extension v0.9.3. If you have issues with the extension, report it in their repo instead.

If the eslint-extension is causing the issue, use .eslintrc.js to ignore scss styles like this:

module.exports = {
  plugins: ['svelte3'],
  settings: {
    'svelte3/ignore-styles': function({ type }) {
      return type === 'text/scss';
    },
  },
  overrides: [
    {
      files: ['*.svelte'],
      processor: 'svelte3/svelte3',
    },
  ],
};