Visual Studio Code 實用小技巧：功能設定與快捷鍵

這篇文章將搜集一些 VSCode 的好用小技巧，例如快捷鍵的操作或是設定選項。VSCode 通常每個月都會推出新版，功能一多一雜，如果不經常使用就是很容易忘記！另外還有一些新功能是可以取代延伸模組，像這些舊插件就可以移除嘍~

設定：啟用成對方括弧指引線

前往設定搜尋 「editor.guides.bracketPairs」並設為為 true 開啟，當在括弧中編輯時會出現實線方框包覆住括弧範圍，相當實用！這是在 VSCode 1.62 新增的功能

設定：括號相對顏色

將程式碼的括號標示相對應的顏色，類似延伸模組 Rainbow Brackets 或是 indent-rainbow 不過你現在不需要安裝這些插件了，只要到 VSCode 1.60 以上版本中可以在設定中搜尋『Bracket Pair Colorization』並啟用即可。

設定：自動修改閉合標籤

編輯 Html/Xml 時，需要同時修改開頭與結尾的相對應標籤，例如：<div></div> 當原始碼複雜時，修改就變的困難，原本需要安裝延伸模組 Auto Rename Tag 來協助自動修改閉合標籤，現在只要到 VSCode 1.52 以上版本的設定中搜尋『Linked Editing』啟用即可。

設定：存檔時格式化

如果已經安裝了 Prettier 或 Beautify 等格式器延伸模組(Extension)，可以在設定中尋找『Format On Save』啟用，這個功能是在 VSCode 1.61 加入的

設定：自動保存

確保辛苦工作的程式碼可以隨時保存，可以在設定中搜尋『Auto Save』啟用，有三種模式可以選擇。afterDelay: 編輯後延時多久就保存，時間可以自行設定。onFocusChange: 當編輯器失去焦點會自動保存。onWindowChange: 當切換視窗的時候自動保存。

快捷鍵：游標選擇

區塊選擇 - 鍵盤按住 Shift+ Alt 再拖曳滑鼠左鍵。

添加游標 - 除了鍵盤按住 Alt 一個一個點擊外，可以使用 Ctrl + Alt 跟箭頭上下鍵，往上一行或是下一行來添加游標。

選擇相同文字 - 當你已經選擇一段文字，再使用鍵盤按下 Ctrl + Shift + L 可以選擇文件中所有相同的文字。

快捷鍵：行移動、複製或刪除

行移動 - 游標位於的該行按住鍵盤的 Alt 再搭配箭頭上下鍵，就可以移動該行。

行複製 - 游標位於的該行按住鍵盤的 Alt + Shift 再搭配箭頭上下鍵，就可以複製該行。

行刪除 - 游標位於的該行按下鍵盤的 Ctrl + Shift + K

快捷鍵：程式碼快速重新命名變數或函式名稱

如果要變更變數或函式名稱，傳統上會使用尋找與取代，在 VSCode 中你可以選好其中一個變數或函式名稱後再按下鍵盤的 F2 就會彈出一個輸入框，方便讓你快速命名所有的變數或函式名稱。

快捷鍵：快速收合或展開程式碼

收合 - 游標位於的該行按下鍵盤的 Ctrl + Shift + [
展開 - 游標位於的該行按下鍵盤的 Ctrl + Shift + ]

快捷鍵：尋找下一個錯誤或警告

如果要除錯程式碼不用再盯著紅色波浪底線啦！按下 F8 就會自動帶你到錯誤的地方，並且會展開說明，方便除錯。