這樣配置，讓你的VS Code好用到飛起！

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 }