美文网首页
vcode插件开发

vcode插件开发

作者: 懿小诺 | 来源:发表于2023-01-04 15:22 被阅读0次

    最近在研究怎么能提高开发速度,想到vscode里有个配置代码片段功能,之前用过配vue页面模板的,因此便想到平常开发中接入一些组件的自己公司内部代码是否可以通过代码片段来快速填入。
    以上答案是肯定的,下面说一下我的插件开发过程吧

    1.现在本地写一些代码,如下,是我通过ctrl+shift+p在输入框中输入snippets,点击配置代码片段,新建全局代码片段,输入文件名,按回车,即可编辑想要的代码片段了

    2.下图是一个代码块实例,将注释取消掉即可

    image.png

    3.具体配置

    body说明:
    值可以是列表,每一个元素为一行
    1 代表插入后光标的第一个位置,以此类推0 代表光标最后的位置
    如图中设置了四个光标位置,自动插入后先到第一个位置,然后输入title内容,按下Tab后切换到2……CURRENT_YEAR……等属于内置变量,具体参考下文

    image.png
    具体书写可以参考文档
    https://code.visualstudio.com/docs/editor/userdefinedsnippets

    通过脚手架生成插件项目

    1.键入依赖安装命令:

    npm i -g yo generator-code vsce
    

    2.键入创建插件命令:yo code命令后选择New Code Snippets;

    3.将上面准备好的配置文件内容覆盖到snippets文件夹的文件中

    4.完善package.json的内容为自己的信息;(添加publisher)

    5.更新README.md文件(必须修改,按自己要求或者随便改);

    创建账号+发布参考下面文档

    https://zhuanlan.zhihu.com/p/504218497
    在这个创建账号的过程中 我遇到个问题 创建publisher发布者账号的时候 点击创建 console里报错 提交不了 不知道什么原因 我在手机浏览器上创建的 就可以了
    创建完才能打包、发布

    6.键入打包命令:vsce package,生成后的文件可以分享安装。

    tips:vsce package报错如下 请检查本地node版本 我是本地版本为12 太低了 改成14好了

    相关文章

      网友评论

          本文标题:vcode插件开发

          本文链接:https://www.haomeiwen.com/subject/hvircdtx.html