ESLint的import/order规则对.scss文件不生效该如何解决？

缺失配置项说明&修复方案 #

你当前的配置缺少三处必要配置，调整后的完整规则配置如下：

rules: {
  // 首先要为规则设置校验等级，warn/error才会触发告警
  'import/order': ['error', {
    pathGroups: [
      {
        pattern: '*.scss',
        group: 'type',
        patternOptions: { matchBase: true },
        position: 'after'
      }
    ],
    // 不要排除任何导入类型，确保.scss后缀的导入能被规则匹配
    pathGroupsExcludedImportTypes: []
  }]
}

配置修改点说明

• 必须显式给import/order规则设置校验等级，ESLint规则默认处于关闭状态，仅传入规则参数不会生效
• 将原配置的group: 'index'调整为group: 'type'：eslint-plugin-import内置的导入分组默认排序为builtin > external > internal > unknown > parent > sibling > index > object > type，type是默认排序的最后一个分组，设置position: 'after'后.scss文件会排在type分组之后，也就是所有导入项的最底部
• 新增pathGroupsExcludedImportTypes: []配置：该配置默认值为['type']，会排除类型导入的pathGroups匹配，置空后可确保所有.scss后缀的导入都能被规则识别匹配

如果调整配置后仍未触发告警，可以检查是否已经在ESLint配置的plugins字段中声明了import插件，以及是否存在其他ESLint规则和import/order规则冲突。

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