vscode 自動(dòng)補(bǔ)全

VS Code 當(dāng)中的自動(dòng)補(bǔ)全內(nèi)容，其實(shí)是由語言服務(wù)來提供的。本文介紹VS Code自動(dòng)補(bǔ)全功能和VS Code自動(dòng)補(bǔ)全設(shè)置。

VS Code 為編程語言工作者提供了統(tǒng)一的 API ，即 Language Server Protocol，每種語言都能夠通過實(shí)現(xiàn)這個(gè) API 在 VS Code 上得到類似 IDE 的開發(fā)體驗(yàn)，而各個(gè)語言根據(jù)這個(gè) API 實(shí)現(xiàn)的服務(wù)，就被稱為語言服務(wù)。

VS Code自動(dòng)補(bǔ)全功能

語言服務(wù)會根據(jù)當(dāng)前的項(xiàng)目、當(dāng)前的文件，以及光標(biāo)所在的位置，為我們提供一個(gè)建議列表。這個(gè)列表包含了在當(dāng)前光標(biāo)位置下我們可能會輸入的代碼。當(dāng)我們不斷地輸入字符，VS Code 就會根據(jù)當(dāng)前輸入的字符，在這個(gè)列表進(jìn)行過濾。

function foo() {
 bar("Hello World");
}

foo()

function bar(a) {

}

JavaScript

今天我們繼續(xù)使用一段 JavaScript 代碼來做例子。當(dāng)我們在編輯器里輸入 console. 之后，VS Code 里的 JavaScript 語言服務(wù)，會給我們建議與 console 相關(guān)的 API。

當(dāng)我們找到了合適的函數(shù)后，按下 Tab 鍵或者回車鍵就可以將其補(bǔ)全。

如果我們偶爾覺得這個(gè)自動(dòng)補(bǔ)全窗口是多余的，希望暫時(shí)不看到它，可以按下 Escape 鍵將其隱藏。后續(xù)如果希望再次看到這個(gè)窗口，除了通過打字來將其調(diào)出以外，我們還可以按下 “Ctrl + 空格鍵”來手動(dòng)地調(diào)出建議列表。

剛才我們提到，VS Code 會根據(jù)我們輸入的字符在這個(gè)建議列表里進(jìn)行過濾。同時(shí)，這個(gè)過濾是允許我們犯一點(diǎn)小錯(cuò)誤的，比如打字特別快的時(shí)候少打一個(gè)字母，VS Code 也能處理這個(gè)情況。比如在下面的動(dòng)圖里，我想使用 console 里的 debug 函數(shù)，但是我只打了 db 兩個(gè)字母，建議列表依然為我提供了 debug 這個(gè)選項(xiàng)。

VS Code自動(dòng)補(bǔ)全設(shè)置

上面的這幾個(gè)窗口，它們都是通過我們輸入的內(nèi)容自動(dòng)觸發(fā)的，也就是說，編程語言決定了我們什么時(shí)候看到什么內(nèi)容。雖然我們可以通過快捷鍵將其快速地關(guān)閉和喚出，但是有的時(shí)候自動(dòng)補(bǔ)全窗口出現(xiàn)得過于頻繁，也是會影響我們的編程體驗(yàn)的，畢竟懸浮窗口會遮蓋一部分代碼，影響我們的閱讀。

不過，我們可以通過幾個(gè)設(shè)置，控制自動(dòng)補(bǔ)全窗口出現(xiàn)的頻率和方式，甚至這個(gè)窗口的大小。

首先我們可以通過設(shè)置 “editor.quickSuggestions” 來決定在什么語境下自動(dòng)補(bǔ)全窗口會被喚出。默認(rèn)設(shè)置如下：

 "editor.quickSuggestions": {
    "other": true,
    "comments": false,
    "strings": false
  }

JSON

這個(gè)配置有三個(gè)選項(xiàng)：other、comments和strings。其中，comments 就是代碼注釋，strings 就是指字符串。默認(rèn)情況下，當(dāng)光標(biāo)在代碼注釋或者字符串里，自動(dòng)補(bǔ)全窗口就不會被自動(dòng)喚出了。但如果你希望這個(gè)窗口永遠(yuǎn)不被自動(dòng)喚出，那么你就需要將“other” 也改為 “false”。

這時(shí)你可能會問了，如果關(guān)閉了這個(gè)設(shè)置，我想看到自動(dòng)補(bǔ)全該怎么辦呢？不用擔(dān)心，當(dāng)你按下 “Ctrl + 空格鍵” 之后，這個(gè)窗口依然會被打開，不管設(shè)置是關(guān)閉還是開啟的狀態(tài)。看到這個(gè)設(shè)置，你肯定也就明白了，為什么默認(rèn)情況下你在寫注釋的時(shí)候沒有代碼自動(dòng)補(bǔ)全的提示了吧。

參數(shù)預(yù)覽窗口也是一樣的，你可以通過參數(shù) “editor.parameterHints.enabled” 將其關(guān)閉。當(dāng)你覺得自己需要看一看參數(shù)預(yù)覽時(shí)，按下快捷鍵或者通過命令面板就能夠?qū)⑵浯蜷_了。

上面的這個(gè)設(shè)置決定“是與否”的問題，但你也可以控制自動(dòng)補(bǔ)全窗口出現(xiàn)的時(shí)間。自動(dòng)補(bǔ)全窗口監(jiān)聽文件內(nèi)容的變化，當(dāng)你停止輸入時(shí)，它就會試著給你提供建議。但是有的時(shí)候你打字稍微快一些，自動(dòng)補(bǔ)全窗口才剛剛出現(xiàn)，你就輸入了更多的內(nèi)容，緊接著代碼服務(wù)就要重新計(jì)算并提供建議了。如果你希望減少這種不必要的提示，可以增大設(shè)置 “editor.quickSuggestionsDelay” 的值，這樣在你輸入完代碼后，自動(dòng)補(bǔ)全窗口就會多等一會兒，然后再跳出來。

其他幾個(gè)自動(dòng)補(bǔ)全的設(shè)置，你可以在設(shè)置里搜一搜 “editor.suggest”，自己修改玩一玩。

VS Code基于單詞的自動(dòng)補(bǔ)全

上面提到的幾個(gè)功能，它們都依托于語言服務(wù)來提供內(nèi)容。但是有的時(shí)候，語言服務(wù)并不完美。編輯器于是提供了一種相對 “笨” 一些的提示，那就是基于單詞的提示。編輯器通過分析當(dāng)前的文件里的內(nèi)容，進(jìn)行簡單的正則表達(dá)式匹配，給我們建議已經(jīng)出現(xiàn)過的單詞。

當(dāng)然，如果你覺得語言服務(wù)的提示已經(jīng)足夠好了，不需要這么暴力、這么笨的文本提示，那你也可以通過設(shè)置 “editor.wordBasedSuggestions” 將其關(guān)閉。