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