vscode 面包屑導(dǎo)航

面包屑，叫做 Breadcrumb，翻譯過(guò)來(lái)就是面包屑導(dǎo)航，主要是展示目前的代碼在整個(gè)工程里的路徑，同時(shí)你還能夠看出這個(gè)代碼所在位置的結(jié)構(gòu)層級(jí)并且可以快速跳轉(zhuǎn)。這個(gè)功能相信你在瀏覽文檔類的網(wǎng)站時(shí)經(jīng)常能看到，而在 VS Code 中你能夠看到則是當(dāng)前的光標(biāo)、在哪個(gè)符號(hào)或者函數(shù)里，然后是哪個(gè)文件中、在哪個(gè)文件夾下，等等。

不過(guò)，VS Code 在最近幾個(gè)月才添加了面包屑這個(gè)功能，并且默認(rèn)是關(guān)閉的。要打開這個(gè)功能，我們需要“打開設(shè)置”（Open Settings），搜索 “breadcrumbs.enabled”，找到后將它打開。

在上圖中，從左到右，我們能夠看到一層一層文件夾的名字，然后是當(dāng)前文件名，最后則是光標(biāo)所在的函數(shù)的名字。我們可以通過(guò)點(diǎn)擊這個(gè)工具欄上的文字，然后進(jìn)行文件夾、文件或者是函數(shù)的跳轉(zhuǎn)。

這里我還可以分享一點(diǎn)這個(gè)功能的技術(shù)細(xì)節(jié)，面包屑這個(gè)功能除了 UI 部分，它底層的服務(wù)其實(shí)都是早就存在的。就比如說(shuō)在上面的截圖中，面包屑左側(cè)的文件結(jié)構(gòu)，跟我們?cè)谫Y源管理器看到的是一樣的；右側(cè)的函數(shù)名之類的，則是來(lái)自語(yǔ)言服務(wù)提供的符號(hào)；至于在這些文件和符號(hào)之間的快速跳轉(zhuǎn)，更沒(méi)有超出我們?cè)诘谄咧v “如何快速在文件、符號(hào)、代碼之間跳轉(zhuǎn)？”里介紹的內(nèi)容。

換句話說(shuō)，面包屑的功能，可以當(dāng)作一種新的文件、內(nèi)容預(yù)覽和快速跳轉(zhuǎn)的方式。