与 CSS 网格和 CSS 模块的代码和智能感知相比

Question

我正在将 VS 代码用于使用 CSS 网格和 CSS 模块的项目。然而当我尝试这样的事情时

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

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

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

Answer 1

这对我有用，在您的

settings.json

文件中添加

"css.lint.validProperties": ["composes"],

Answer 2

您可以向 VSC CSS linter 添加规则

css.lint.unknownProperties

的例外（或将其设置为忽略）。打开 VSC 设置，搜索

css.lint.validProperties

并将“撰写”添加到列表中。错误/警告将会消失。

Answer 3

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

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

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

• CSS 模块语法荧光笔 作者：Andrew Leedham

  • 特点：
    • @value 变量减速：常规和命名空间。
    • 组成：属性：本地和导入。
    • :global 和 :local 伪类。

• SCSS IntelliSense 作者：mrmlnc

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

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

Answer 4

为了使 VS Code 识别这些自定义 CSS 指令/属性，您可以为 VS Code 的 CSS 语言服务提供自定义数据，如此处所述 - https://github.com/Microsoft/vscode-css-languageservice/blob/master/文档/customData.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

中看到您为其设置的描述

Answer 5

类似的问题已向 VS Code 团队提出，但尚未得到解决：

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

Answer 6

我也遇到了同样的问题，但是对于 Sass，在我的

styles.module.scss

文件中：

只需转到“设置”>“扩展”>“CSS 语言功能”>“SCSS (Sass)”
或搜索

SCSS Lint Valid Properties

并添加项目

composes

或在settings.json中添加

"scss.lint.validProperties": [ "composes" ]

_{和Voilà警告终于消失了！}