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

Question

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