總結了一些平時常用且好用的 VS Code 的外掛和編輯技巧分享出來。

文章詳情可查閱我的部落格：lishaoy.net ，歡迎大家訪問。

外觀

主題

這裡我分享兩款主題：

1. Material Theme

效果如圖：

2. An Old Hope Theme

效果如圖：

圖示

3. Material Icon Theme 當然，這兩款主題的檔案管理器（左側）的 icon 小圖示使用的是 Material Icon Theme

字型及其他

其他和外觀相關的設定如下：

{
    "editor.multiCursorModifier": "ctrlCmd",
    "editor.formatOnPaste": false,
    "workbench.activityBar.visible": false,
    "workbench.iconTheme": "eq-material-theme-icons-darker",
    "workbench.colorCustomizations": {},
    "materialTheme.cache.workbench.settings": {
        "themeColours"
 
: "Darker",
        "accentPrevious": "Acid Lime"
    },
    "workbench.colorTheme": "Material Theme Darker",
    "material-icon-theme.angular.iconsEnabled": true,
    "material-icon-theme.folders.icons": "specific",
    "editor.lineHeight": 24,
    "editor.fontLigatures": true,
    "editor.fontFamily"
 
: "FiraCode-Medium"
}
複製程式碼

特別注意的是 "editor.lineHeight": 24, 和 "editor.fontFamily": "FiraCode-Medium" 。

"editor.lineHeight": 24, ： 設定程式碼的行間距，這裡比預設的稍大些，就這一點小小的改變，讓程式碼看起來清爽整潔。

"editor.fontFamily": "FiraCode-Medium" ： 設定字型，這種字型會讓程式碼看起來更形象生動，如下

紅色豎線左邊是使用了 FiraCode-Medium 字型的效果，紅色豎線右邊是沒有使用 FiraCode-Medium 字型的效果

關於 FiraCode-Medium 字型更多效果可查閱 github.com/tonsky/Fira… 地址。

程式碼管理

格式化

4. Beautify ：格式化的時候，給出格式化文字選項，如下

5. Prettier ：個人比較喜歡這個，看起來程式碼更清晰，如下

當然，大家可以自定義快捷鍵，也可以按 ⌘ - ⇧ - P 來搜尋相關命令

程式碼檢查

6. ESLint ：檢查 js 語法規範，你可以使用不同的規範，如 airbnb 、standard 、google。
7. TSLint ：檢查 typescript 語法規範。
8. Stylelint ：檢查 CSS/SCSS/Less 語法規範。
9. Markdownlint ：檢查 markdown 語法規範。

自動補全

以下外掛點選連結可以檢視gif動圖，詳細瞭解具體功能。

10. Emmet ：大家應該很熟悉這個外掛了（很好用），VS Code 已經內建了，很到位。
11. Auto Close Tag ：自動閉合 html 等標籤 （</...>）。
12. Auto Rename Tag ：修改 html 標籤時，自動修改閉合標籤。
13. Path Intellisense ：自動提示補全路徑。

程式碼片段

14. snippets ：搭建可以自己安裝各種程式碼片段（vue、react、angular等），這裡就不列舉。

功能擴充套件

以下的功能擴充套件外掛大部分都有gif動圖，可點選連結瞭解詳細功能

15. Bracket Pair Colorizer ：讓程式碼的各種括號呈現不同的顏色。
16. Code Runner ：可以在編輯器裡直接執行程式碼，檢視結果。
17. Color Picker ：可以直接在編輯器裡開啟色板，選擇各種模式的顏色。
18. Document This ：可以給函式、類等自動的加上詳細的註釋。
19. Git History ：方便的檢視git版本管理的詳細資訊。
20. Live Server ：可以一鍵在本地啟動伺服器。
21. Settings Sync ：重點介紹下這個外掛，如果你有兩臺電腦（比如，家裡和公司）都使用 VS Code ，可是在公司或家裡對 VS Code 安裝了外掛或者修改了配置，回到家或公司又要重新弄一次，這個外掛就能解決問題，同步多臺電腦設定。

只需要把配置上傳到GitHub，在另一個地方下載配置即可，如下

22. gi ：可以給 .gitignore 檔案新增各種語言忽略檔案配置。
23. Polacode ：可以把程式碼生成圖片（有些地方發程式碼結構會亂也沒有程式碼高亮，這時候就可以生成圖片再發）。

編輯技巧

游標

1. 把游標移到檔案的首部活尾部

2. 把游標移動到行的首部或者尾部

3. 按單詞移動

4. 按單詞大小寫分解移動游標

選擇

5. 選擇行以上或以下全部內容

6. 選擇到行首或行尾的內容

7. 按字母或單詞選擇

• ⇧ - ← 、 ⇧ - → 按字母選擇
• ⇧ - ⌥ - ← 、 ⇧ - ⌥ - → 按單詞選擇

8. 伸縮選擇

9. 選擇匹配單詞

行

10. 向上或向下移動行

11. 複製或刪除行

12. 多行合併成一行

13. 縮排或伸縮行

14. 在當前行之上或下插入行

多行

15. 滑鼠點選，多行編輯

按 ⌘ 選擇編輯點，按 ⎋ 退出多行編輯

16. 使用快捷鍵多行編輯

17. 在所選擇的行的結尾插入編輯點

18. 選擇欄位

按 ⇧ - ⌘ 再選擇欄位

高階

19. 檢視類或方法的定義

• 按 ⌥ 點選，可以在新頁面檢視
• 按 ⇧ - ⌥ - ⌘ 點選，可以在新組檢視
• 按 ⇧ - F12 點選，可以在當前頁面檢視

20. 摺疊程式碼

21. 去掉選擇行的尾部空格

22. 定位到指定行號

23. 在檔案裡查詢類或方法

最後，如果記不住這些快捷鍵，可以按 ⌘ - K 、 ⌘ - S 搜尋對應快捷鍵繫結