visual studio code开发代码片段插件

背景

visual studio code编辑器强大在于可以自己扩展插件，不仅可以去插件市场下载，也可以按照官方的API很方便的制作适合自己的插件；

自己最近在开发一个手机端网站项目，基于vant项目，想利用vscode的智能提示补全代码，提高下开发效率，于是学习了下代码片段（snippets）的插件开发；

编写

1. 在vscode编辑器中选择【用户代码片段】->选择当前项目中创建

   
   图1

image.png

会创建一个新的文件

image.png

2. 创建新的 代码片段文件

{
    "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表示补全代码的内容；${1}表示代码补充完后，输入光标的位置；
description表示方法的提示；

在vue文件中输入
svant 就会提示以下代码,回车后即可补全代码

image.png

到这里基本就可以使用了，如果是新项目，那就得带着这个文件，比较麻烦，这时候可以选择打包该扩展插件，上传至vscode扩展市场，以后只需要下载安装即可，也可供他人使用。

写成插件项目

单个文件是无法打包的，需要写成项目文件，结构如下：

image.png

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

发布扩展：

vsce
是“ Visual Studio代码扩展”的简称，是用于打包，发布和管理VS代码扩展的命令行工具。

安装

确保已安装Node.js。然后运行：

npm install -g vsce

用法
您可以vsce用来轻松打包和发布扩展程序：

$ cd myExtension
$ vsce package
# 生成vsix安装包 myExtension.vsix 
$ vsce publish
# 发布插件到 VS Code 扩展市场

vsce也可以搜索，检索元数据和取消发布扩展名。运行vsce --help 可查vsce命令

通过市场的web界面发布扩展

1. 注册扩展市场开发者账号

2. 创建完后选择上传刚才打包成功的vsix文件

   
   上传前

上传后

也可以通过该管理界面更新、删除包；

3. 上传完后即可在插件市场搜索查看

   
   image.png

最后
github地址