文章索引
- VSCode插件開發全攻略（一）概覽
- VSCode插件開發全攻略（二）HelloWord
- VSCode插件開發全攻略（三）package.json詳解
- VSCode插件開發全攻略（四）命令、菜單、快捷鍵
- VSCode插件開發全攻略（五）跳轉到定義、自動補全、懸停提示
- VSCode插件開發全攻略（六）開發調試技巧
- VSCode插件開發全攻略（七）WebView
- VSCode插件開發全攻略（八）代碼片段、設置、自定義歡迎頁
- VSCode插件開發全攻略（九）常用API總結
- VSCode插件開發全攻略（十）打包、發布、升級
本系列文章同步首發於多個平台，限於精力有限，后續如有更新和修改，僅更新我的個人博客上的內容，歡迎戳這里查看最新版：http://blog.haoji.me/vscode-plugin-overview.html
寫在前面
一年前我寫了一篇3萬多字的Chrome插件(擴展)開發全攻略，反響還不錯，幫助了很多新手快速上手，甚至包括大名鼎鼎的紅芯瀏覽器（戳這里了解更多）。
最近因工作需要又接觸到了vscode插件開發，所以趁勢再寫一篇有關vscode插件開發的文章，記錄一些自己踩過的坑以及接觸vscode插件開發這2個多月以來的心得體會，讓大家少走一些彎路避免重復踩坑。
目前網上有關介紹vscode插件開發的文章也有挺多的，但都不夠深入，基本上都是點到為止，篇幅不大，本系列文章爭取多講一些，涵蓋面會更廣，干貨更多。
鑒於之前寫過幾篇內容較多的文章大家都反饋說閱讀麻煩，一篇文章內容太多看起來太累，所以這次就拆分來寫。
關於vscode插件
相信大家對vscode應該都不陌生，VSCode是微軟出的一款輕量級代碼編輯器，免費而且功能強大，以功能強大、提示友好、不錯的性能和顏值俘獲了大量開發者的青睞，對JavaScript和NodeJS的支持非常好，自帶很多功能，例如代碼格式化，代碼智能提示補全、Emmet插件等。
再強大的IDE那也不可能面面俱到什么功能都塞進去，那樣只會導致IDE本身太臃腫。功能嘛，按需索取，所以，vscode的很多強大功能都是基於插件實現的，IDE只提供一個最基本的框子和最基本功能，由插件來豐富和擴展它的功能。
vscode插件可以很輕松的在應用商店搜索並下載到，應用商店官網是：https://marketplace.visualstudio.com/vscode ，vscode推出時間本身並不長，但生態發展得非常好，應用商店已經有各種各樣豐富的插件供大家使用了。
因為vscode本身都是用瀏覽器實現的，所以其插件不用說肯定也是基於HTML+JS等前端技術實現，從形式上看就是一個類似於npm包的vsix文件，只不過按照一些特殊規范來實現一些特殊功能，所以vscode插件開發難度不大，甚至可以說熟悉了相關API之后很容易。
有必要學習vscode插件開發嗎
有！而且非常有必要！每個人都會多多少少有一些自己的特殊定制需求，當你不知道開發一個IDE插件其實也很容易、或者你沒有意識到通過開發插件可以幫你提升多大效率時，你並不會下意識的將一些問題的解決方式往IDE插件開發上去想。至少我曾經就是這樣的，提升開發效率大部分時候想到的都是寫一些腳本工具、寫一些瀏覽器插件、寫一些客戶端工具等，接觸到IDE插件開發之后發現原來有些問題可以通過更高效的方式來解決，畢竟IDE才是我們程序員每天接觸最多的東西。
但至於可以開發什么樣的插件、實現什么樣的功能、以什么樣的形式呈現，這就要靠你從工作和生活中去發現、去找靈感並提煉了。
demo下載
本系列文章所有demo均在這個倉庫里：https://github.com/sxei/vscode-plugin-demo ，可以直接下載運行。當然還有更簡單的，這個demo已經發布到應用市場了，大家可以直接點擊這里下載安裝，或則您也可以直接在vscode里面搜索plugin-Demo就能搜到：
vscode插件能做什么
既然前面講到學習vscode插件開發很有必要，那插件到底能做什么呢？能實現什么功能？能從哪些方面動手腳？下面我們就來列舉一些好讓大家有個大概了解。
不受限的本地磁盤訪問
因為vscode是基於Electron開發的，可以使用nodejs隨意讀寫本地文件、跨域請求、甚至創建一個本地server，這都是沒有任何限制的，所以只要你想做，基本上沒有不能實現的。
自定義命令、快捷鍵、菜單
vscode插件很多功能都是基於一個個命令實現的，我們可以自定義一些命令，這個命令將出現在按下Ctrl+Shift+P后的命令列表里面，同時可以給命令配置快捷鍵、配置資源管理器菜單、編輯器菜單、標題菜單、下拉菜單、右上角圖標等。
自定義跳轉、自動補全、懸浮提示
自定義跳轉：
自動補全：
提示：
自定義設置、自定義歡迎頁
自定義WebView
自定義左側功能面板
自定義顏色、圖標主題
新增語言支持
給某一種原有沒有的語言提供語言支持，語言支持包括很多方面，比如代碼高亮、語法解析、折疊、跳轉、補全等；
Markdown增強
你可以自定義markdown預覽的樣式、添加一些新語法、新功能的支持。
其它
其它還有比如狀態欄修改、通知提示、編輯器控制、git源代碼控制、任務定義、Language Server、Debug Adapter等等。
收尾
本文作為開篇，不做太多詳細介紹，只是為了讓大家對vscode插件有一個大致了解，后面再分篇慢慢細講。
參考資料
微軟VSCode插件開發官方文檔：https://code.visualstudio.com/docs/extensions/overview