其實VSCode編輯器本身自帶了一個功能（Interactive Editor Playground ：可以讓你快速了解VSCode的特性，并且是可以交互的），



但很可惜它的內(nèi)容是全英文的（將VSCode設(shè)置為中文也沒用哦~），



我將每一部分截圖下來，并為你說明關(guān)鍵內(nèi)容，教你學(xué)會使用 Interactive Editor Playground



還有一些顯而易見的特性，我不會再用文字敘述一遍（它們都是潛移默化的）

在下文中會涉及到大量快捷鍵的介紹，如果看不懂快捷鍵請自行百度

鼠標 = 文本光標 = 光標

本文成于2020年4月22日，隨著VSCode的版本更迭，此部分內(nèi)容可能會略有差異（小更改不影響觀看，有較大影響的更新請在評論區(qū)告之，我會及時更新的）



打開VSCode > Help > Interactive Playground

你將會打開 Interactive Editor Playground 頁面

互動式編輯游樂場

VS代碼中的核心編輯器包含許多特性。此頁高亮顯示了10個特性，每個特性介紹中都提供了代碼行供你編輯

接下來的10行內(nèi)容（你可以理解為目錄，對應(yīng)10個特性）

多光標編輯（Multi-Cursor Editing）- 選擇一塊區(qū)域，選擇所有匹配項，添加其余光標等
智能感應(yīng)（intelliSense）- 獲取代碼和外部模塊的代碼幫助和參數(shù)建議
行操作（Line Actions ）- 快速移動行以重新排序代碼
重命名重構(gòu)（Rename Refactoring）- 快速重命名代碼庫中的符號（比如變量名、函數(shù)名）
格式化（Formatting）- 使用內(nèi)置文檔和選擇格式使代碼看起來很棒
代碼折疊（Code Folding） - 通過折疊其他代碼區(qū)域，關(guān)注代碼中最相關(guān)的部分
錯誤和警告（Errors and Warnings）- 寫代碼時請參閱錯誤和警告
片段（Snippets）- 花更少的時間輸入片段
Emmet - 只需要敲一行代碼就能生成你想要的完整HTML結(jié)構(gòu)等（極大方便前端開發(fā)）
JavaScript Type Checking- 使用零配置的TypeScript對JavaScript文件執(zhí)行類型檢查。
Multi-Cursor Editing

使用多光標編輯可以同時編輯文檔的多個部分，極大地提高了工作效率

框式選擇
鍵盤同時按下 Shift + DownArrow（下鍵）、Shift + RightArrow（右鍵）、Shift + UpArrow（上鍵）、Shift + LeftArrow（左鍵） 的任意組合可選擇文本塊
也可以用鼠標選擇文本時按 Shift + Alt 鍵
或使用鼠標中鍵拖動選擇（可用性很高）
添加光標
按 Ctrl + Alt + UpArrow 在行上方添加新光標
或按 Ctrl + Alt + DownArrow 在行下方添加新光標
您也可以使用鼠標和 Alt + Click 在任何地方添加光標（可用性很高）
在所有出現(xiàn)的字符串上創(chuàng)建光標
選擇字符串的一個實例，例如我用鼠標選中所有background，然后按 Ctrl + Shift + L，文本中所有的background都將被選中（可用性很高）
IntelliSense

Visual Studio Code 預(yù)裝了強大的JavaScript和TypeScript智能感知。

在代碼示例中，將文本光標放在錯誤下劃線的上面，會自動調(diào)用IntelliSense


這只是智能提示的冰山一角，還有懸停在函數(shù)名上可以看到參數(shù)及其注釋（如果有）等等，它會潛移默化的帶給你極大幫助

其他語言在安裝對應(yīng)插件后，會附帶對應(yīng)語言的IntelliSense

Line Actions

分別使用 Shift + Alt + DownArrow 或 Shift + Alt + UpArrow 復(fù)制光標所在行并將其插入當前光標位置的上方或下方
分別使用 Alt + UpArrow 和 Alt + DownArrow 向上或向下移動選定行（可用性很高）
用 Ctrl + Shift + K 刪除整行（可用性很高）
通過按 Ctrl + / 來注釋掉光標所在行、切換注釋（可用性很高）
Rename Refactoring

重命名符號（如函數(shù)名或變量名）

1. 將光標選中符號，按F2鍵
2. 或者 選中該符號，鼠標右鍵 > Rename Symbol

重命名操作將在項目中的所有文件中發(fā)生（可用性很高）

Formatting

代碼如果沒有良好的編寫格式，閱讀起來是一個折磨

Formatting可以解決編寫格式問題：無論你的代碼的格式寫的有多么糟糕，它可以將代碼格式化為閱讀性良好的格式

格式化整個文檔 Shift + Alt + F （可用性很高）
格式化當前行 Ctrl + K Ctrl + F（即先按Ctrl，再按K，最后按F）
鼠標右鍵 > Format Document （格式化整個文檔）
將格式化操作設(shè)置為自動化（保存時自動格式化整個文檔）：Ctrl + , 輸入 editor.formatOnSave

Code Folding

鼠標操作，自己嘗試一下，秒懂

快捷鍵：

• 折疊 Ctrl + Shift + [
• 展開 Ctrl + Shift + ]

折疊代碼段是基于基于縮進

Errors and Warning

錯誤和警告將在你出現(xiàn)錯誤時，高亮該代碼行

在代碼示例中可以看到許多語法錯誤（如果沒有，請你隨便修改它，讓它出現(xiàn)錯誤）

按F8鍵可以按順序在錯誤之間導(dǎo)航，并查看詳細的錯誤消息（可用性很高）

Snippets

通過使用代碼片段，可以大大加快編輯速度

在代碼編輯區(qū)，你可以嘗試輸入try并從建議列表中選擇try catch，

然后按Tab鍵或者Enter，創(chuàng)建try->catch塊

你的光標將放在文本error上，以便編輯。如果存在多個參數(shù)，請按Tab鍵跳轉(zhuǎn)到該參數(shù)。

Emmet

Emmet將代碼片段的概念提升到了一個全新的層次（前端開發(fā)的大寶貝）

你可以鍵入類似Css的可動態(tài)解析表達式，并根據(jù)在abrevision中鍵入的內(nèi)容生成輸出

比如說：

然后Enter

JavaScript Type Checking

————————————————
版權(quán)聲明：本文為CSDN博主「索兒呀」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/Zhangguohao666/article/details/105676173