vscode 支持json

JSON 文件你肯定已經(jīng)非常熟悉了，VS Code 的配置文件、任務(wù)系統(tǒng)、代碼片段等都是使用的 JSON 語法。比如下面的這段調(diào)試配置：

{
    // 使用 IntelliSense 了解相關(guān)屬性。 
    // 懸停以查看現(xiàn)有屬性的描述。
    // 欲了解更多信息，請訪問: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "啟動程序",
            "program": "${workspaceFolder}/index.js",
        }
    ]
}

JSON

你可能會疑惑，“JSON 按理說是不允許寫注釋的呀，為什么 VS Code 里的配置文件都可以寫類似 // comment 的內(nèi)容呢？”

這是因為 VS Code 為配置文件們都指定了一個特殊的 JSON 文件類型，稱為JSON with Comments。你可以在狀態(tài)欄的最右側(cè)看到 VS Code 的這個特殊的語言類型。

與此同時，JSON 的語言服務(wù)支持 JSON Schema。你可以通過 JSON Schema 規(guī)范 JSON 內(nèi)容的格式，并且做一定程度的語法檢查。我們可以先來看看如何給一個 JSON 文件指定 Schema。

第一種就是在 JSON 文件中直接指定，這種寫法的好處很明顯，你能夠立刻知道自己在使用的是哪個 schema。比如：

{
   "$schema": "http://json.schemastore.org/babelrc"
}

JSON

但是，有的時候你不希望把這個 schema 設(shè)置放到代碼版本管理中去，為了滿足這種需求，你可以采取第二種方法：將 schema 的配置放在個人設(shè)置，或者工作區(qū)設(shè)置中。語法如下：

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

JSON

在上面的代碼示例中，你可以看到 json.schemas 是一個數(shù)組，現(xiàn)在數(shù)組里只有一個值。這個值就是 schema 的配置，它有兩個屬性：

• fileMatch。顧名思義，這個值指定了哪些文件將會使用這個 schema。比如在上面的示例里，fileMatch 的值中有一個 /.babelrc，它意味著根目錄下的 .balelrc 文件將會使用這個 schema。
• url，指定了 schema 的存儲地址。在這個示例中，我們會從http://json.schemastore.org/babelrc 下載 schema。通過這兩個示例，當(dāng)我們在項目中使用 .babelrc 文件來書寫 babel （一個 JavaScript 編譯器）的配置時，就能獲得正確的自動補(bǔ)全和警告了。到這里你可能會好奇，這個 schema 里的內(nèi)容到底是什么呢？為什么它能夠提供智能提示和檢查呢？我們這個專欄的任務(wù)雖然不是教你如何掌握 JSON schema，但是我們還是可以來看看如何在 VS Code 里書寫 JSON schema。我們先來看如下這個簡單的例子：

"json.schemas": [

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

]

JSON

這個例子跟之前 `.babelrc` 的例子非常接近，fileMatch 現(xiàn)在指定的是 `.myconfig` 這個文件，不過第二個屬性不再是 url 了，而是 schema。這個 schema 的值，就是 JSON schema 。這個代碼示例應(yīng)該非常好理解，它指定了 `.myconfig` 里的 JSON 根對象是個 Object 對象，它有個屬性叫做 name，name 的類型必須是字符串 string。

添加了這個設(shè)置后，你可以在當(dāng)前打開的文件夾根目錄下創(chuàng)建 `.myconfig` 文件，然后在編輯器中打開。這之后你需要點擊狀態(tài)欄最右側(cè)的語言設(shè)置，默認(rèn)情況下，VS Code 并不認(rèn)識 `.myconfig` 文件，你需要點擊這個語言設(shè)置，然后選擇 JSON。

![](http://img.javatiku.cn/javatuku/json-md-3.gif)

然后你在 `.myconfig` 里書寫 JSON 時，VS Code 就會給你提示 name 這個屬性了。

![](http://img.javatiku.cn/javatuku/json-md-4.gif)

但如果你設(shè)置 name 的值時沒有使用字符串，而是使用了數(shù)字，VS Code 則會提出警告。

![](http://img.javatiku.cn/javatuku/json-md-5.gif)