VSCode中一些常用插件和快捷鍵，幫助你提高開發效率！ ！
- 青灯夜游轉載
- 2021-06-15 11:01:124755瀏覽
本篇文章為大家介紹一下VSCode中的一些常用的外掛程式和快捷鍵，幫你大幅提升軟體開發的效率。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有幫助。
VS Code是一個開源的跨平台開發工具，是我目前使用的最順手的編輯器。本文介紹了一些常用的插件和快捷鍵，幫你大幅提升軟體開發的效率，讓你有更多的時間去擼鐵和泡妹。 【推薦學習：《vscode教學》】
初識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儲存，修改效果會即時同步，顯示在瀏覽器中，再不用手動刷新。
Auto Close Tag 自動閉合標籤
輸入標籤名稱的時候自動產生閉合標籤，特別方便。
Auto Rename Tag 尾部閉合標籤同步修改
自動偵測配對標籤，同步修改。
Bracket Pair Colorizer 以不同顏色高亮顯示符合的括號
##配對的括號進行著色，方便區分，未安裝插件之前括號統一都是白色的。
Highlight Matching Tag 高亮顯示匹配標籤
這個外掛自動幫我們將選取的符合標籤會高亮顯示，再也不用費勁找了。
Vscode-icons VSCode 檔案圖標
此外掛程式可以幫助我們根據不同的檔案類型產生對應的圖標，這樣我們在側邊欄查看文件清單的時候直接透過圖示就可以區分文件類型。
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提供了很好的語言支援。
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 }
更多编程相关知识，请访问：编程教学！！
以上是VSCode中一些常用插件和快捷鍵，幫助你提高開發效率！ ！的詳細內容。更多資訊請關注PHP中文網其他相關文章！