在開源 IDE 市場,近年來 Visual Studio Code(簡稱 VSCode)越來越流行。自從 2015 年對外發布後,根據 2018 年 Stack Overflow 的調查報告,有 35%的開發者轉而使用 VSCode。我接下來會介紹一些建議和技巧來讓你更有效率的使用 VSCode。 Git 和Gitlens Git 可以說是在開發者中最受歡迎的軟體,從IDE 直接操作Git 會比透過命令列簡單很多。 Git 模組可以幫助你做 stage、commit、stash、undo 等操作。 Gitlens 外掛提供了更多的可能性。 Gitlens 最有用的功能就是你可以看到每一行程式碼的 commit 歷史。 即時分享 VSCode Live Share 是實驗性的特性。官網上這樣說到: 無論建構什麼類型的應用,使用何種語言程式設計或使用何種作業系統,當需要協作時,即時共享都能夠立即將你的專案與隊友共享。隊友可即時編輯和調試,無需克隆存儲庫或設置其環境。 透過 Live Share,可以共同進行編輯和除錯,同時還可以共享音訊、伺服器、終端、差異、註解等。無論是進行程式碼評審、與隊友配對程式設計、參與 Hackathon 活動或進行互動式講座,Live Share 都可以透過多種寫作方式為你提供支援。 JSON to Code #是否經歷過,當個面對一個API,你希望它返回的數據結構能夠有一個類型定義,但又不用自己去手動定義? Paste JSON as Code 可以一鍵將 JSON 檔案轉換為目標語言的型別定義。 批次重命名 寫程式碼和維護程式碼的時候少不了做重構,特別是當你重構一個很大的模組或則很大一段程式碼的時候,一個一個去尋找和修改變數/函數名稱會很頭痛。還好 VSCode 可以幫助我們。 如果你選取一個變數/方法名,然後按 F2,你可以編輯選取的名字,整個專案中所有相關的實例都會被修改。 如果你只想修改目前文件,使用 Command F2(Mac) 或則 Ctrl F2(Windows) 指令。 跳到定義 當在寫程式碼的時候,面對一個變數/方法,往往會忘記其指代的含義。在這個時候怎麼做呢?你要花上數分鐘的時間來搜尋整個項目,定位到正確的位置。在 VSCode,你可以使用 Command(Mac)/Ctrl(Windows) 並滑鼠點選對應的變數/方法名,VSCode 會自動跳到正確的位置。 或則,你可以將遊標停留在變數/方法名,然後按下 Command(Mac)/Ctrl(Windows),會在目前遊標旁彈出變數/函數的定義。這樣省去跳到其它位置的麻煩。 多行編輯 如果你想要插入/刪除多個相同文字的實例,你可以建立一個多光標(Multiple cursor)。你可以按住 Option(Mac)/Alt(Windows) 按鍵,然後每點擊一次,遊標就在目前位置停住。每一次點擊建立一個新的遊標,然後就可以同時編輯這些位置。 在 HTML 中非常有用,特別是當你想要修改類別名稱/超鏈接,而它在多處出現的時候。 Debugger Debugger 本身內容很多,VSCode 有一個專門介紹的影片。 Youtube 視訊位址:VSCode debugging Node.js#綁定快捷鍵 如果你想高效的工作,將你常用的命令製成快捷鍵。你可以透過cheat sheet/「查看快捷鍵綁定」來快速查看核心指令。 指令控制台是你最好的朋友,你可以使用 Command p(Mac)/Ctrl p(Windows) 來開啟。輸入檔名,你可以快速跳到指定的檔案。這比你在左側專案目錄慢慢找要快得多。 ● 你可以輸入> 來查看所有可用任務 ●● 用@符號來取得目前檔案所有的Symbols(變數/函數/類別名稱/方法等等) 自訂綁定快捷鍵 #在VSCode 有一個指令缺失了,那就是「儲存所有」。我們可以自訂一個:Command Shift S(Mac)/Ctrl Shift S(Windows)。 推薦教學:vscode基礎教學#