vscode插件開發實踐與demo源碼

vscode插件開發實踐與demo源碼

寫在前面

工欲善其事必先利其器。vscode做爲優秀的開發工具，給個人平常開發工做提供了極大的便利。其拓展機制更是如此。

可是，最近在作年度專業線任務時，有須要用到漂亮的行尾註釋對齊，搜索後發現vscode官方插件市場沒有我想要的。

因而便想着本身來開發這麼個東西，一方面方便後邊本身使用，一方面也能學習下vscode的插件開發、發佈方法，另外一方面要是發佈後對其餘人有所幫助就更好了。

本文主要內容

這篇文章是在我完成插件開發、發佈後寫的，記錄下方法。

主要包含兩個方面的內容：

1. vscode插件開發、發佈主要流程
2. vscode插件demo源碼參考https://github.com/gitshan/vscode-extension-comment-aligner

vscode插件開發、發佈主要流程

1. 插件開發前的準備：vscode、nodejs、vscode插件生產工具、git、微軟帳號
2. 插件開發：插件構思、官方文檔查閱
3. 插件發佈：打包、上傳、插件市場操做
4. 插件維護：更新迭代後打包、上傳、插件市場操做

插件開發前的準備：

vscode、nodejs、git、微軟帳號，這個的準備無需多說。

vscode插件生產工具：官方推薦使用Yeoman 和 VS Code Extension Generator。用以下命令安裝：

npm install -g yo generator-code

至此開發所需的準備已作好。

插件開發

使用生產工具初始化代碼

執行以下指令

yo code

結果以下：

$ yo code

     _-----_     ╭──────────────────────────╮
    |       |    │   Welcome to the Visual  │
    |--(o)--|    │   Studio Code Extension  │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of extension do you want to create? (Use arrow keys)
> New Extension (TypeScript)
  New Extension (JavaScript)
  New Color Theme
  New Language Support
  New Code Snippets
  New Keymap
  New Extension Pack
(Move up and down to reveal more choices)

在os系統上經過上下鍵來選擇要建立的類型，在win上輸入一、二、3後按回車來選擇。

其他步驟根據提示便可。獲得以下結構目錄結構：

├── .vscode      // 資源配置文件
├── CHANGELOG.md // 更改記錄文件，會展現到vscode插件市場
├── extension.js // 拓展源代碼文件
├── jsconfig.json
├── package.json // 資源配置文件
├── README.md    // 插件介紹文件，會展現到vscode插件市場
├── test         // 測試文件
└── vsc-extension-quickstart.md

ps：其他項目類型的文檔目錄可能會有所差異，以生成的文件目錄爲準。在js拓展項目下，最重要的就是extension.js和package.json。

插件構思

靈感來源於生活、工做，這個想到了就能夠去作。好比我這個行尾註釋對齊（上面的目錄註釋就是用的我剛開發好的插件）。

關於comment-aligner的具體思路就不寫在這裏了，感興趣的能夠去下載源碼看看，裏邊包含了完整的註釋。邏輯十分簡單。

查閱文檔開發

這裏不得不說一下官方文檔不太好看，至少不是那麼友好。傳送門https://code.visualstudio.com/api/references/vscode-api。英文實在吃力的可使用chrome的一鍵翻譯，翻譯的還算準確的。

對於基本的應用主要查看window相關的就足夠了，結合yo code生成的基本代碼能夠實現簡單的功能。

插件發佈

安裝打包、發佈工具

npm install -g vsce

建立發佈人

在插件市場官網建立發佈人

完善package.json

package.json中有vscode的自定義配置，在執行打包命令時vscode會自檢，若是配置錯誤或者遺漏會有提示信息。

較完整的信息以下（下方是我發佈的comment aligner的package.json文件）：

{
    "name": "comment-aligner",
    "displayName": "comment aligner",
    "description": "A tool for aligning the inline trailing comment",
    "version": "1.0.1",
    "publisher": "huangbaoshan", // 發佈人，在插件市場官網建立的發佈人id
    "icon": "icon/icon.png",     // 插件圖標，用於在插件市場展現的icon；能夠放到同級目錄內，打包會帶入
    "repository": {
        "type": "git",
        "url":"https://github.com/gitshan/vscode-extension-comment-aligner.git"
    },
    "engines": {
        "vscode": "^1.30.0"      // vscode版本號
    },
    "categories": [
        "Other"                  // vscode插件類別，會在插件市場的對應類別中展現
    ],
    "activationEvents": [
        "onCommand:extension.commentaligner"
    ],
    "main": "./extension.js",
    "contributes": {
        "commands": [{
            "command": "extension.commentaligner", // 插件註冊的類名
            "title": "Comment Aligner"             // 插件在命令麪包的展現名稱
        }]
    },
    "scripts": {
        "postinstall": "node ./node_modules/vscode/bin/install",
        "test": "node ./node_modules/vscode/bin/test"
    },
    "devDependencies": {
        "typescript": "^3.1.4",
        "vscode": "^1.1.25",
        "eslint": "^4.11.0",
        "@types/node": "^8.10.25",
        "@types/mocha": "^2.2.42"
    }
}

打包

執行以下命令：

vsce package

在根目錄獲得：comment-aligner-1.0.1.vsix文件

發佈

1. 方法一：用vsce的vsce publish工具來發布，可是須要在官網配置Personal Access Token較爲繁瑣。可參考官方教程
2. 方法二：在官網直接上傳發布
   
   
   

   上傳後點擊肯定便可發佈成功。

發佈檢查

1. 在插件市場官網看狀態
   
2. 在插件市場官網搜索
   
3. 在vscode插件頁搜索
   

以上均表示已發佈成功。

插件維護

在發現bug和新功能開發完成後，須要更新插件，只須要將新生產的.vsix包上傳到官網便可。

最後

但願有用，謝謝你們。