适用场景
- 每个团队都可能会有自己的库或者框架,没有相应的插件提示和快速填充非常的难受,效率也非常低,做一个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(){\n\treturn {\n\t$0\n\t}\n}"],
"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小星星走一走
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。