之前一直都是用 sublime text 作為開發工具，用久了自然而然會覺得生活無趣，而且當時用sublime text 裝了很多外掛，有些外掛不能用，於是決定試試微軟的新產品 Visual Studio Code 。
1. 開始
在這裡介面裡你就可以看到一個非常有情懷的快速連結：安裝鍵盤快捷方式（你可以安裝包括但不限於 Vim、Sublime、Atom 的鍵盤快捷方式），所有這個 coding 工具還是非常容易上手的。
從體積來說比 Sublime text 大了不少，30多兆，啟動速度也肯定會慢一些，但還是在可接受的範圍內，這個還跟機器有關係。
Visual Studio Code 的快捷鍵設定是統一管理的，所以你只需要修改一個檔案就可以了。我們先來看看 Visual Studio Code 的常用快捷鍵。
Visual Studio Code 有兩個比較重要的檔案，一個是 setting.json （基本設定），另一個是 keybindings.json（配置快捷鍵檔案）。它們 分別在【檔案】-【首選項】-【設定】和【檔案】-【首選項】-【鍵盤快捷方式】。
2. 快捷鍵
極常用的快捷鍵：
ctrl + E 查詢最近開啟過的檔案 ctrl + tab 在檔案之間切換 ctrl + G 跳到指定行 Ctrl + Shift + F 在專案下所有檔案內查詢內容（並且可全域性替換） Ctrl + \ 或者 按住 Ctrl 雙擊檔案。 Ctrl + p 全域性搜尋檔案 Ctrl + Home / End 跳到檔案頭部或者尾部
更多可以看官網的code.visualstudio.com/shortcuts/k…
3. 外掛
這裡介紹幾個我必裝的幾個外掛
3.1 vscode-icons
這是一個檔案圖示顯示外掛，可以根據你的檔案型別開決定將顯示何種圖示。這樣也不只是為了美觀，還可以讓自己一目瞭然。更好的定位到要檢視的檔案。
3.2 vscode-fileheader
這個外掛可以為你在檔案開頭外掛頭資訊，比如檔案的作者，修改時間，有了這個外掛你就不需要每次都碼一次所謂的無用資訊了。
這個外掛的用法也好簡單：快捷鍵為：ctrl+alt+i，的依次點開【開始】-【首選項】-【設定】，在使用者配置檔案中新增如下程式碼：
"fileheader.Author": "https://www.geekjc.com",
"fileheader.LastModifiedBy": "https://www.geekjc.com"
複製程式碼想檢視更多有用的外掛 可以看VSCode擴充外掛推薦（HTML、Node、Vue、React開發均適用
3.3 HTML CSS Support
列出專案裡所有能用的類名，這個外掛也挺有用的。有時候當你只記得一個類的首字母或者前幾個字母時，這個外掛就非常地有用了，當你敲出第一個字母后這個外掛就會自動把專案裡（當前HTML 檔案引用到的.css 檔案）與此匹配的類全都列出來，還帶有來自哪個 .css 檔案的提示。
4. 補充如何設定外掛的快捷鍵
我們可以給外掛來配置快捷鍵。不管是什麼外掛，你都可以像下面這樣配置快捷鍵。我們以 vscode-fileheader 外掛為例子：
依次點開【檔案】-【首選項】-【鍵盤快捷方式】，出現如下圖
5. 配置選項
有時候我們安裝了很多外掛，我們需要管理，需要開啟或者關閉某些外掛的功能，就可以用這個配置選項了 依次點開【檔案】-【首選項】-【設定】
6. 終端命令列工具 Terminal
在VS Code中提供了一個功能齊全的整合終端，這非常方便，因為您不必切換視窗或更改現有終端的狀態就可以快速執行命令
7. 最後
當然vscode還有很多提高效率和很酷的操作，慢慢挖掘，不斷更新，關注極客教程