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

基本插件

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

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 保存，修改效果就會實時同步，顯示在瀏覽器中，再不用手動刷新。

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/R6aDtwlFWKn18577mk6UhQ