vscode 作為目前特别火的一款開發工具，我相信使用人數是非常龐大的。那麼作為平常賴以程式設計的開發工具你對他了解多少呢？這篇文章的重點是 vsocde 的預設高頻率快捷鍵，如何修改快捷鍵，如何自定義代碼片段，如何使用 vscode 的指令工具，vscode 的 emmet 功能，使用哪些插件能夠倍速提升開發效率
1. 預設高頻率快捷鍵
這裡分别整理了 mac window s對應的快捷鍵，友善倆類終端的使用者檢視
| mac | windows |
| control | windows |
| option | alt |
| command | ctrl |
上面可以看做是 mac 對應 window 上的按鍵，在大多數場景都是符合的，但也不是完全符合
| 描述 | mac | windows |
| 檔案内搜尋内容 | command + F | ctrl + F |
| 檔案内替換 | 無 | ctrl + H |
| 全文搜尋内容 | command + shift + F | ctrl + shift + F |
| 全局搜尋檔案 | command + P | ctrl + P |
| 目前行上移/下移 | option + ↑ / ↓ | alt + ↑ / ↓ |
| 複制目前行在上方/下方 | option+ shift + ↑ / ↓ | alt + shift + ↑ / ↓ |
| 删除目前行 | command + x(不選中内容的時候剪切 就能删除目前行) | ctrl + x |
| 合并目前行 | control + J | 無 |
| 以單詞為機關移動 | option + ← / → | ctrl + ← / → |
| 移到行首/行尾 | command + ← / → | home / end |
| 鍵盤多光标 | option + ↑ / ↓ | |
| 滑鼠多光标 | option + 滑鼠左鍵 | alt + 滑鼠左鍵 |
| 選中同樣的全部内容 | option + shift + L | alt + shift + L |
| 側邊欄開關 | command + B | ctrl + B |
| 控制台開關 | command + J | ctrl + J |
指令講解：
合并目前行
使用合并目前行功能就可以快速的讓圖一變成圖二的樣子，這是倆種習慣，如果喜歡講内容變成一行。這個快捷鍵無疑是非常爽的。
側邊欄開關 / 控制台開關
側邊欄和控制台預設情況下能夠占到整個電腦的 三分之一左右的樣子，在筆記本上感覺碼幾行字就到頭了。但是側邊欄和控制台還是常用功能，你掌握了這個快捷鍵就可以全螢幕的敲代碼，并且快速控制側邊欄和控制台顯隐是非常有控制感的快捷鍵
全局搜尋檔案
這個是調用出來了 vscode 的指令菜單。在這個菜單裡面你可以輸入中文來執行相關指令，非常強大。他在關鍵時刻就不僅僅是搜尋檔案這麼簡單了。列舉幾種常用的操作：
輸入 ? 顯示如何執行各種不同的指令
其中最常用的幾個分别是 term(打開指令行) , view , :(調整到指定行), edt(檢視目前打開的标簽并且提供跳轉功能), 無(搜尋檔案，并且提供跳轉功能)，> (顯示并運作指令)。使用起來及其簡單隻要這些字首 + 空格然後輸入你要做的操作即可例如:
這是跳轉到第一行的第三個字元
能夠看到上圖中一共有三個終端，并且我還重新重名了。右邊的設定就是重命名功能。
2.分屏功能
我在寫代碼的時候經常碰到的一個場景就是不同的檔案之間進行操作，倆個檔案來回切換特别麻煩。其實你熟練掌握了 vscode 的分屏操作這裡能夠讓你爽到飛起。
從圖中可以看到編輯器不僅可以分屏，連控制台也可以分屏。分屏之後就可以左邊看着 html 代碼，右邊寫 css 代碼了。再也不用回頭看看格式對不對了。
建立分屏快捷鍵是 command + \ (ctrl + \), 編輯器之間分屏切換快捷鍵是 command + 1 - 9(cgtrl + 1-9)
3.代碼片段
平常輸入一部分内容的時候按回車或者是 tab 他就能給你補全。這種功能就是代碼片段，像平時用的特别多的：
log -> console.log('');switch -> switch (key) {case value:break;default:break; } for -> for (let index = 0; index < array.length; index++) {const element = array[index]; }
等等，非常友善。但是這些遠遠不夠的，像預設提供的 log 代碼片段就不能夠滿足我的需要。這個時候自定義代碼片段就特别重要了，而自定義代碼片段是非常簡單的。像控制補全時候光标所在的位置、多光标同時修改内容、tab 鍵之後的下個位置是非常常見的操作，看我三言倆語帶你掌握
1. command + p(ctrl + p) 打開指令菜單
2. 輸入 “> 代碼片段” 下方隻有一個選項 首選項: 配置使用者代碼片段，預設是直接選中的，回車即可。
3.選擇建立全局代碼片段，回車
4.輸入檔案名稱，例如 js 代碼片段，回車就會打開一個新的檔案。裡面的内容是按照 json 格式輸入的。
5. 将文中的例子打開，無用的注釋去掉,有用的注釋打開。得到下面這樣内容的一個檔案
可以看到最外面是一個對象，裡面隻有一個名為 "Print to console" 的屬性。一個屬性就代表一個代碼片段。現在先給你講講文中的這個代碼片段。
- scope : 設定作用檔案，可以擴充 vue，html
- prefix：觸發代碼片段的字首
- body：代碼片段主體。其中的 $1,$2 為按 tab 鍵光标依次移動的位置，俗稱占位符，${1:label}。這樣就是留有預設值 label。想要多光标就寫入數字相同的占位符，例如把 $2 改為 $1 試試
- description：描述這個代碼片段的作用,一般用不到，提示資訊用最外面的屬性即可
下面我将上面的改造一下,順便再加一個：
下面是我輸入字首的提示，是不是非常簡單。
4.emmet 功能
你要是連這個都沒聽過，趕緊關注我。因為這是能讓你敲代碼提高十倍效率的東西
上圖中的代碼結構是不是很常見，其實比這複雜的也多的是呢。然後我讓你一句話列印出來
div.parent>div.childern-first+div.children-two>ul>li*$4
上面的這句話就能夠變成圖中的樣子。你可以複制到你的 vscode 中把最後面的 4 删掉然後重新輸入 4 再按 tab 就能看到效果。
這種大段的使用場景多用于第一次作圖，左邊放着 UI 圖右邊是你的編輯器。看着 UI 圖中的某一個子產品一口氣把整個結構列印出來，然後在使用多編輯器功能，看着 UI 圖和 HTML 結構圖把樣式一次搞到位，真的舒服到不行啊。這麼神奇的東西怎麼用呢，其實要點很簡單。看我三言倆語帶你飛。
1.知道如何生成子标簽、同級标簽、父标簽同級标簽的關鍵符号。>(子标簽), +(同級标簽) , ^ (父标簽的同級标簽)。例如：
div>p+p^div 可描述為 div 有子标簽 p ，p 有同級标簽 p，p 還有個父級标簽的同級标簽 div
2.如何給一個元素設定屬性、值。屬性用中括号[],需要多加注意的是 class , id 這倆個屬性可以用 . 和 # 的簡寫形式。值用{}。例如:
div.abc[title=666 index=1]{123} 可描述為: div 的 class 為 abc。定義了倆屬性是 title = "666", index = "1" , 值為 123
div.abc.efg.ccc 可描述為 div 的 class 為 abc efg ccc
3.重複某個标簽多次用 * 。例如：
div*5 可描述為 生成 5 個 div 标簽
4.疊代值用 $,疊代值在支援的好的 emmet 插件中還能實作更多操作。不過比較小衆，就不介紹了。例如：
div.abc$*5 可描述為生成 5 個div 标簽并且 class 值依次 為 abc1,abc2...abc5
5.添加括号()周遊一組标簽,例如：
(ul>li*2{$})*2 可描述為生成倆組 ul>li*2{$}, 去掉括号的可描述為 ul 下面有 2 個子标簽 li 值分别為 1， 2
更多功能可以檢視這篇文章：https://www.cnblogs.com/summit7ca/p/6944215.html
5. css 的縮寫方式
這個寫的文章比較少，我也是自己再輸入的時候發現的一些小技巧，但是用起來真的非常舒服。
數值的機關标簽可以用 首字母 + 數值 + 機關的方式(預設機關是 px )。例如：
p10 -> padding: 10px;pl10 -> padding-left: 10px; 其他三個方向隻要把 l 改成 top 的 t ，right 的 r，bottom 的 b即可m10 ->margin:10px;ml10 -> margin-left: 10px;t10 -> top: 10px;f10 -> font: 10px;fw500 ->font-weight: 500;h10px -> height: 10px;w10 -> width: 10px;
6.常用的插件
好用的插件是數不勝數的，這裡我隻列舉一些沒有了我就難受的要死的插件
1.Auto Rename Tag 自動同步雙标簽
2.Chinese 語言漢化
3. ESLint
這個插件需要組合使用，項目必須要支援 eslint 格式化才行，然後将代碼儲存變為失去焦點儲存，是以不符合 eslint 格式的代碼自動變成符合 eslint 格式的代碼爽到懷疑人生
4.Open in Browser
html 檔案中右鍵可以選擇直接使用浏覽器打開
5.Path Intellisense
路徑比對
6.vuter
因為我是 vue 重度使用者，沒這個插件連個高亮都沒有，沒有真的不行
7.live-server
這個不是 vscode 插件，可以直接用 npm -g live-server 安裝。
開啟一個服務，專門用于手機通路靜态資源
好用的插件遠遠不止這一些，像 svg 檢視，導入的包大小顯示，git 送出的代碼提示。但是我在使用的過程中感覺也是可有可無的，也就是普适性不是特别廣。如果你有缺少就沒法工作的插件歡迎評論留言