VS Code是一個開源的跨平台開發工具，是我目前用的最順手的編輯器。本文介紹了一些常用的插件和快捷鍵，幫你大大提高軟體開發的效率，讓你有更多的時間去撸鐵和泡妹子。
先放上它的官網：
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 要好。
對于一些英文不太好的小夥伴，上來第一件事肯定是要切換成中文語言環境，安裝漢化包插件之後，按快捷鍵Ctrl+Shift+P調出指令面闆，輸入Configure Display Language，選擇zh-ch，然後重新開機vs code即可。
VS Code沒有提供直接在浏覽器中運作程式的内置功能，是以我們需要安裝此插件，在浏覽器中檢視我們的程式運作效果。
安裝這個插件之後，我們在編輯器中修改代碼，按Ctrl+S儲存，修改效果就會實時同步，顯示在浏覽器中，再不用手動重新整理。
[圖檔上傳失敗...(image-9b80fc-1564194236095)]
輸入标簽名稱的時候自動生成閉合标簽，特别友善。
自動檢測配對标簽，同步修改。
對配對的括号進行着色，友善區分，未安裝該插件之前括号統一都是白色的。
這個插件自動幫我們将選中的比對标簽高亮顯示，再也不用費勁查找了。
此插件可以幫助我們根據不同的檔案類型生成對應的圖示，這樣我們在側邊欄檢視檔案清單的時候直接通過圖示就可以區分檔案類型。
使用mac的小夥伴可以選擇下載下傳Vscode-icons-mac，基本圖示與Vscode-icons類似，就是檔案夾采用的是mac風格。
如果我們在編寫代碼時想在某個地方做一個标記，後續再來完善或者修改裡面的内容，可以利用此插件高亮顯示，之後可以幫助我們快速定位到需要修改的代碼行。
我們在編寫代碼的時候經常會不小心拼寫錯誤造成軟體運作失敗，安裝這個插件後會自動幫我們識别單詞拼寫錯誤并且給出修改建議，大大幫我們減輕了排除bug的壓力。
如果你需要學習或者接觸各種各樣的開發語言，那麼 Code Runner 插件可以讓你不用搭建各種語言的開發環境，直接通過此插件就可以直接運作對應語言的代碼，非常适合學習或測試各種開發語言，使用方式直接右鍵選擇Run Code，支援大量語言，包括Node。
這個插件可以在你導入工具包的時候提示這個包的體積，如果體積過大就需要考慮壓縮包，為後期上線優化做準備。
将光标移到代碼行上，即可顯示目前行最近的commit資訊和作者，多人開發的時候十分有用，責任到人，防止甩鍋。
對代碼進行書簽标記，通過快捷鍵實作快速跳轉到書簽位置。
具體的快捷鍵可以在鍵盤快捷方式中自定義設定：
這部分主要介紹一些針對特定開發環境的插件
使用element-ui庫的可以安裝這個插件，編寫标簽時自動提示element标簽名稱。
在package.json中顯示你下載下傳安裝的npm工具包的版本資訊，同時會告訴你目前包的最新版本。
VUE是時下最流行的js架構之一，很多公司都會選擇基于VUE來建構産品，Vetur對VUE提供了很好的語言支援。
沒有安裝該插件之前之前編寫字尾名為.vue的檔案時代碼是白色的
安裝插件後編寫vue檔案輸入s，按Tab鍵就可以自動補全模版。
這是一款時間記錄工具，它可以幫助你在vs code中記錄有效的程式設計的時間。
并且将資料用折線圖的形式展示出來，為你呈現一周内的工作趨勢，曾經編寫項目的時候最多一天程式設計将近12個小時，你的付出和努力wakatime都知道。
同時在他的官網中，也會顯示用扇形圖的形式顯示你編寫各個語言所占用的時間比例，以及你在各個項目中所用的時間占比，是一個非常好的資料報告，項目結束的時候你可以在它的Dashboard中清晰地看出自己的時間都是如何配置設定的。
有時候我們到了新公司或者換了新電腦需要配置新的開發環境，這時候一個一個下載下傳插件，再重新配置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，有需要的小夥伴可以下載下傳一下。
可以在配置檔案中選擇是否自動上傳和下載下傳
作為一名程式員，每天大部分時間都是坐在電腦前敲代碼，需要長時間的跟編輯器打交道，為我們的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毫秒，你可以設定的更大一些，基本上它就不會彈出來了。
設定代碼根據編輯器視窗大小自動折行
目前有四個選項：
off：關閉自動儲存。
afterDelay：當檔案修改後的時間超過"Files：Auto Save Delay"中配置的值時自動進行儲存。
onFocusChange：編輯器失去焦點時自動儲存更新後的檔案。
onWindowChange：視窗失去焦點時自動儲存更新後的檔案。