VS Code 1.61.2版本HTML/CSS文件波浪线提示的原理与设置管控方法

你遇到的compact-api/html、compact-api/css、css-prefix-order类提示不属于VS Code原生内置校验，均来自第三方扩展的规则校验，相关逻辑和调整方法如下：

波浪线提示生成逻辑 #

VS Code的代码校验提示采用「核心框架+扩展提供规则」的架构，具体流程：

1. VS Code原生仅对CSS、HTML做基础语法错误校验，不会输出兼容性、编码规范类提示
2. 你安装的校验类扩展（大概率是Stylelint加兼容校验插件、或独立的浏览器兼容检查扩展）会在文件打开/修改时，在后台扫描代码内容，匹配预设规则
3. 命中规则后，扩展会将提示等级（错误/警告/信息）、文案、对应代码位置返回给VS Code
4. VS Code根据返回结果，在对应代码位置渲染对应颜色的波浪线，同时在「问题」面板汇总所有提示

你遇到的三类提示对应规则来源：

• compact-api/html、compact-api/css：浏览器兼容性校验规则，对照Can I Use数据库检查代码在目标浏览器的支持情况
• css-prefix-order：CSS编码规范规则，要求带厂商前缀的属性写在标准属性之前

你遇到的具体提示示例：

• meta[name=theme-color]不被Firefox、Firefox安卓版、Internet Explorer、Opera、Safari < 15、iOS端Safari < 15支持（compact-api/html）
• transition应当排在-moz-transition之后（css-prefix-order）
• display: grid不被Internet Explorer支持，可添加display: -ms-grid以兼容Internet Explorer 10及以上版本（compact-api/css）

提示效果截图：

提示管控调整方法 #

可根据你的项目需求，选择以下几种调整方式：

完全关闭某类提示 #

• 若不需要该类校验，可直接禁用对应的扩展
• 若保留扩展但关闭指定规则，可在对应扩展的配置文件中修改：
  以Stylelint为例，在项目根目录的.stylelintrc配置文件中添加如下配置即可：

  {
    "rules": {
      "compact-api/html": "off",
      "compact-api/css": "off",
      "css-prefix-order": "off"
    }
  }
  

  也可以打开VS Code设置面板（快捷键Ctrl+,/Cmd+,），搜索对应扩展的规则开关，手动关闭。

自定义规则校验逻辑 #

如果需要保留校验但适配项目需求，可修改规则参数：

• 兼容性规则：可指定项目兼容的浏览器范围，比如不需要兼容IE时，从兼容目标中移除ie，相关IE兼容提示就会自动消失
• 前缀排序规则：可调整排序逻辑配置，匹配项目现有编码规范

临时忽略单条提示 #

如果仅某一处代码不需要触发校验，可添加对应的忽略注释，以Stylelint为例：

/* stylelint-disable-next-line css-prefix-order */
transition: all .3s;

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