VSCODE 外掛程式初探,順便還有博主的寫的背景圖外掛程式

原文：http://www.cnblogs.com/lianmin/p/5499266.html#dev

寫在前面 分享一個vscode外掛程式background(用於改變背景)。點擊直接跳到vscode外掛程式開發步驟

做vscode的外掛程式，很久就有這個想法了，但是一直因為這樣，那樣的事情耽誤，放棄了N次。不過確實讓我對文檔有了個直觀的瞭解。

上周末的時候因為測試妹紙要加班測試，讓我也到公司加班，等待可能出現的bug這理由聽著就扯淡

當然一群妹紙都到公司等著了，我也必須去......於是在等待bug的時間裡看了看官方的文檔，在這裡寫了點自己的摸索結果。

本文分為2部分，1是分享自己做的一個demo，2個分享自己摸索的一些製作外掛程式踩完坑後的一點經驗。 官方vscode外掛程式文檔 https://code.visualstudio.com/docs/extensions/overview vscode-background外掛程式地址 https://marketplace.visualstudio.com/items?itemName=shalldie.background Github地址 https://github.com/shalldie/vscode-background

做了一個vscode背景外掛程式，大家可以試試F1輸入 ext install background 來試用，僅測試了win7，win10. 
by：2016/5/19 Cross all themes! 已支援所有主題!
by:2016/8/29 前幾天，添加了對mac的支援

安裝:

有3個命令:

效果圖:

具體怎麼用應該能看懂吧，，，每個操作步驟我都配了中英文提示，還有浮水印提示。如果還是不明白，可以隨便玩，玩壞了大不了重裝唄 =。= vscode 外掛程式開發步驟，一點經驗

說再多也不如做一遍，這裡我們一起來一步步做一個外掛程式。就做官網的那個demo，wordCounter,用於統計當前頁單詞量。 官網是TypeScript，我不會...這裡就用nodejs來樣本。 一、搭建環境，準備工作

首先當然是安裝nodejs跟vscode，這裡我略過了，不用我多嘴。

vscode 團隊，為外掛程式開發提供了一個工具，先全域安裝這個，然後執行 yo code 來開始我們的工作。

npm install -g yo generator-code

yo code

我們選第二項，這裡需要注意下：一般情況可以用鍵盤的 ↑ ↓ 鍵來調整，但是win10有時候按了沒反應，這時候可以輸入2斷行符號，來達到同樣的目的。

然後會出現以下一系列選項，一路斷行符號就好...... 相信起名字不會難道各位，其實我自己很多時候為一個變數的命名會耽誤很久，改很多次。囧。

然後它會自動執行 npm install 來載入vscode這個依賴。我這裡網不行所以直接差掉，自己用 cnpm install 來安裝，沒有影響，可以直接關閉。

準備工作到此完畢，我們開始搞代碼。 二、結構簡介

.. 三、Hello World，vscode載入外掛程式的流程

扯了那麼多，先看看helloworld的效果吧。直接按F5

不出意外，會彈出一個提示訊息：“Hello World” VSCODE ，是如何載入並運行外掛程式的。

這裡我參考了不少資料，官網的文檔，和其它的一些文章。四級的英語水平，頭一次感覺到稍許作用。 https://code.visualstudio.com/docs/extensionAPI/activation-events http://www.3fwork.com/b102/002764MYM005691/ https://code.visualstudio.com/docs/extensionAPI/extension-manifest

1.package.json 告知vscode，自己定義的事件，和觸發事件的方式

1 2 3 4 5 6 7 8 9

"activationEvents" : [      "onCommand:extension.sayHello" ], "contributes"