VSCode：@layer关键字支持中的CSS语法突出显示

Question

您可能知道，有些浏览器已经支持CSS级联层(https://caniuse.com/?search=%40layer)。此功能的主要关键字是@layer。不幸的是，VSCode显示了一条警告消息：

Unknown at rule @layer css(unknownAtRules)

​

​

在我的VSCode设置中是否有包含@layer关键字的css关键字列表？

我尝试使用"css.customData“选项。但我没能得到任何结果。我在与settings.json文件相同的文件夹中创建了cs-data.json文件。

文件的正确路径应该是什么样子？我想要一条相对路径，但我也尝试了一条绝对路径。什么都没发生。如果有问题的话，我正在使用便携式VSCode。以下是我的尝试：

"css.customData": ["c:\\app\\VSCode\\data\\user-data\\User\\css-data.json"],
"css.customData": ["css-data.json"],
"css.customData": [".\\data\\user-data\\User\\css-data.json"],
"css.customData": ["./data/user-data/User/css-data.json"],

以下是css-data.json的内容：

{
    "version": 1.0,
    "properties": [],
    "atDirectives": [
        {
            "name": "@layer",
            "description": "Declares a cascade layer."
        }
    ],
    "pseudoClasses": [],
    "pseudoElements": []
}

Answer 1

你可能只需要用

"css.customData": [".vs-code/css-data.json"]

但是，如果这样做不起作用，我用以下方式为自己修复了这个问题：

in：..vscode/setings.json

"css.customData": [".vscode/css_custom_data.json"]

然后是..vscode/css_customdata.json文件本身：

{
    "atDirectives": [
      {
        "name": "@layer",
        "description": "The @layer CSS at-rule is used to declare a cascade layer and can also used to define the order of precedence in case of multiple cascade layers.",
        "references": [
                {
                    "name": "@layer",
                    "url": "https://developer.mozilla.org/en-US/docs/Web/CSS/@layer"
                }
            ]
        }
    ]
}

但是，这不能完全允许使用@layer规范，因为@import规则仍然不能包括layer()作为示例：

@layer reset, pallet, base, layout, local;
@import "style/reset.css"   layer(reset);      /* unifies / css reset */
@import "style/pallet.css"  layer(pallet);     /* color pallets */
@import "style/main.css"    layer(base);       /* primary css*/

现在抛出3个错误和0警告，而如果没有这个修复，它也会抛出一个警告。

Answer 2

@layer和@property将在vscode v1.72中得到支持--将于2022年10月初发布。

请参阅1.72发行说明

CSS语言支持现在还可以理解@property和@layer at-rules。

Answer 3

我猜这只是一个没有在VSCode内部CSS指针中更新的规则。

为了寻找这个警告，我偶然发现了这个手写笔问题#6084 ([at-规则-无未知]错误标志@layer)。他们通过公共关系2022年5月修复了这个问题。

我假设手写笔是VS代码的底层CSS代码，但它似乎不是。您可以安装手写笔vscode扩展 (并禁用内部VSCode CSS指针)，这样@layer错误就消失了。

​

​