筆記, 建立 VS Code 的 snippets 擴展

最近考慮把公司的經常使用代碼用擴展處理成複用的, 照着文檔處理了一遍.

Snippets 擴展

關於擴展的結構, 能夠直接參考官方給出的示例,
一個 package.json 文件, 加上一個 Snippets 的 JSON 文件, 就算寫完了:
https://github.com/Microsoft/...

其中 Snippets 的定義大概是這樣,

• key 跟 description 只是介紹性文字
• prefix 是 snippet 在自動補全當中的觸發字段
• body 當中的代碼片斷, 分開是換行(作了個小工具來把多行拆成數組)
• $1 ${1:placeholder} 這樣的寫法, 表示 Tab 控制的光標位置, 其中 $0 表示結束位置

{
    "For_Loop": {
        "prefix": "for",
        "body": [
          "for (const ${2:element} of ${1:array}) {",
          "\t$0",
          "}"
        ],
        "description": "For Loop"
    }
}

複雜的例子就看別人寫的擴展了:
https://github.com/xabikos/vs...

VS 還支持一些複雜的功能, 直接看文檔上:
https://code.visualstudio.com...

安裝擴展

安裝擴展須要一個命令行工具, 在 package.json 所在目錄運行:

npm install -g vsce
vsce package

這時會生成一個擴展名爲 .vsix 的文件, 就能夠經過 VS Code 的命令安裝了:

code --install-extension my-extension-0.0.1.vsix

這一步也能夠經過 VS Code 圖形界面來完成:

發佈擴展到市場

說的話大體步驟不麻煩, 大體上:

• 先到 https://dev.azure.com/ 上註冊帳號, 建立組織,
• 在 dev.azure 訪問本身的 security 頁面建立一個 token, 選中全部 Marketplace 權限,
• 在組織當中建立一個 creator, 命令行或者界面都能操做, 把 creator id 寫進 package.json,
• 而後經過 publish 子命令發佈...

https://code.visualstudio.com...

不過...實際操做挺多坑的, 網絡有時候很差, 提示也不明確, 我浪費了很多的時間查緣由.

結尾

VS Code 用支持 .vscodeignore, 也支持 icon, 結構跟 npm 模塊也相似.

最後是我廠的 Snippet 代碼, 目前功能不多, 後續慢慢擴展:
https://github.com/jimengio/j...