PhpStorm报HTML注释Selector matches unknown element警告如何解决

运行环境 #

• PHP 8.0
• PhpStorm 2021.2
• Runtime version: 11.0.11+9-b1504.13 amd64
• Windows 10

问题复现 #

你编写的如下HTML代码触发两条警告：Selector matches unknown element suppress、Selector matches unknown element JSUnresolvedLibraryURL

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title><?=$title?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="Description" content="Real Estate for sale <?=$fullAddress?>. MLS <?=$MLS?>">
    <!--suppress JSUnresolvedLibraryURL -->
    <script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
</head>

警告触发原因 #

1. 你为了抑制PhpStorm默认的外部JS库URL校验警告，手动添加了<!--suppress JSUnresolvedLibraryURL -->注释，但PhpStorm的抑制警告注释有固定语法要求，suppress关键字前必须加@符号，缺失的情况下IDE无法识别这是一条指令注释，会把suppress和JSUnresolvedLibraryURL当成未知的自定义HTML元素处理，就触发了两条未知元素匹配的警告。
2. 原本的JSUnresolvedLibraryURL警告是PhpStorm的内置校验逻辑：IDE会检查所有外部引入的静态资源URL是否在其默认的可信库清单内，mapbox的CDN链接不在默认清单中，所以本来就会触发该警告，你只是在加抑制注释的时候写错了语法，额外产生了两条新警告。

解决方法 #

方法1：修正抑制注释语法（最推荐，不影响全局配置） #

将注释修改为PhpStorm认可的格式即可同时解决所有相关警告：

<!--@suppress JSUnresolvedLibraryURL -->
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>

方法2：添加URL到IDE可信列表 #

在警告的script标签上按Alt+Enter调出快速修复菜单，选择「将URL添加到已忽略库列表」，后续引入同地址资源不会再触发警告，也不需要额外加注释。

方法3：全局关闭URL校验（不推荐，会降低代码检查严谨性） #

打开PhpStorm设置，依次进入编辑器 → 检查 → JavaScript → 有效性，取消勾选「未解析的库URL」，应用后所有同类URL校验警告都会消失。

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