Angular项目使用stylelint时如何忽略-webkit/-moz-box-shadow属性

你当前配置中开启的property-no-vendor-prefix: true规则，就是导致--fix时自动移除厂商前缀属性、替换为标准属性的原因。stylelint原生支持给该规则配置特定属性例外，不需要额外安装插件，直接修改配置即可生效。

具体修改步骤 #

1. 找到.stylelintrc.json中rules下的property-no-vendor-prefix配置项
2. 将原来的布尔值true替换为数组配置，在第二个参数的ignoreProperties字段中填入需要保留厂商前缀的标准属性名即可

修改后的对应规则片段如下，其余原有配置保持不变：

{
  "rules": {
    // 其他原有规则无需改动
    "property-no-vendor-prefix": [
      true,
      {
        "ignoreProperties": ["box-shadow"]
      }
    ]
  }
}

配置说明：ignoreProperties中填写的是不带厂商前缀的标准属性名，配置完成后，该属性对应的所有厂商前缀写法（包括-webkit-box-shadow、-moz-box-shadow、-ms-box-shadow等）都会被规则忽略，既不会触发校验报错，也不会在执行--fix命令时被自动替换为标准属性。如果有其他需要保留前缀的属性，直接在数组里追加对应的标准属性名即可。

其他同类型规则的例外配置 #

如果你后续还需要给其他厂商前缀相关规则配置例外，这几个规则也支持类似的忽略参数：

• value-no-vendor-prefix：通过ignoreValues配置忽略特定属性值的前缀校验
• selector-no-vendor-prefix：通过ignoreSelectors配置忽略特定选择器的前缀校验
• at-rule-no-vendor-prefix：通过ignoreAtRules配置忽略特定@规则的前缀校验
• media-feature-name-no-vendor-prefix：通过ignoreMediaFeatureNames配置忽略特定媒体特性名的前缀校验

配置保存后重新执行stylelint命令即可验证效果。

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