用於 CSS 網格和 CSS 模塊的 vs 代碼和智能感知

Question

我在一個使用 CSS Grid 和 CSS Modules 的項目中使用 VS 代碼。 但是，當我嘗試這樣的事情時

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

我收到一條錯誤消息，提示為 composes 撰寫“未知屬性”。 另外，我正在使用 css grid，在 VS 代碼中似乎沒有任何智能感知。 我需要安裝擴展嗎？

我正在使用rallycoding 規則集。

Answer 1

您可以向 VSC CSS css.lint.unknownProperties添加規則css.lint.unknownProperties的例外（或將其設置為忽略）。 打開 VSC 設置，搜索css.lint.validProperties並將“ css.lint.validProperties添加到列表中。 錯誤/警告將消失。

Answer 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為其設置的描述

Answer 3

我使用擴展來幫助解決這個特定問題。 VS Code 中的擴展系統非常優秀，社區構建了很多真正高質量的擴展，大大提高了編輯器的質量和功能集。

以下是我用於在 VS Code 中編寫 SASS 的一些擴展。 其中一個或幾個應該可以解決您遇到的問題（甚至可能是您不知道遇到的一些問題）。

• Danny McGee 擴展的SCSS 語法
  • 特征：
    • 修復了被標記為標記選擇器的內容和光標屬性名稱
    • 修復了背景在某些上下文中被標記為無效/不推薦使用的關鍵字的問題
    • 修復了在某些上下文中將顏色標記為屬性值關鍵字而不是屬性名稱的問題
    • 標記為語言常量的空值和布爾值
    • BEM 風格的 __element 和 --modifier 片段標記為類名
    • 添加了對特定於 Angular 的偽選擇器的識別：host-context 和 ::ng-deep
• Syler 的Sass
  • 特征：
    • 升級語法高亮
    • 自動完成/智能感知
    • 格式化程序

• CSS Modules Syntax Highlighter by Andrew Leedham

  • 特征：
    • @value 變量聲明：常規和命名空間。
    • 組成：屬性：本地和進口。
    • :global 和 :local 偽類。

• 由 mrmlnc 提供的SCSS 智能感知

  • 特征：
    • 代碼完成建議（變量、mixin、函數）
    • 懸停（變量、mixin、函數）
    • 代碼導航

在 VS Code 中安裝其中一個或多個，重新啟動編輯器，然后讓我知道這是否不能解決您的問題。

Answer 4

類似的問題已經向 vs Code 團隊提出，但尚未得到解決：

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

Answer 5

這對我"css.lint.validProperties": ["composes"], ，在您的settings.json文件中添加"css.lint.validProperties": ["composes"],