背景

visual studio code編輯器強大在于可以自己擴展插件，不僅可以去插件市場下載，也可以按照官方的API很方便的制作適合自己的插件；

自己最近在開發(fā)一個手機端網(wǎng)站項目，基于vant項目，想利用vscode的智能提示補全代碼，提高下開發(fā)效率，于是學習了下代碼片段（snippets）的插件開發(fā)；

編寫

1. 在vscode編輯器中選擇【用戶代碼片段】->選擇當前項目中創(chuàng)建

   
   
   圖1

image.png

會創(chuàng)建一個新的文件

image.png

2. 創(chuàng)建新的 代碼片段文件

{
    "vantpage": {
        // "scope": "javascript,typescript",
        "prefix": "svantpl",
        "body": [
            "<template>",
            "\t<div>",
            "\t</div>",
            "</template>",
            "\r<script lang=\"ts\">",
            "import { Component, Vue, Prop } from 'vue-property-decorator';",
            "import { Row, Col, Cell, CellGroup } from 'vant';",
            "@Component({",
            "\t name: '${1}',",
            "\t components: {",
            "\t\t [Row.name]: Row,",
            "\t\t [Col.name]: Col,",
            "\t\t [Cell.name]: Cell,",
            "\t\t [CellGroup.name]: CellGroup",
            "\t }",
            "})",
            "export default class ${1} extends Vue {",
            "\t created() {",
            "",
            "\t }",
            "}",
            "</script>",
            "\r<style lang=\"scss\">",
            "</style>",
        ],
        "description": "vant typescript template",
    }
}

其中prefix表示提示字符串的前綴 當鍵入 svantpl的時候 會提示補全代碼信息；
body表示補全代碼的內(nèi)容；${1}表示代碼補充完后，輸入光標的位置；
description表示方法的提示；

在vue文件中輸入
svant 就會提示以下代碼,回車后即可補全代碼

image.png

到這里基本就可以使用了，如果是新項目，那就得帶著這個文件，比較麻煩，這時候可以選擇打包該擴展插件，上傳至vscode擴展市場，以后只需要下載安裝即可，也可供他人使用。

寫成插件項目

單個文件是無法打包的，需要寫成項目文件，結構如下：

image.png

其中 vsix文件是打包生成的文件

發(fā)布擴展：

vsce
是“ Visual Studio代碼擴展”的簡稱，是用于打包，發(fā)布和管理VS代碼擴展的命令行工具。

安裝

確保已安裝Node.js。然后運行：

npm install -g vsce

用法
您可以vsce用來輕松打包和發(fā)布擴展程序：

$ cd myExtension
$ vsce package
# 生成vsix安裝包 myExtension.vsix 
$ vsce publish
# 發(fā)布插件到 VS Code 擴展市場

vsce也可以搜索，檢索元數(shù)據(jù)和取消發(fā)布擴展名。運行vsce --help 可查vsce命令

通過市場的web界面發(fā)布擴展

1. 注冊擴展市場開發(fā)者賬號

2. 創(chuàng)建完后選擇上傳剛才打包成功的vsix文件

   
   
   上傳前

上傳后

也可以通過該管理界面更新、刪除包；

3. 上傳完后即可在插件市場搜索查看

   
   
   image.png

最后
github地址