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



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



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



還有一些顯而易見的特性，我不會(huì)再用文字?jǐn)⑹鲆槐椋ㄋ鼈兌际菨撘颇模?br />
在下文中會(huì)涉及到大量快捷鍵的介紹，如果看不懂快捷鍵請(qǐng)自行百度

鼠標(biāo) = 文本光標(biāo) = 光標(biāo)

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



打開VSCode > Help > Interactive Playground

你將會(huì)打開 Interactive Editor Playground 頁面

互動(dòng)式編輯游樂場(chǎng)

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

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

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

使用多光標(biāo)編輯可以同時(shí)編輯文檔的多個(gè)部分，極大地提高了工作效率

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

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

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


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

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

Line Actions

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

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

1. 將光標(biāo)選中符號(hào)，按F2鍵
2. 或者 選中該符號(hào)，鼠標(biāo)右鍵 > Rename Symbol

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

Formatting

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

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

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

Code Folding

鼠標(biāo)操作，自己嘗試一下，秒懂

快捷鍵：

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

折疊代碼段是基于基于縮進(jìn)

Errors and Warning

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

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

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

Snippets

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

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

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

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

Emmet

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

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

比如說：

然后Enter

JavaScript Type Checking

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