Question

我正在使用CSS代码来使用CSS Grid和CSS Modules进行项目。但是当我尝试这样的事情时

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

我收到一个错误，说组成＆＃34;未知属性＆＃34;为作曲。另外我使用的是css网格，在VS代码中似乎没有任何intellisense。我是否需要安装扩展程序？

我正在使用rallycoding规则集。

Answer 1

您可以将规则css.lint.unknownProperties的例外添加到VSC CSS linter中（或将其设置为忽略）。打开VSC设置，搜索css.lint.validProperties并将“ composes”添加到列表中。错误/警告将消失。

Answer 2

我使用扩展程序来解决此特定问题。该扩展程序系统在VS Code中非常出色，并且社区创建了许多非常高质量的扩展程序，这些扩展程序极大地提高了编辑器的质量和功能集。

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

SCSS Grammar Extended 作者丹尼·麦吉
- 功能：
  - 修复被标记为标签选择器的内容和光标属性名称
  - 修复了在某些情况下将背景标记为无效/不推荐使用的关键字
  - 修复在某些情况下将颜色标记为属性值关键字而不是属性名称的问题
  - 将空值和布尔值标记为语言常量
  - BEM风格的__element和--modifier片段标记为类名称
  - 增加了对特定于角度的伪选择器的识别：主机上下文和:: ng-deep
Sass 由Syler
- 功能：
  - 升级的语法突出显示
  - 自动完成/智能感知
  - 格式化程序
CSS Modules Syntax Highlighter 作者Andrew Leedham
- 功能：
  - @value变量清除：常规和命名空间。
  - 组成：属性：本地和进口。
  - ：global和：local伪类。
SCSS IntelliSense 由mrmlnc
- 功能：
  - 代码完成建议（变量，mixin，函数）
  - 悬停（变量，mixin，函数）
  - 代码导航

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

Answer 3

类似的问题已经提交给vs代码团队，但尚未得到解决：

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

Answer 4

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

使用以下信息创建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

中看到为其设置的说明

vs CSS Grid和CSS Modules的代码和intellisense

4 个答案: