亲宝软件园·资讯

展开

visual studio code开发代码片段扩展插件

sands 人气:3

背景

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

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

编写

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


会创建一个新的文件

  1. 创建新的 代码片段文件
{
    "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 就会提示以下代码,回车后即可补全代码

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

写成插件项目

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

其中 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文件


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

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

最后
github地址

加载全部内容

相关教程
猜你喜欢
用户评论