現已釋出!閱讀關於 11 月新增功能和修復的內容。

使用 Visual Studio Code 編輯 JSON

JSON 是一種資料格式,在 package.jsonproject.json 等配置檔案中很常見。我們在 Visual Studio Code 中也廣泛使用它來配置我們的檔案。開啟以 .json 結尾的檔案時,VS Code 會提供相關功能,以簡化檔案內容的編寫或修改。

JSON within VS Code

IntelliSense 和驗證

對於 JSON 資料(無論是否包含模式),我們都會在您鍵入時透過 IntelliSense 提供屬性和值的建議。您也可以透過 **觸發建議** 命令手動檢視建議(⌃Space (Windows、Linux Ctrl+Space))。

我們還會根據關聯的 JSON 模式執行結構和值驗證,並顯示紅色波浪線。要停用驗證,請使用 json.validate.enable 設定

IntelliSense

包和專案依賴項

我們還為 package.jsonproject.jsonbower.json 中特定值集(如包和專案依賴項)提供 IntelliSense。

快速導航

JSON 檔案可能很大,我們透過 **轉到符號** 命令(⇧⌘O (Windows、Linux Ctrl+Shift+O))支援透過屬性進行快速導航。

Goto Symbol

懸停資訊

當您將滑鼠懸停在 JSON 資料(無論是否包含模式)的屬性和值上時,我們會提供附加的上下文資訊。

Hover

格式化

您可以使用 ⇧⌥F (Windows Shift+Alt+F,Linux Ctrl+Shift+I) 或上下文選單中的 **格式化文件** 來格式化您的 JSON 文件。

摺疊

您可以使用行號和行首之間的裝訂線上的摺疊圖示來摺疊原始碼區域。所有物件和陣列元素都支援摺疊區域。

帶註釋的 JSON

除了遵循 JSON 規範的預設 JSON 模式外,VS Code 還提供 **帶註釋的 JSON** (jsonc) 模式。此模式用於 VS Code 配置檔案,如 settings.jsontasks.jsonlaunch.json。在 **帶註釋的 JSON** 模式下,您可以使用單行註釋 (//) 和塊註釋 (/* */),就像在 JavaScript 中一樣。該模式還支援尾隨逗號,但不推薦使用,並且編輯器會顯示警告。

當前編輯器模式顯示在編輯器的狀態列中。選擇模式指示器以更改模式並配置副檔名如何與模式關聯。您也可以直接修改 files.associations 設定,將檔名或檔名模式與 jsonc 關聯。

JSON 模式和設定

為了理解 JSON 檔案的結構,我們使用 JSON 模式。JSON 模式描述了 JSON 檔案的形狀,以及值集、預設值和描述。VS Code 隨附的 JSON 支援支援從 draft 4 到 draft 7 的所有草案版本,並有限支援 drafts 2019-09 和 2020-12。

JSON Schema Store 這樣的伺服器為大多數常見的基於 JSON 的配置檔案提供模式。但是,模式也可以在 VS Code 工作區的檔案中定義,以及在 VS Code 的設定檔案中定義。

JSON 檔案與模式的關聯可以透過 JSON 檔案本身使用 $schema 屬性完成,或者在使用者或工作區 設定檔案 > 首選項 > 設定)的 json.schemas 屬性下完成(json.schemas)。

VS Code 擴充套件也可以定義模式和模式對映。因此,VS Code 已經瞭解了某些知名 JSON 檔案(如 package.jsonbower.jsontsconfig.json)的模式。

JSON 中的對映

在下面的示例中,JSON 檔案指定其內容遵循 CoffeeLint 模式。

{
  "$schema": "https://json.schemastore.org/coffeelint",
  "line_endings": "unix"
}

請注意,此語法是 VS Code 特有的,不屬於 JSON Schema 規範。新增 $schema 鍵會改變 JSON 本身,而使用 JSON 的系統可能不會期望這樣做,例如,模式驗證可能會失敗。如果出現這種情況,您可以使用其他對映方法之一。

使用者設定中的對映

以下使用者 設定摘錄顯示瞭如何將 .babelrc 檔案對映到位於 https://json.schemastore.org/babelrcbabelrc 模式。

"json.schemas": [
    {
        "fileMatch": [
            "/.babelrc"
        ],
        "url": "https://json.schemastore.org/babelrc"
    }
]

提示: 除了為 .babelrc 定義模式外,還要確保將 .babelrc 關聯到 JSON 語言模式。這也可以在設定中使用 files.association 陣列設定來完成。

對映到工作區中的模式

要對映位於工作區中的模式,請使用相對路徑。在此示例中,工作區根目錄中名為 myschema.json 的檔案將用作所有以 .foo.json 結尾的檔案的模式。

"json.schemas": [
    {
        "fileMatch": [
            "**/*.foo.json"
        ],
        "url": "./myschema.json"
    }
]

對映到設定中定義的模式

要對映在使用者或工作區設定中定義的模式,請使用 schema 屬性。在此示例中,定義了一個模式,該模式將用於所有名為 .myconfig 的檔案。

"json.schemas": [
    {
        "fileMatch": [
            "/.myconfig"
        ],
        "schema": {
            "type": "object",
            "properties": {
                "name" : {
                    "type": "string",
                    "description": "The name of the entry"
                }
            }
        }
    }
]

對映擴充套件中的模式

模式和模式關聯也可以由擴充套件定義。請檢視 jsonValidation contribution point

檔案匹配語法

檔案匹配語法支援 '*' 萬用字元。此外,您還可以定義排除模式,以 '!' 開頭。要使關聯匹配,至少需要一個模式匹配,並且最後一個匹配的模式不得為排除模式。

  "json.schemas": [
    {
      "fileMatch": [
        "/receipts/*.json",
        "!/receipts/*.excluded.json"
      ],
      "url": "./receipts.schema.json"
    }
  ]

在 JSON 模式中定義程式碼片段

JSON 模式描述了 JSON 檔案的形狀,以及值集和預設值,這些都由 JSON 語言支援用於提供補全建議。如果您是模式作者,並希望提供更自定義的補全建議,您還可以在模式中指定程式碼片段。

以下示例顯示了一個用於鍵盤快捷鍵設定檔案的模式,該檔案定義了一個程式碼片段。

{
    "type": "array",
    "title": "Keyboard shortcuts configuration",
    "items": {
        "type": "object",
        "required": ["key"],
        "defaultSnippets": [
            {
                "label": "New keyboard shortcut",
                "description": "Binds a key to a command for a given state",
                "body": { "key": "$1", "command": "$2", "when": "$3" }
            }
        ],
        "properties": {
            "key": {
                "type": "string"
            }
            ...
        }
    }
}

這是 JSON 模式中的一個示例

Default snippets in JSON schema

使用 defaultSnippets 屬性為給定的 JSON 物件指定任意數量的程式碼片段。

  • labeldescription 將顯示在補全選擇對話方塊中。如果未提供標籤,則會顯示程式碼片段的字串化物件表示形式作為標籤。
  • body 是插入到使用者選擇補全時的 JSON 物件字串。可以在字串文字中使用 程式碼片段語法來定義製表符停止、佔位符和變數。如果字串以 ^ 開頭,則字串內容將按原樣插入,而不是字串化。您可以使用此方法為數字和布林值指定程式碼片段。

請注意,defaultSnippets 不是 JSON 模式規範的一部分,而是 VS Code 特定的模式擴充套件。

在懸停提示中使用富格式

VS Code 將使用 JSON Schema 規範 中的標準 description 欄位,以便在懸停和自動補全期間提供有關屬性的資訊。

如果您希望您的描述支援連結等格式,您可以透過使用 markdownDescription 屬性中的 Markdown 來選擇加入。

{
  "$schema": "http://json-schema.org/draft-07/schema#",
  "type": "object",
  "properties": {
    "name": {
      "type": "string",
      "description": "The name of the entry",
      "markdownDescription": "The name of the entry. [See the documentation](https://example.com)"
    }
  }
}

請注意,markdownDescription 不是 JSON 模式規範的一部分,而是 VS Code 特定的模式擴充套件。

離線模式

json.schemaDownload.enable 控制 JSON 擴充套件是否從 httphttps 獲取 JSON 模式。

噹噹前編輯器需要使用無法下載的模式時,狀態列會顯示一個警告三角形。

© . This site is unofficial and not affiliated with Microsoft.