如何讓 vscode 變成你的開發神器？

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
鍵盤多光標	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

更多功能能夠查看這篇文章： www.cnblogs.com/summit7ca/p…

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.vetur

由於我是 vue 重度使用者，沒這個插件連個高亮都沒有，沒有真的不行

7.live-server

這個不是 vscode 插件，能夠直接用 npm -g live-server 安裝。

開啓一個服務，專門用於手機訪問靜態資源

好用的插件遠遠不止這一些，像 svg 查看，導入的包大小顯示，git 提交的代碼提示。可是我在使用的過程當中感受也是無關緊要的，也就是普適性不是特別廣。若是你有缺乏就無法工做的插件歡迎評論留言

總結

vscode 的功能遠不止這些，還有不少有趣的東西。可是礙於文章的篇幅，以及普適性並不適合拿出來講。若是你有普適性很是搞得點，仍是那句話歡迎留言，我將會補充進文章，讓他成爲你收藏夾中的經典文章。