如何在Svelte文件中实现Pug与SASS代码的Lint检查？

针对pug-lint的配置 #

要让pug-lint识别.svelte文件中的Pug模板，需要借助专门插件：

• 安装插件：

  npm install pug-lint-plugin-svelte --save-dev
  

• 修改.pug-lintrc.js配置文件，引入插件并开启Svelte支持：

  module.exports = {
    plugins: ['pug-lint-plugin-svelte'],
    rules: {
      // 保留你原有的Pug校验规则
    },
    svelte: {
      templateTags: ['template'] // 指定Svelte文件中包裹Pug代码的标签，默认即为template
    }
  };
  

• 更新package.json中的lint命令，让pug-lint扫描.svelte文件：

  "scripts": {
    "pug-lint": "pug-lint src/**/*.svelte src/**/*.pug"
  }
  

针对stylelint的配置 #

stylelint需要适配Svelte文件的语法结构，步骤如下：

• 安装必要依赖：

  npm install stylelint-config-svelte postcss-html --save-dev
  

• 修改.stylelintrc.js配置文件，扩展Svelte相关规则并指定文件语法：

  module.exports = {
    extends: [
      // 保留你原有的stylelint基础配置（比如stylelint-config-standard-scss）
      'stylelint-config-standard-scss',
      'stylelint-config-svelte/scss'
    ],
    overrides: [
      {
        files: ['*.svelte'],
        customSyntax: 'postcss-html'
      }
    ],
    rules: {
      // 根据需要调整规则，比如兼容Svelte的:global/:local选择器
      'selector-type-no-unknown': [true, {
        ignoreTypes: [':global', ':local']
      }]
    }
  };
  

• 更新stylelint的扫描命令，包含.svelte文件：

  "scripts": {
    "stylelint": "stylelint src/**/*.svelte src/**/*.scss src/**/*.sass"
  }
  

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