vscode插件的开发与发布流程

ermaoL 发布于2019-08-22 17:02 / 2925人阅读

摘要：依赖最好是更新到最新版，插件调试会更稳定稳定版生成基本文件过程与类似。预览发布前可以通过将文件放进的文件夹中，就可以本地预览和使用了。

适用场景

每个团队都可能会有自己的库或者框架，没有相应的插件提示和快速填充非常的难受，效率也非常低，做一个vscode的代码提示其实也非常的简单。

依赖

vscode最好是更新到最新版，插件调试会更稳定

node 稳定版

npm install -g yo generator-code

yo code 生成基本文件, 过程与npm init 类似。yo会在最后自动自行npm install，如果失败可以手动再执行

调试

点击vscode的调试，关联到lanuch.json文件，弹出一个名为扩展开发主机的窗口，这个窗口就是临时拥有这个插件的调试窗口。

代码片段

在package.json的contributes可以自定义自己的snippets，language代表在使用何种语言解析这种文件的时候代码片段才会生效

//package.json
"contributes": {
    "snippets": [
        {
            "language": "html",
            "path": "./src/snippets/html.json"
        },
        {
            "language": "vue",
            "path": "./src/snippets/fes.json"
        }
    ]
}

关联的snippets主要是prefix、body、description三个属性，prefix是指在vscode输入的关键字可以输出body里面的内容。

//fes.json
"FesData": {
    "prefix": "FesData",
    "body": ["FesData: function(){
	return {
	$0
	}
}"],
    "description": "Fes page data"
  },

如果想要在vue文件的template标签中使用snippets，language是vue-html，如果是script标签中使用language必须要有JavaScript这一项，language只写vue在这些标签是不生效的。

预览

发布前可以通过将文件放进vscode的extension文件夹中，就可以本地预览和使用了。

发布

在Visual Studio Team Services 创建一个账号

根据账号的名字访问主页，例如我的名字是bingou-ms，主页链接就是https://bingou-ms.visualstudi...

点击右上角的个人信息security

点击add，这里交互真的很难让人一眼看出这个是个按钮，

确认后会有token显示，但是它只显示一次，务必要保留，之后命令行操作会使用到

npm install vsce -g

vsce create-publisher (name)

vsce login (publisher name)

vsce publish (version)

之后的发布只要执行第四步就可以

其他

publish的插件的readme.md文件就是安装详情页的详细信息内容，但是必须在package.json中写相关的repository

FesHelper小星星走一走

专线服务 idc机房托管服务器的配置与发布小程序的开发和发布小程序开发的流程小程序的开发流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94795.html

FE.BASE-vscode使用、原理、插件开发笔记

摘要：插件提供内容，负责渲染。增量更新，尽可能地减少重新渲染长时间运行的任务应该支持，并可以取消插件能够正确地处理对象的生命周期。使用了模式，运行可以将这个对象销毁。使用命令行使用帮助：code --help 使用已经打开的窗口来打开文件：code -r 打开文件并滚动到特定行：code -r -g package.json:128 比较两个文件：code -r -d a.tx...

MingjunYang 2019-08-26 13:46 评论0 收藏0
VS Code插件开发介绍（一）

摘要：发布插件插件开发完后就可以发布了，需要安装安装完后，需要去注册并生成一个。总结本文介绍了插件开发的基本流程，实现了一个简单的插件。更多的开发技巧，可以看这个系列的第二篇插件开发介绍二前言前段时间做了一个基于命令行的效率工具，可以自动生成组件的模板代码。自己用起来还觉得挺好，但在组内案例几次后大家都不愿意用，究其原因还是命令行工具使用起来门槛有点高，不方便。由于组内已经统一使用VS ...

thursday 2019-08-23 12:17 评论0 收藏0
实录分享&视频 | 微软Visual Studio Code是这样支持Docker的

摘要：分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。是微软开源的一款开发工具，它针对做了许多编译和命令上的支持。今天主要向大家介绍一下微软去年推出的一个，以及对的一些支持。年他加入微软，从事开发的工作。本文是数人云分布式架构的开源组件大选Meetup的实录分享。分享嘉宾是来自微软云计算事业部的高级软件开发工程师刘鹏。Visual Studio Code是微软开源的一款开发工具，它...

leoperfect 2019-06-28 17:49 评论0 收藏0
VS Code插件开发指南(view-readme)

摘要：本次给大家带来的分享是关于插件的一些经验，分享的内容是我写的一个插件。为了解决上面这个问题，我开发了这个插件。本次给大家带来的分享是关于VS Code插件的一些经验，分享的内容是我写的一个插件：view-readme。开发背景在本地安装好所有npm包后，有的时候想看看某个模块的文档，了解其特性以及如何使用。于是打开node_modules文件夹，大家都知道，这个文件夹里面的文件是...

yy736044583 2019-08-21 15:32 评论0 收藏0
2021爱智先行者—（2）零基础APP开发实例

摘要：有鉴于此，本文以未安装工具软件的计算机未激活的爱智设备为例，实战解说零基础小白的爱智开发过程。爱智设备断开互联网也可以运行，但本文中的开发部署等功能无法操作。【本...

paney129 2021-11-22 09:34 评论0 收藏0