VS Code是一個開源的跨平臺開發工具，是我目前用的最順手的編輯器。本文介紹了一些常用的插件和快捷鍵，幫你大大提高軟件開發的效率，讓你有更多的時間去擼鐵和泡妹子。
初識VS Code
先放上它的官網：
https://code.visualstudio.com/
VSCode全稱是Visual Studio Code，光從名字上來看，一開始可能有人會把VSCode和Visual Studio搞混，他倆都屬于微軟爸爸公司旗下的產品，而后者早已名聲在外，長期占據程序員最喜愛編輯器榜首，為了讓新兒子VSCode蹭蹭熱度，所以起一個差不多的名字，就像Javascript之于Java。
說VSCode是個新生兒，一點都不為過，從它誕生到現在也只是過了4年時間，跟歷史悠久的各大編輯器相比它只是個弟弟。但是就在最近的一到兩年，它高速成長，市場占有率開始飆升，遠遠領先于其他的編輯器，Sublime Text迅速下降，Atom不溫不火，WebStorm由于收費問題一直在國內的使用率不高，Vim由于學習成本太高也漸漸退出歷史舞臺。如果你正好從別的編輯器轉到VS Code也完全不用擔心，它提供了對應的Keymap插件，可以將你的鍵盤設置遷移過來，幫你快速上手操作，而不用再重新花時間去適應快捷鍵。
而且它為每一種語言都提供了很好的支持，將開發中需要用到的Extension打包成一個合集，基本上開發的時候下載對應的Extension Package就可以獲得很好的支持。
微軟給VSCode的定義就是：免費、開源、跨平臺。重新定義代碼編輯器。再加上去年微軟收購Github的舉動，這些都說明微軟在開源方面有了越來越多的嘗試。
開源對于一個產品的長期發展極為重要。在四款編輯器中，Sublime 是閉源的，VS Code、Vim 和 Atom 都是開源的，而 VS Code 可以說是開源做的最好的。
VS Code 不僅僅是把代碼開源出來。而是把整個產品的開發過程建立于開源之上，與整個社區深入合作，傾聽用戶在 GitHub 上的反饋，使 VS Code 越做越好：
每一年，VS Code 團隊都會在 GitHub Wiki 發布 Roadmap ，列出一整年的規劃圖。
每個月初，在產品設計階段，VS Code 團隊會在 GitHub Issue 上會發布 Iteration Plan ，列出這個月會做的每一個功能，每一個功能基本會對應一個 GitHub Issue，你可以看到詳細的設計以及 mockup，并且可以提出你自己的見解。
每個月末，臨近產品發布，你可以在 GitHub 看到 Endgame 了解到 VS Code 是如何進行產品測試與發布的。
不僅代碼開源，VS Code 整個產品的計劃，設計以及發布管理都是“開源”的：每一個階段對每一個用戶是公開透明的，你不僅可以開 Issue，發PR，你甚至也可以參與到每個功能的設計與討論中去！
關于VSCode業界一直有一個爭議——它到底是不是一個IDE？對于Visual Studio，微軟直接就把它定義為同類中最好用的IDE，而對于VSCode，微軟目前還只是把它定義為一個Code Editor。
Visual Studio Code is a lightweight but powerful source code editor
為了解決這個問題，我們首先要搞清楚一個概念，什么是IDE？它的全稱是Integrated development environment，字面意思是集成開發環境，也就是說把開發過程中的一些主要活動和使用到的工具都集成在一個開發環境中，這樣我們就可以在一個程序里進行編寫代碼、調試代碼、運行命令行、版本控制等開發過程。
目前VSCode擁有強大的API支持，已經基本可以實現IDE。我們用它編寫代碼，運用內置的Terminal終端快速的運行命令行，下載Debug插件，設置斷點，輕松調試代碼。使用內置的Git進行版本控制，輕松管理源代碼。不論哪種語言都可以下載到相應的插件合集，一次性打包安裝，整個開發過程都可以在這個一個工具中完成，它真正做到了重新定義代碼編輯器，在Stack Overflow的2018年開發者調查中，VS Code成為了最受歡迎的開發工具。
基本插件
這個部分介紹一些必裝的開發插件，幫你大大提升代碼編輯效率。
VS Code 有著豐富且快速增長的插件生態，如今，已經有超過一萬個插件。不僅有中心化的插件市場，而且在 VS Code 編輯器里也可以輕松搜索插件，直接進行安裝與管理。相比之下，Sublime 只有 5000 不到的插件，而且在編輯器里不能很方便地搜索管理插件；Vim 插件雖多，但因為沒有一個中心化的插件市場，查找插件很麻煩；Atom 有 8000 多的插件，比 VS Code 少一些，雖然在編輯器內也是可以查找插件，但 VS Code 的搜索和瀏覽功能做的要比 Atom 要好。
Chinese(Simplified) Language Pack for Visual Stidio Code 中文漢化包
對于一些英文不太好的小伙伴，上來第一件事肯定是要切換成中文語言環境，安裝漢化包插件之后，按快捷鍵Ctrl+Shift+P調出命令面板，輸入Configure Display Language，選擇zh-ch，然后重啟vs code即可。
open-in-browser 在瀏覽器中查看
VS Code沒有提供直接在瀏覽器中運行程序的內置功能，所以我們需要安裝此插件，在瀏覽器中查看我們的程序運行效果。
Live Server 實時預覽
安裝這個插件之后，我們在編輯器中修改代碼，按Ctrl+S保存，修改效果就會實時同步，顯示在瀏覽器中，再不用手動刷新。
[圖片上傳失敗...(image-9b80fc-1564194236095)]
Auto Close Tag 自動閉合標簽
輸入標簽名稱的時候自動生成閉合標簽，特別方便。
Auto Rename Tag 尾部閉合標簽同步修改
自動檢測配對標簽，同步修改。
Bracket Pair Colorizer 用不同顏色高亮顯示匹配的括號
對配對的括號進行著色，方便區分，未安裝該插件之前括號統一都是白色的。
Highlight Matching Tag 高亮顯示匹配標簽
這個插件自動幫我們將選中的匹配標簽高亮顯示，再也不用費勁查找了。
Vscode-icons VSCode 文件圖標
此插件可以幫助我們根據不同的文件類型生成對應的圖標，這樣我們在側邊欄查看文件列表的時候直接通過圖標就可以區分文件類型。
使用mac的小伙伴可以選擇下載Vscode-icons-mac，基本圖標與Vscode-icons類似，就是文件夾采用的是mac風格。
TODO Highlight 高亮
如果我們在編寫代碼時想在某個地方做一個標記，后續再來完善或者修改里面的內容，可以利用此插件高亮顯示，之后可以幫助我們快速定位到需要修改的代碼行。
Code Spell Checker 單詞拼寫檢查
我們在編寫代碼的時候經常會不小心拼寫錯誤造成軟件運行失敗，安裝這個插件后會自動幫我們識別單詞拼寫錯誤并且給出修改建議，大大幫我們減輕了排除bug的壓力。
Code Runner 運行選中代碼段
如果你需要學習或者接觸各種各樣的開發語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發環境，直接通過此插件就可以直接運行對應語言的代碼，非常適合學習或測試各種開發語言，使用方式直接右鍵選擇Run Code，支持大量語言，包括Node。
Improt Cost 成本提示
這個插件可以在你導入工具包的時候提示這個包的體積，如果體積過大就需要考慮壓縮包，為后期上線優化做準備。
GitLens 查看Git信息
將光標移到代碼行上，即可顯示當前行最近的commit信息和作者，多人開發的時候十分有用，責任到人，防止甩鍋。
Bookmarks 書簽
對代碼進行書簽標記，通過快捷鍵實現快速跳轉到書簽位置。
具體的快捷鍵可以在鍵盤快捷方式中自定義設置：
拓展插件
這部分主要介紹一些針對特定開發環境的插件
Vscode-element-helper
使用element-ui庫的可以安裝這個插件，編寫標簽時自動提示element標簽名稱。
Version Lens 工具包版本信息
在package.json中顯示你下載安裝的npm工具包的版本信息，同時會告訴你當前包的最新版本。
Vetur VUE語言包
VUE是時下最流行的js框架之一，很多公司都會選擇基于VUE來構建產品，Vetur對VUE提供了很好的語言支持。
沒有安裝該插件之前之前編寫后綴名為.vue的文件時代碼是白色的
安裝插件后編寫vue文件輸入s，按Tab鍵就可以自動補全模版。
WakaTime 計算代碼工作量
這是一款時間記錄工具，它可以幫助你在vs code中記錄有效的編程的時間。
并且將數據用折線圖的形式展示出來，為你呈現一周內的工作趨勢，曾經編寫項目的時候最多一天編程將近12個小時，你的付出和努力wakatime都知道。
同時在他的官網中，也會顯示用扇形圖的形式顯示你編寫各個語言所占用的時間比例，以及你在各個項目中所用的時間占比，是一個非常好的數據報告，項目結束的時候你可以在它的Dashboard中清晰地看出自己的時間都是如何分配的。
Settings Sync VSCode設置同步到Gist
有時候我們到了新公司或者換了新電腦需要配置新的開發環境，這時候一個一個下載插件，再重新配置vs code就非常麻煩而且你還不一定記得那么全面，通過這個插件我們可以將當前vs code中的配置上傳到Gist，之后再通過Gist下載，就可以將所有配置同步到新環境中了。
在Github首頁點擊頭像，選擇Settings進入設置頁面。
點擊左側側邊欄Developer settings，進入開發者設置。
選擇Personal access tokens，點擊右側Generate new token。
填寫token名稱，在下方勾選gist。
點擊下方的Generate token按鈕生成一個新的token。
將生成的新的token保存下來。
在vscode中安裝Settings Sync插件，輸入Ctrl+Shift+p輸入Sync，選擇更新/上傳配置。
將github中生成的token輸入，點擊回車。
在控制臺中自動生成一串id,之后便可以通過token和id進行配置同步。
輸入Ctrl+Shift+p輸入Sync，選擇下載配置，輸入token和id即可同步下載。
這篇文章中介紹的vs code配置已經全部同步到Gist，有需要的小伙伴可以下載一下。
token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6
Id:338d5dfb6b7784c980250cffe8365899
可以在配置文件中選擇是否自動上傳和下載
"sync.removeExtensions": true,
"sync.syncExtensions": true,
"sync.autoDownload": true,
"sync.autoUpload": true,
"sync.gist": "338d5dfb6b7784c980250cffe8365899"
顏色主題
作為一名程序員，每天大部分時間都是坐在電腦前敲代碼，需要長時間的跟編輯器打交道，為我們的vscode選擇一款好看的顏色主題，能極大地提升寫代碼過程中的愉悅感，為了保護眼睛，這里推薦一個深色主題安裝包，里面包含了如下幾款皮膚。
我個人最喜歡的還是下面兩款深色主題，主題這個東西一般用習慣了也不會來回去換，所以選擇一款自己用著舒服的就好。
Dracula Official 吸血鬼主題（本人目前使用的一款）
One Dark Pro
常用快捷鍵
編輯器與窗口管理
Ctrl+Shift+P: 打開命令面板。
Ctrl+Shift+N: 新建窗口。
Ctrl+Shift+W: 關閉窗口。
切分窗口：Ctrl+1/Ctrl+3/Ctrl+3
Ctrl+H：最小化窗口
Ctrl+B：顯示/隱藏側邊欄
Ctrl+"+/-"：放大/縮小界面
文件操作
Ctrl+N：新建文件
Ctrl+W：關閉文件
Ctrl+Tab：文件切換
格式調整
Ctrl+C/Ctrl+V：復制或剪切當前行/當前選中內容
Alt+Up/Down：向上/下移動一行
Shift+Alt+Up//Down：向上/下復制一行
Ctrl+Delete：刪除當前行
Shift+Alt+Left/Right：從光標開始向左/右選擇內容
代碼編輯
Ctrl+D：選中下一個相同內容
Ctrl+Shift+L：選中所有相同內容
Ctrl+F：查找內容
Ctrl+Shit+F：在整個文件夾中查找內容
常用設置
我們可以在settings.json中手動進行一些設置，讓我們的編輯器更好用。
關閉標簽介紹信息
我們在編寫代碼的時候鼠標移動到某個標簽上，經常會自動彈出一些介紹信息，擋住部分代碼，給我們的閱讀帶來了很大的困難，一直沒有找到關閉它的方法，目前可以通過設置時間延遲暫時實現這個效果，我設置的5000毫秒，你可以設置的更大一些，基本上它就不會彈出來了。
"editor.hover.delay": 5000
自動折行
設置代碼根據編輯器窗口大小自動折行
"editor.wordWrap": "on"
字體設置
// 一款適合代碼顯示的字體包（需要將字體包下載到本地）
"editor.fontFamily": "Source Code Pro, 'Source Code Pro'",
// 設置代碼字體大小
"editor.fontSize": 15,
自動保存
目前有四個選項：
- off：關閉自動保存。
- afterDelay：當文件修改后的時間超過"Files：Auto Save Delay"中配置的值時自動進行保存。
- onFocusChange：編輯器失去焦點時自動保存更新后的文件。
- onWindowChange：窗口失去焦點時自動保存更新后的文件。
"files.autoSave": "off"
關閉代碼提示
"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }
