基本插件

這個部分介紹一些必裝的開發(fā)插件，幫你大大提升代碼編輯效率。

Chinese(Simplified) Language Pack for Visual Stidio Code 中文漢化包

對于一些英文不太好的小伙伴，上來第一件事肯定是要切換成中文語言環(huán)境，安裝漢化包插件之后，按快捷鍵Ctrl+Shift+P調(diào)出命令面板，輸入Configure Display Language，選擇zh-ch，然后重啟vs code即可。

open-in-browser 在瀏覽器中查看

VS Code沒有提供直接在瀏覽器中運行程序的內(nèi)置功能，所以我們需要安裝此插件，在瀏覽器中查看我們的程序運行效果。

Live Server 實時預(yù)覽

安裝這個插件之后，我們在編輯器中修改代碼，按Ctrl+S保存，修改效果就會實時同步，顯示在瀏覽器中，再不用手動刷新。

Auto Close Tag 自動閉合標(biāo)簽

輸入標(biāo)簽名稱的時候自動生成閉合標(biāo)簽，特別方便。

Auto Rename Tag 尾部閉合標(biāo)簽同步修改

自動檢測配對標(biāo)簽，同步修改。

Bracket Pair Colorizer 用不同顏色高亮顯示匹配的括號

對配對的括號進(jìn)行著色，方便區(qū)分，未安裝該插件之前括號統(tǒng)一都是白色的。

Highlight Matching Tag 高亮顯示匹配標(biāo)簽

這個插件自動幫我們將選中的匹配標(biāo)簽高亮顯示，再也不用費勁查找了。

Vscode-icons VSCode 文件圖標(biāo)

此插件可以幫助我們根據(jù)不同的文件類型生成對應(yīng)的圖標(biāo)，這樣我們在側(cè)邊欄查看文件列表的時候直接通過圖標(biāo)就可以區(qū)分文件類型。

使用mac的小伙伴可以選擇下載Vscode-icons-mac，基本圖標(biāo)與Vscode-icons類似，就是文件夾采用的是mac風(fēng)格。

TODO Highlight 高亮

如果我們在編寫代碼時想在某個地方做一個標(biāo)記，后續(xù)再來完善或者修改里面的內(nèi)容，可以利用此插件高亮顯示，之后可以幫助我們快速定位到需要修改的代碼行。

Code Spell Checker 單詞拼寫檢查

我們在編寫代碼的時候經(jīng)常會不小心拼寫錯誤造成軟件運行失敗，安裝這個插件后會自動幫我們識別單詞拼寫錯誤并且給出修改建議，大大幫我們減輕了排除bug的壓力。

Code Runner 運行選中代碼段

如果你需要學(xué)習(xí)或者接觸各種各樣的開發(fā)語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發(fā)環(huán)境，直接通過此插件就可以直接運行對應(yīng)語言的代碼，非常適合學(xué)習(xí)或測試各種開發(fā)語言，使用方式直接右鍵選擇Run Code，支持大量語言，包括Node。

Improt Cost 成本提示

這個插件可以在你導(dǎo)入工具包的時候提示這個包的體積，如果體積過大就需要考慮壓縮包，為后期上線優(yōu)化做準(zhǔn)備。

GitLens 查看Git信息

將光標(biāo)移到代碼行上，即可顯示當(dāng)前行最近的commit信息和作者，多人開發(fā)的時候十分有用，責(zé)任到人，防止甩鍋。

Bookmarks 書簽

對代碼進(jìn)行書簽標(biāo)記，通過快捷鍵實現(xiàn)快速跳轉(zhuǎn)到書簽位置。

具體的快捷鍵可以在鍵盤快捷方式中自定義設(shè)置：

拓展插件

這部分主要介紹一些針對特定開發(fā)環(huán)境的插件

Vscode-element-helper

使用element-ui庫的可以安裝這個插件，編寫標(biāo)簽時自動提示element標(biāo)簽名稱。

Version Lens 工具包版本信息

在package.json中顯示你下載安裝的npm工具包的版本信息，同時會告訴你當(dāng)前包的最新版本。

Vetur VUE語言包

VUE是時下最流行的js框架之一，很多公司都會選擇基于VUE來構(gòu)建產(chǎn)品，Vetur對VUE提供了很好的語言支持。

沒有安裝該插件之前之前編寫后綴名為.vue的文件時代碼是白色的

安裝插件后編寫vue文件輸入s，按Tab鍵就可以自動補(bǔ)全模版。

WakaTime 計算代碼工作量

這是一款時間記錄工具，它可以幫助你在vs code中記錄有效的編程的時間。

并且將數(shù)據(jù)用折線圖的形式展示出來，為你呈現(xiàn)一周內(nèi)的工作趨勢，曾經(jīng)編寫項目的時候最多一天編程將近12個小時，你的付出和努力wakatime都知道。

同時在他的官網(wǎng)中，也會顯示用扇形圖的形式顯示你編寫各個語言所占用的時間比例，以及你在各個項目中所用的時間占比，是一個非常好的數(shù)據(jù)報告，項目結(jié)束的時候你可以在它的Dashboard中清晰地看出自己的時間都是如何分配的。

Settings Sync VSCode設(shè)置同步到Gist

有時候我們到了新公司或者換了新電腦需要配置新的開發(fā)環(huán)境，這時候一個一個下載插件，再重新配置vs code就非常麻煩而且你還不一定記得那么全面，通過這個插件我們可以將當(dāng)前vs code中的配置上傳到Gist，之后再通過Gist下載，就可以將所有配置同步到新環(huán)境中了。

在Github首頁點擊頭像，選擇Settings進(jìn)入設(shè)置頁面。

點擊左側(cè)側(cè)邊欄Developer settings，進(jìn)入開發(fā)者設(shè)置。

選擇Personal access tokens，點擊右側(cè)Generate new token。

填寫token名稱，在下方勾選gist。

點擊下方的Generate token按鈕生成一個新的token。

將生成的新的token保存下來。

在vscode中安裝Settings Sync插件，輸入Ctrl+Shift+p輸入Sync，選擇更新/上傳配置。

將github中生成的token輸入，點擊回車。

在控制臺中自動生成一串id,之后便可以通過token和id進(jìn)行配置同步。

輸入Ctrl+Shift+p輸入Sync，選擇下載配置，輸入token和id即可同步下載。

這篇文章中介紹的vs code配置已經(jīng)全部同步到Gist，有需要的小伙伴可以下載一下。

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6

Id:338d5dfb6b7784c980250cffe8365899

可以在配置文件中選擇是否自動上傳和下載

"sync.removeExtensions":?true,
??????"sync.syncExtensions":?true,
??????"sync.autoDownload":?true,
??????"sync.autoUpload":?true,
??????"sync.gist":?"338d5dfb6b7784c980250cffe8365899"

顏色主題

作為一名程序員，每天大部分時間都是坐在電腦前敲代碼，需要長時間的跟編輯器打交道，為我們的vscode選擇一款好看的顏色主題，能極大地提升寫代碼過程中的愉悅感，為了保護(hù)眼睛，這里推薦一個深色主題安裝包，里面包含了如下幾款皮膚。

我個人最喜歡的還是下面兩款深色主題，主題這個東西一般用習(xí)慣了也不會來回去換，所以選擇一款自己用著舒服的就好。

Dracula Official 吸血鬼主題（本人目前使用的一款）

One Dark Pro

常用快捷鍵

編輯器與窗口管理

Ctrl+Shift+P: 打開命令面板。

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：向上/下移動一行

Shift+Alt+Up//Down：向上/下復(fù)制一行

Ctrl+Delete：刪除當(dāng)前行

Shift+Alt+Left/Right：從光標(biāo)開始向左/右選擇內(nèi)容

代碼編輯

Ctrl+D：選中下一個相同內(nèi)容

Ctrl+Shift+L：選中所有相同內(nèi)容

Ctrl+F：查找內(nèi)容

Ctrl+Shit+F：在整個文件夾中查找內(nèi)容

常用設(shè)置

我們可以在settings.json中手動進(jìn)行一些設(shè)置，讓我們的編輯器更好用。

關(guān)閉標(biāo)簽介紹信息

我們在編寫代碼的時候鼠標(biāo)移動到某個標(biāo)簽上，經(jīng)常會自動彈出一些介紹信息，擋住部分代碼，給我們的閱讀帶來了很大的困難，一直沒有找到關(guān)閉它的方法，目前可以通過設(shè)置時間延遲暫時實現(xiàn)這個效果，我設(shè)置的5000毫秒，你可以設(shè)置的更大一些，基本上它就不會彈出來了。

"editor.hover.delay":?5000

自動折行

設(shè)置代碼根據(jù)編輯器窗口大小自動折行

"editor.wordWrap":?"on"

字體設(shè)置

???//?一款適合代碼顯示的字體包（需要將字體包下載到本地）
??????"editor.fontFamily":?"Source?Code?Pro,?'Source?Code?Pro'",
??????//?設(shè)置代碼字體大小
??????"editor.fontSize":?15,

自動保存

目前有四個選項：

• off：關(guān)閉自動保存。
• afterDelay：當(dāng)文件修改后的時間超過"Files：Auto Save Delay"中配置的值時自動進(jìn)行保存。
• onFocusChange：編輯器失去焦點時自動保存更新后的文件。
• onWindowChange：窗口失去焦點時自動保存更新后的文件。

"files.autoSave":?"off"

關(guān)閉代碼提示

"editor.quickSuggestions":?{?"other":?false,?"comments":?false,?"strings":?false?}