2020-4-24 前端達人
其實VSCode編輯器本身自帶了一個功能（Interactive Editor Playground ：可以讓你快速了解VSCode的特性，并且是可以交互的），
但很可惜它的內容是全英文的（將VSCode設置為中文也沒用哦~），
我將每一部分截圖下來，并為你說明關鍵內容，教你學會使用 Interactive Editor Playground
還有一些顯而易見的特性，我不會再用文字敘述一遍（它們都是潛移默化的）
在下文中會涉及到大量快捷鍵的介紹，如果看不懂快捷鍵請自行百度
鼠標 = 文本光標 = 光標
本文成于2020年4月22日，隨著VSCode的版本更迭，此部分內容可能會略有差異（小更改不影響觀看，有較大影響的更新請在評論區告之，我會及時更新的）
打開VSCode > Help > Interactive Playground
你將會打開 Interactive Editor Playground 頁面
VS代碼中的核心編輯器包含許多特性。此頁高亮顯示了10個特性，每個特性介紹中都提供了代碼行供你編輯
接下來的10行內容（你可以理解為目錄，對應10個特性）
多光標編輯（Multi-Cursor Editing）- 選擇一塊區域，選擇所有匹配項，添加其余光標等
智能感應（intelliSense）- 獲取代碼和外部模塊的代碼幫助和參數建議
行操作（Line Actions ）- 快速移動行以重新排序代碼
重命名重構（Rename Refactoring）- 快速重命名代碼庫中的符號（比如變量名、函數名）
格式化（Formatting）- 使用內置文檔和選擇格式使代碼看起來很棒
代碼折疊（Code Folding） - 通過折疊其他代碼區域，關注代碼中最相關的部分
錯誤和警告（Errors and Warnings）- 寫代碼時請參閱錯誤和警告
片段（Snippets）- 花更少的時間輸入片段
Emmet - 只需要敲一行代碼就能生成你想要的完整HTML結構等（極大方便前端開發）
JavaScript Type Checking- 使用零配置的TypeScript對JavaScript文件執行類型檢查。
Multi-Cursor Editing
使用多光標編輯可以同時編輯文檔的多個部分，極大地提高了工作效率
框式選擇
鍵盤同時按下 Shift + DownArrow（下鍵）、Shift + RightArrow（右鍵）、Shift + UpArrow（上鍵）、Shift + LeftArrow（左鍵） 的任意組合可選擇文本塊
也可以用鼠標選擇文本時按 Shift + Alt 鍵
或使用鼠標中鍵拖動選擇（可用性很高）
添加光標
按 Ctrl + Alt + UpArrow 在行上方添加新光標
或按 Ctrl + Alt + DownArrow 在行下方添加新光標
您也可以使用鼠標和 Alt + Click 在任何地方添加光標（可用性很高）
在所有出現的字符串上創建光標
選擇字符串的一個實例，例如我用鼠標選中所有background，然后按 Ctrl + Shift + L，文本中所有的background都將被選中（可用性很高）
IntelliSense
Visual Studio Code 預裝了強大的JavaScript和TypeScript智能感知。
在代碼示例中，將文本光標放在錯誤下劃線的上面，會自動調用IntelliSense
這只是智能提示的冰山一角，還有懸停在函數名上可以看到參數及其注釋（如果有）等等，它會潛移默化的帶給你極大幫助
其他語言在安裝對應插件后，會附帶對應語言的IntelliSense
Line Actions
分別使用 Shift + Alt + DownArrow 或 Shift + Alt + UpArrow 復制光標所在行并將其插入當前光標位置的上方或下方
分別使用 Alt + UpArrow 和 Alt + DownArrow 向上或向下移動選定行（可用性很高）
用 Ctrl + Shift + K 刪除整行（可用性很高）
通過按 Ctrl + / 來注釋掉光標所在行、切換注釋（可用性很高）
Rename Refactoring
重命名符號（如函數名或變量名）
重命名操作將在項目中的所有文件中發生（可用性很高）
代碼如果沒有良好的編寫格式，閱讀起來是一個折磨
Formatting可以解決編寫格式問題：無論你的代碼的格式寫的有多么糟糕，它可以將代碼格式化為閱讀性良好的格式
格式化整個文檔 Shift + Alt + F （可用性很高）
格式化當前行 Ctrl + K Ctrl + F（即先按Ctrl，再按K，最后按F）
鼠標右鍵 > Format Document （格式化整個文檔）
將格式化操作設置為自動化（保存時自動格式化整個文檔）：Ctrl + , 輸入 editor.formatOnSave
鼠標操作，自己嘗試一下，秒懂
快捷鍵：
折疊代碼段是基于基于縮進
錯誤和警告將在你出現錯誤時，高亮該代碼行
在代碼示例中可以看到許多語法錯誤（如果沒有，請你隨便修改它，讓它出現錯誤）
按F8鍵可以按順序在錯誤之間導航，并查看詳細的錯誤消息（可用性很高）
Snippets
通過使用代碼片段，可以大大加快編輯速度
在代碼編輯區，你可以嘗試輸入try并從建議列表中選擇try catch，
然后按Tab鍵或者Enter，創建try->catch塊
你的光標將放在文本error上，以便編輯。如果存在多個參數，請按Tab鍵跳轉到該參數。
Emmet
Emmet將代碼片段的概念提升到了一個全新的層次（前端開發的大寶貝）
你可以鍵入類似Css的可動態解析表達式，并根據在abrevision中鍵入的內容生成輸出
比如說：
然后Enter
————————————————
版權聲明：本文為CSDN博主「索兒呀」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Zhangguohao666/article/details/105676173