如何在svelte项目中配​​置sass和ESLint？

Question

我是新手。我试图将ESLint添加到我的苗条项目中。 我的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"
  }
} 

它有效，但是linter规则不支持sass语法。我有这个错误。

我该如何解决？

Answer 1

如果您在组件样式上使用某种预处理程序，则很可能当此插件在您的组件上调用Svelte编译器时，将引发异常。在理想情况下，此插件将能够将预处理器应用于组件，然后使用源映射将所有警告转换回原始源。但是，在当前的现实中，您可以直接忽略除标准CSS之外的任何其他样式的样式。您不会从linter收到有关样式的警告，但是您的应用程序仍将使用它们（当然），并且编译器警告仍会出现在构建日志中。

可以为该设置提供一个函数，该函数接受标签上的属性对象（例如传递给Svelte预处理程序的属性），并返回是否出于样式目的忽略样式块。

默认为不忽略任何样式。

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

Answer 2

我遇到了同样的问题，并且没有关于如何在设置中使用 svelte3/ignore-styles 来忽略 eslint 中的样式的文档。这是我解决问题的方法 -

我将 .eslintrc 更改为 .eslintrc.js 以便将忽略规则用作函数 -

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

    },

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

}