vscode 作為目前特別火的一款開發工具，我相信使用人數是非常龐大的。那麼作為平常賴以編程的開發工具你對他了解多少呢？這篇文章的重點是 vsocde 的默認高頻率快捷鍵，如何修改快捷鍵，如何自定義代碼片段，如何使用 vscode 的命令工具，vscode 的 emmet 功能，使用哪些插件能夠倍速提升開發效率
1. 默認高頻率快捷鍵
這裡分別整理了 mac window 對應的快捷鍵，方便倆類終端的用戶查看
mac
window
control
window
option
alt
command
ctrl
上面可以看做是 mac 對應 window 上的按鍵，在大多數場景都是符合的，但也不是完全符合
描述
mac
window
文件內搜索內容
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
鍵盤多光標
command + 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. ESLint
這個插件需要組合使用，項目必須要支持 eslint 格式化才行，然後將代碼保存變為失去焦點保存，所以不符合 eslint 格式的代碼自動變成符合 eslint 格式的代碼爽到懷疑人生
3.Open in Browser
html 文件中右鍵可以選擇直接使用瀏覽器打開
4.Path Intellisense
路徑匹配
5.veter
因為我是 vue 重度使用者，沒這個插件連個高亮都沒有，沒有真的不行
6.live-server
這個不是 vscode 插件，可以直接用 npm -g live-server 安裝。
開啟一個服務，專門用於手機訪問靜態資源
好用的插件遠遠不止這一些，像 svg 查看，導入的包大小顯示，git 提交的代碼提示。但是我在使用的過程中感覺也是可有可無的，也就是普適性不是特別廣。如果你有缺少就沒法工作的插件歡迎評論留言
總結
vscode 的功能遠不止這些，還有很多有趣的東西。但是礙於文章的篇幅，以及普適性並不適合拿出來說。如果你有普適性非常搞得點，還是那句話歡迎留言，我將會補充進文章，讓他成為你收藏夾中的經典文章。
喜歡文章的記得點個關注不迷路~
私信＋轉發回覆關鍵字（資料）送你一份前端面試題
閱讀更多 Web全棧工程獅 的文章
