用于 CSS 网格和 CSS 模块的 vs 代码和智能感知答案

【问题标题】：vs code and intellisense for CSS Grid and CSS Modules用于 CSS 网格和 CSS 模块的 vs 代码和智能感知
【发布时间】：2017-07-20 02:26:16
【问题描述】：

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

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

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

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

【问题讨论】：

你找到解决办法了吗？
还是没有解决办法？我在使用 CSS Grid 时遇到了同样的错误。
@comfortablyNumb - 我使用扩展来解决这个问题。检查我在下面发布的答案。

标签： css visual-studio-code intellisense css-grid css-modules

【解决方案1】：

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

【讨论】：

【解决方案2】：

要让 VS Code 识别这些自定义 CSS 指令/属性，您可以为 VS Code 的 CSS 语言服务提供自定义数据，如此处所述 - https://github.com/Microsoft/vscode-css-languageservice/blob/master/docs/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 中看到您为其设置的描述

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

SCSS Grammar Extended 丹尼·麦吉
- 特点：
  - 修复了内容和光标属性名称被标记为标签选择器的问题
  - 修复了在某些情况下背景被标记为无效/已弃用的关键字的问题
  - 修复了在某些上下文中将颜色标记为属性值关键字而不是属性名称的问题
  - 空值和布尔值标记为语言常量
  - BEM 样式的 __element 和 --modifier 片段标记为类名
  - 添加了对 Angular 特定伪选择器的识别：host-context 和 ::ng-deep
Sass Syler
- 特点：
  - 升级的语法高亮显示
  - 自动完成/智能感知
  - 格式化程序
CSS Modules Syntax Highlighter 安德鲁·利德姆
- 特点：
  - @value 变量声明：常规和命名空间。
  - 组成：属性：本地和进口。
  - :global 和 :local 伪类。
SCSS IntelliSensemrmlnc
- 特点：
  - 代码完成建议（变量、mixin、函数）
  - 悬停（变量、mixins、函数）
  - 代码导航

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

【讨论】：

【解决方案5】：

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

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

【讨论】：