vscode 支持json

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

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

JSON

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

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

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

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

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

JSON

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

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

JSON

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

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

"json.schemas": [

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

]

JSON

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

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

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

然后你在 `.myconfig` 里書(shū)寫(xiě) JSON 時(shí)，VS Code 就會(huì)給你提示 name 這個(gè)屬性了。

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

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

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