如何在 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 预处理器的对象）并返回是否出于 linting 的目的而忽略样式块。

默认是不忽略任何样式。

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

Answer 2

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

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

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

    },

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

}