你不知道的vscode之擴充套件 | 程式碼定位

語言: CN / TW / HK

theme: cyanosis highlight: atom-one-dark


本文正在參加「金石計劃 . 瓜分6萬現金大獎」

王志遠,微醫前端技術部

前言

歡迎來到 vscode 的世界,本文目標為科普 vscode 中關於【程式碼定位】的一些設計理念,其實就是查詢,但查詢是個很龐大的話題,想想自己找半天還找不到正確位置的煩惱?

想想我們的日常搜尋,基本上就是cmd/ctrl + F在當前檔案根據關鍵詞進行搜尋,或者cmd/ctrl + shift + F在整個專案進行搜尋,這其實搜尋裡最簡單的功能,舉下面幾個例子吧

  • 報錯資訊中存在檔案路徑和行號,改怎麼定位
  • 關鍵詞在檔案多處出現,限定查詢函式,該怎麼縮小範圍
  • 模組化下,搜尋函式的呼叫處或被呼叫函式的定義處

這些問題,如果只採用搜索關鍵詞,就會變得很低效而且結果不精確

整體思路

在 vscode 中,功能的支援大體分為三個層面:檔案查詢、內容查詢、語言層面查詢;

檔案查詢主要關注範圍:專案內、已開啟檔案中;

內容查詢主要關注條件:根據內容查詢、根據所在行數(+檔名)查詢;

語言層面查詢主要關注邏輯:符號(變數)查詢、函式、類、介面的宣告與實現(呼叫)

接下來,讓我們開始逐一解釋吧!

檔案查詢

專案內查詢

專案內最常見的是根據檔名或專案相對路徑進行查詢,對應命令是cmd+p喚起命令面板,然後輸入檔案路徑即可

已開啟檔案中

如果開啟檔案過多,想找其中的一個檔案就比較麻煩了,這是我們可以Ctrl+Tab,就可以開啟一個檔案列表,這個列表羅列了當前開啟的所有檔案。接下來,你可以通過按下 “Tab”鍵在這個列表裡跳轉,選擇你想要開啟的檔案。

內容查詢

根據內容查詢�

| 需求 | 快捷鍵 for mac | 快捷鍵 for win | | ------- | -------------------------------------- | ---------------- | | 檔案內搜尋內容 | cmd + F | ctrl + F | | 專案內搜尋內容 | cmd + shift + F (這個快捷鍵很容易被搜狗輸入法佔用,請留意) | ctrl + shift + F |

關鍵詞查詢還支援三個功能項

  • 第一個是大小寫敏感:預設忽略,搜尋的結果是否要跟關鍵詞大小寫完全一致

  • 全單詞匹配:預設忽略,勾選時會排除搜尋的單詞恰好是別的某個單詞中間一部分的情況

  • 正則表示式匹配:勾選時會開啟正則匹配

根據所在行數(+檔名)查詢

| 需求 / 對應命令 | 快捷鍵 for mac | 快捷鍵 for win | | ----------------------------------------------- | ----------- | ----------- | | 開啟指定檔案的指定行,不指定 filename 預設當前檔案 / [filename]?:[行數] | ctrl + g | |

語言層面查詢

符號(變數)查詢

VS Code 提供了一套 API 給語言服務外掛,它們可以分析程式碼,告訴 VS Code 專案或者檔案裡有哪些類、哪些函式或者識別符號(我們把這些統稱為符號)。

| 需求 / 對應命令 | 快捷鍵 for mac | 快捷鍵 for win | | -------------------------------------- | --------------- | ---------------- | | 模糊查詢當前檔案符號,不填預設展示所有(如果加上:會分類展示)/ @[:]? | Cmd + Shift + O | Ctrl + Shift + O | | 模糊查詢當前開啟的檔案列表中的符號 ,不填預設為空 / # | cmd + T | |

函式、類、介面的宣告與實現(呼叫)

很簡單,一個F12解決一切。游標在使用者上時,按下F12會跳轉到定義的位置;游標在定義上時,按下F12,vscode 會開啟一個引用列表,點選引用即會跳轉到指定位置(目前跨檔案的引用是不會被檢索到的)。

尾聲

轉眼間本系列也快整理完啦,無論什麼知識,搭建網路的重要性不言而喻,積極學習,步履不止!

系列文章目錄

對於 vscode 的相關分享,大致如下,系列文章目錄如下