VS Code中Container Query无法被识别的问题求助

遇到的报错如下：

• 未知规则@container（css(unknownAtRules)）
• 未知属性container-type（css(unknownProperties)）
• 未知属性container-name（css(unknownProperties)）

这是因为VS Code默认的CSS语言服务未识别到容器查询的新语法，以下是两种简单解决办法：

办法一：针对性忽略相关lint报错 #

打开VS Code的设置JSON文件（快捷键Ctrl/Cmd + Shift + P，输入"Open Settings (JSON)"），添加以下配置：

"css.lint.unknownAtRules": "ignore",
"css.lint.unknownProperties": "ignore"

这种方法会直接忽略所有未知的CSS规则和属性报错，适合快速解决问题，但可能错过其他真正的语法错误。

办法二：指定支持容器查询的浏览器目标 #

同样打开设置JSON，添加配置：

"css.target": ["chrome105", "firefox103", "safari15.4"]

这些浏览器版本开始原生支持CSS容器查询，配置后VS Code会识别对应版本的合法CSS语法，不会再报错，同时还能保留对其他不合法语法的检查。

如果使用SCSS、Less等预处理器，可将配置中的css替换为scss或less，做对应语言的设置调整。

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