How to configure sass and ESLint in svelte project?

Question

I am new in svelte. I trying to add ESLint to my svelte project. My eslintrc.json:

{
  "env": {
    "es6": true,
    "browser": true,
    "node": true
  },
  "extends": [
    "standard", "airbnb-base/legacy"
  ],
  "plugins": [
    "svelte3"
  ],
  "overrides": [
    {
      "files": ["**/*.svelte"],
      "processor": "svelte3/svelte3"
    }
  ],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2019,
    "sourceType": "module"
  }
} 

It works, but linter rules does not support sass syntax. I have this error.

How can I fix it?

Answer 1

If you're using some sort of preprocessor on the component styles, then it's likely that when this plugin calls the Svelte compiler on your component, it will throw an exception. In a perfect world, this plugin would be able to apply the preprocessor to the component and then use source maps to translate any warnings back to the original source. In the current reality, however, you can instead simply disregard styles written in anything other than standard CSS. You won't get warnings about the styles from the linter, but your application will still use them (of course) and compiler warnings will still appear in your build logs.

This setting can be given a function that accepts an object of attributes on a tag (like that passed to a Svelte preprocessor) and returns whether to ignore the style block for the purposes of linting.

The default is to not ignore any styles.

 settings: {
    'svelte3/ignore-styles': () => true
  }

Answer 2

I faced the same issue and there is no documentation on how to use the svelte3/ignore-styles in settings to ignore the styles in eslint. Here is how i fixed the issue -

I Changed .eslintrc to .eslintrc.js in order to use the ignore rule as a function -

module.exports = {
    ...
    
    "rules" : {

    },

    "settings": {
      "svelte3/ignore-styles": () => true
    }

}