基本插件
這個部分介紹一些必裝的開發插件，幫你大大提升代碼編輯效率。
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 }作者：視覺派Pie
鏈接：https://www.jianshu.com/p/fd945e8e099d
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。