如何配置ESLint使其适配Svelte项目中的postcss-nesting嵌套语法

这个报错是ESLint默认无法识别Svelte文件style块内的PostCSS嵌套语法导致的，按以下步骤配置即可解决：

• 安装必要依赖
  如果未安装Svelte对应的ESLint解析器和相关工具，执行以下命令：
  npm install eslint eslint-plugin-svelte svelte-eslint-parser postcss-scss --save-dev

• 修改ESLint配置文件
  以常用的.eslintrc.cjs为例，配置参考如下：

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:svelte/recommended"
  ],
  parserOptions: {
    sourceType: "module",
    ecmaVersion: "latest",
    extraFileExtensions: [".svelte"]
  },
  overrides: [
    {
      files: ["*.svelte"],
      parser: "svelte-eslint-parser",
      parserOptions: {
        // 若项目未使用TS可删除下一行
        parser: "@typescript-eslint/parser",
        svelte: {
          style: {
            lang: "postcss",
            parser: "postcss-scss"
          }
        }
      }
    }
  ],
  rules: {
    // 若仍有对应规则报错，可根据提示的规则ID针对性关闭，例如：
    // "css/no-invalid-selector": "off"
  }
};

• 可选配置（若同时使用stylelint做CSS校验）
  如果项目同时接入了stylelint校验CSS规则，需要在stylelint.config.js中添加对应支持，配置参考：

module.exports = {
  customSyntax: "postcss-html",
  plugins: ["postcss-nesting"],
  rules: {
    // 你的其他stylelint规则
  }
};

配置完成后重启ESLint服务即可正常识别嵌套语法。

内容的提问来源于stack exchange，提问作者carpet