經歷：

最近sublime和webstorm的序列號頻頻失效，經常在關鍵時候掉鏈子，深有體會，剛好身邊有朋友也有使用VS code，對比atom,sublime,webstorm這些編輯器，個人覺得VS code是一款不錯編輯器，比sublime外掛多，比Atom的介面好看，比webstorm更輕量級。可謂聚齊各家優點於一身，關鍵還免費免費免費，再也不用為編輯器付費而困擾，還有向右大大看齊

Settings Sync

同步配置，再不同主機上，一勞永逸

在GitHub上建立gist
在設定裡面配置gist命牌即可

好訊息，一鍵下載怎麼多外掛想不想學（搞得像推銷一樣，哈哈）

下載Settings Sync外掛後重啟
ctrl + shift + p 然後輸入sync 然後選擇高階選項 →
從公共配置裡下載gist
然後在按ctrl + shift + p 輸入sync 選擇下載配置複製這串程式碼進去
d3bc45d8096f6bc3d9d46c69ed7052cd
OK，完事
（可能還有一些人看不懂，過後傳GIF操作圖，我先溜了）

HTML Snippets

超級實用且初級的 H5程式碼片段以及提示

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

快捷鍵習慣替換（選一，多個會衝突）

Color-Highlight

在編輯器中高亮顯示顏色。

Guides

程式碼的標籤對齊線。

HTML CSS support

css 自動補齊

Npm Intellisense

在import語句中自動完成npm模組引入的程式碼外掛

Debugger for Chrome

讓 vscode 對映 chrome 的 debug功能，靜態頁面都可以用 vscode 來打斷點除錯

beautify

在Visual Studio程式碼中美化JavaScript，JSON，CSS，Sass和HTML。

Auto Close Tag

自動閉合HTML標籤

###Auto Rename Tag
修改HTML標籤時，自動修改匹配的標籤

Bracket Pair Colorizer

讓括號擁有獨立的顏色，易於區分

Open-In-Browser

由於 VSCode 沒有提供直接在瀏覽器中開啟檔案的內建介面，所以此外掛可以開啟命令皮膚選項。

Live Server

用於伺服器端頁面的Live Server，如PHP

IntelliSense for CSS class names

CSS類名智慧命名提示

JavaScript (ES6) code snippets

ES6語法提示

Git History

檢視和搜尋git日誌以及圖表和細節。檢視檔案的前一個副本。檢視和搜尋歷史

CSS Peek

能在原始碼中的字串中找到對應的css（類和ID）。顯示在那個css檔案裡，還有在第幾行。

Vue外掛

vetur

語法高亮、智慧感知、Emmet
注意vue檔案程式碼格式化，需要在首選項-設定-使用者設定新增這行程式碼

    "vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化
複製程式碼

Vue 2 Snippets

基於最新的 Vue 官方語法高亮檔案新增了語法高亮，並且依據 Vue 2 的 API 新增了程式碼補全

vscode-element-helper

Element-UI 庫程式碼提醒
主題推薦：淺色調

Quiet Light

vsc常用快捷鍵：
同時開啟多個視窗（檢視多個專案）

開啟一個新視窗： Ctrl+Shift+N
關閉視窗： Ctrl+Shift+W
同時開啟多個編輯器（檢視多個檔案）

新建檔案 Ctrl+N
歷史開啟檔案之間切換 Ctrl+Tab，Alt+Left，Alt+Right
切出一個新的編輯器（最多3個）Ctrl+，也可以按住Ctrl滑鼠點選Explorer裡的檔名
左中右3個編輯器的快捷鍵Ctrl+1 Ctrl+2 Ctrl+3
3個編輯器之間迴圈切換 Ctrl+`
編輯器換位置，Ctrl+k然後按Left或Right
格式調整

程式碼行縮排Ctrl+[， Ctrl+]
摺疊開啟程式碼塊 Ctrl+Shift+[， Ctrl+Shift+]
Ctrl+C Ctrl+V如果不選中，預設複製或剪下一整行
程式碼格式化：Shift+Alt+F，或Ctrl+Shift+P後輸入format code
修剪空格Ctrl+Shift+X
上下移動一行： Alt+Up 或 Alt+Down
向上向下複製一行： Shift+Alt+Up或Shift+Alt+Down
在當前行下邊插入一行Ctrl+Enter
在當前行上方插入一行Ctrl+Shift+Enter
游標相關

移動到行首：Home
移動到行尾：End
移動到檔案結尾：Ctrl+End
移動到檔案開頭：Ctrl+Home
移動到後半個括號 Ctrl+Shift+]
選中當前行Ctrl+i（雙擊）
選擇從游標到行尾Shift+End
選擇從行首到游標處Shift+Home
刪除游標右側的所有字Ctrl+Delete
Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right
Multi-Cursor：可以連續選擇多處，然後一起修改，Alt+Click新增cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up
同時選中所有匹配的Ctrl+Shift+L
Ctrl+D下一個匹配的也被選中(被我自定義成刪除當前行了，見下邊Ctrl+Shift+K)
回退上一個游標操作Ctrl+U
重構程式碼

跳轉到定義處：F12
定義處縮圖：只看一眼而不跳轉過去Alt+F12
列出所有的引用：Shift+F12
同時修改本檔案中所有匹配的：Ctrl+F12
重新命名：比如要修改一個方法名，可以選中後按F2，輸入新的名字，回車，會發現所有的檔案都修改過了。
跳轉到下一個Error或Warning：當有多個錯誤時可以按F8逐個跳轉
檢視diff 在explorer裡選擇檔案右鍵 Set file to compare，然後需要對比的檔案上右鍵選擇Compare with `file_name_you_chose`.
查詢替換

查詢 Ctrl+F
查詢替換 Ctrl+H
整個資料夾中查詢 Ctrl+Shift+F

參考文件：
VS Code 使用小技巧

VS code 外掛推薦

經歷：