22

我正在为使用 CSS 网格和 CSS 模块的项目使用 VS 代码。但是，当我尝试这样的事情时

.loginRegisterDiv {
  composes: loginDiv;
  margin: 0px;
  width: 100%;
}

我收到一条错误消息，提示为 composes 撰写“未知属性”。另外我正在使用 css 网格，在 VS 代码中似乎没有任何智能感知。我需要安装扩展程序吗？

我正在使用拉力编码规则集。

4

5 回答 5

7

You can add to the VSC CSS linter an exception to the rule css.lint.unknownProperties (or set this to ignore). Open the VSC settings, search for css.lint.validProperties and add 'composes' to the list. The error/warning will go away.

于 2020-08-04T14:25:53.307 回答
2

为了让 VS Code 识别这些自定义 CSS 指令/属性，您可以为 VS Code 的 CSS 语言服务提供自定义数据，如此处所述 - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/自定义数据.md。

使用以下信息创建 CSS 自定义数据集文件。将其放置在.vscode/custom.css-data.json相对于项目根目录的位置。

{
  "version": 1.1,
  "properties": [
    {
      "name": "composes",
      "description": "css modules compose"
    }
  ],
  "atDirectives": [
    {
      "name": "@value",
      "description": "css modules value import"
    }
  ],
  "pseudoClasses": [],
  "pseudoElements": []
}

现在，如果您还没有，请创建一个.vscode\settings.json相对于项目根目录的文件。添加一个带有键“css.customData”和值的字段作为自定义数据集的路径。例如，

{
  "css.customData": ["./.vscode/custom.css-data.json"]
}

现在，您将不再收到“未知属性”警告。当您将鼠标悬停在“撰写”上时，您将看到您为其设置的描述custom.css-data.json

于 2020-11-01T12:25:30.537 回答
1

这对我有用，在你的settings.json文件中添加"css.lint.validProperties": ["composes"],

于 2021-12-09T00:40:32.217 回答
1

我使用扩展来帮助解决这个特定问题。扩展系统在 VS Code 中非常出色，社区构建了很多真正高质量的扩展，极大地提高了编辑器的质量和功能集。

以下是我在 VS Code 中编写 SASS 时使用的一些扩展。其中一个或几个应该可以解决您遇到的问题（甚至可能是一些您不知道自己遇到的问题）。

  • Danny McGee扩展的 SCSS 语法
    • 特征：
      • 修复内容和光标属性名称被标记为标签选择器
      • 修复了在某些情况下背景被标记为无效/不推荐使用的关键字
      • 修复了在某些上下文中将颜色标记为属性值关键字而不是属性名称的问题
      • 标记为语言常量的 null 和布尔值
      • BEM 样式的 __element 和 --modifier 片段标记为类名
      • 添加了对特定于 Angular 的伪选择器的识别：host-context 和 ::ng-deep
  • Syler 的Sass
    • 特征：
      • 升级语法高亮
      • 自动完成/智能感知
      • 格式化程序

  • CSS Modules Syntax Highlighter by Andrew Leeedham

    • 特征：
      • @value 变量声明：常规和命名空间。
      • 组成：属性：本地和进口。
      • :global 和 :local 伪类。

  • 由 mrmlnc 提供的SCSS IntelliSense

    • 特征：
      • 代码完成建议（变量、混入、函数）
      • 悬停（变量、混合、函数）
      • 代码导航

在 VS Code 中安装其中的一个或几个，重新启动编辑器，然后让我知道这是否不能解决您的问题。

于 2020-01-22T04:53:53.873 回答
0

已经向 vs 代码团队提出了类似的问题，但尚未解决：

https://github.com/Microsoft/vscode/issues/13003

于 2017-08-05T23:27:31.063 回答