文档章节

VSCode插件制作:HTML代码自动填充

yushulx
 yushulx
发布于 2016/12/13 10:43
字数 809
阅读 1.6K
收藏 2

Visual Studio Code不但跨平台,还有良好的扩展性。我们可以在Visual Studio Marketplace上找到各种各样的插件。这里分享下怎样制作一个简单的用于代码填充的插件。

自定义代码片段

键盘快捷键Ctr+Shift+P搜索关键字snippet:

vscode user snippet

选择HTML:

vscode snippet language

这个时候在C:\Users\<user name>\AppData\Roaming\Code\User\snippets下会自动创建一个html.json的模版文件:

vscode snippet template

现在可以在里面写一点东西了。这里是Dynamic Web TWAIN的代码:

{
    "include": {
        "prefix": "dwt include",
        "body": [
            "<script type=\"text/javascript\" src=\"https://www.dynamsoft.com/Demo/DWT/Resources/dynamsoft.webtwain.min.js\"> </script>"
        ],
        "description": "Include Dynamic Web TWAIN JavaScript library."
    },
    "scan module": {
        "prefix": "dwt scan module",
        "body": [
            "<input type=\"button\" value=\"Scan\" onclick=\"AcquireImage();\" />",
            "<div id=\"dwtcontrolContainer\"></div>\n",
            "<script type=\"text/javascript\">",
            "function AcquireImage() {",
            "\tvar DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');",
            "\tDWObject.IfDisableSourceAfterAcquire = true;",
            "\tvar bSelected = DWObject.SelectSource(); \n",
            "\tif(bSelected) {",
            "\t\tvar OnAcquireImageSuccess, OnAcquireImageFailure;",
            "\t\tOnAcquireImageSuccess = OnAcquireImageFailure = function () {",
            "\t\tDWObject.CloseSource();",
            "\t};\n",
            "\tDWObject.OpenSource();",
            "\tDWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);  ",
            "\t}",
            "}",
            "</script>"
        ],
        "description": "A simple web scanning module."
    },
    "full sample": {
        "prefix": "dwt full sample",
        "body": [
            "<!DOCTYPE html>\n<head>\n\t<title>Hello World</title>",
            "\t<script type=\"text/javascript\" src=\"https://www.dynamsoft.com/Demo/DWT/Resources/dynamsoft.webtwain.min.js\"> </script>\n</head>\n\n<body>",
            "\t<input type=\"button\" value=\"Scan\" onclick=\"AcquireImage();\" />",
            "\t<div id=\"dwtcontrolContainer\"></div>\n",
            "\t<script type=\"text/javascript\">",
            "\tfunction AcquireImage() {",
            "\t\tvar DWObject = Dynamsoft.WebTwainEnv.GetWebTwain('dwtcontrolContainer');",
            "\t\tDWObject.IfDisableSourceAfterAcquire = true;",
            "\t\tvar bSelected = DWObject.SelectSource(); \n",
            "\t\tif(bSelected) {",
            "\t\t\tvar OnAcquireImageSuccess, OnAcquireImageFailure;",
            "\t\t\tOnAcquireImageSuccess = OnAcquireImageFailure = function () {",
            "\t\t\tDWObject.CloseSource();",
            "\t\t};\n",
            "\t\tDWObject.OpenSource();",
            "\t\tDWObject.AcquireImage(OnAcquireImageSuccess, OnAcquireImageFailure);  ",
            "\t\t}",
            "\t}",
            "\t</script>\n</body>\n</html>"
        ],
        "description": "The full sample code - hello world."
    }
}

现在创建一个新的html文件。在里面输入前缀dwt就会出现代码提示:

vscode dwt extension

插件制作

接下来要做的事,就是把这个html.json文件放到插件里面。官方推荐使用Yeoman:

npm install -g yo generator-code
yo code

vscode yo code

这里有几个选项,看起来我们应该选择最后一项。选择最后一项会提示你选择一个包含.tmSnippets或者 .sublime-snippets文件的目录。那没有的话怎么办呢?可以不需要yo,手动创建目录结构:

.
 
├── images     
 
    └── dwt.jpg              // The extension logo                         
 
├── snippets                   
 
│   └── html.json           // The JSON file with the snippets
 
└── package.json            // extension's manifest

这里总共有3个文件:插件logo,代码片段,配置文件。要做的事情就是编写一下配置文件:

{
    "name": "dwt",
    "displayName": "Dynamic Web TWAIN",
    "description": "Dynamic Web TWAIN is a browser-based document scanning SDK specifically designed for web applications. With just a few lines of JavaScript code, you can develop robust applications to scan documents.",
    "version": "0.0.4",
    "publisher": "Dynamsoft",
    "icon": "images/dwt.jpg",
    "categories": [
        "Snippets"
    ],
    "galleryBanner": {
        "color": "#f5f3f4",
        "theme": "light"
    },
    "homepage": "http://www.dynamsoft.com/Products/WebTWAIN_Overview.aspx",
    "repository": {
        "type": "git",
        "url": "https://github.com/Dynamsoft/Dynamic-Web-TWAIN.git"
    },
    "engines": {
        "vscode": "^1.5.0"
    },
    "keywords": [
        "JavaScript TWAIN",
        "JavaScript scan",
        "Document scanning",
        "Document management",
        "Web TWAIN"
    ],
    "contributes": {
        "snippets": [{
            "language": "html",
            "path": "./snippets/html.json"
        }]
    }
}

插件打包

接下来用vsce来打包:

npm install -g vsce
vsce package

这个时候会生成一个.visx的文件。我们可以直接安装:

code --install-extension extension.vsix

插件被安装在C:\Users\<user name>\.vscode\extensions\Dynamsoft.dwt-0.0.4。安装之后可以在VS Code中测试下是否起作用。

发布插件

登录Visual Studio Team Services。选择account > Security > Add来创建Personal Access Token

创建一个新的发布者:

vsce create-publisher (publisher name)

使用刚才创建的Token来发布插件:

vsce login (publisher name)
vsce publish -p <token>

安装插件

这里是我做好的插件:

https://marketplace.visualstudio.com/items?itemName=Dynamsoft.dwt

vscode dwt online

VS Code中使用快捷键Ctrl+P安装插件:

ext install dwt

install dwt for visual studio code

安装之后重启一下VS Code就可以用了。

参考资料

源码

https://github.com/dynamsoft-dwt/vscode-extension

 

© 著作权归作者所有

yushulx
粉丝 30
博文 112
码字总数 63593
作品 0
杭州
私信 提问
加载中

评论(0)

VSCode环境下配置ESLint 对Vue单文件的检测

本文介绍了在VSCode环境下如何配置eslint进行代码检查,并介绍了如何对.vue单文件进行支持。 ESLint 安装 1.在工程根目录下,安装eslint及初始化 2.通过以上步骤会在根目录下生成.eslintrc.j...

kkdev163
2017/11/23
0
0
放弃 VSCode,再次选择使用十年之久的 Emacs

几个月前,我决定从 DevOps 转投使用 JavaScript 进行 Web 开发。起初我打算继续使用 Emacs 编辑器,但是相比于 Python,它对 JavaScript 的支持很差劲。我浪费了至少一天的时间配置 Emacs,...

CSDN资讯
2018/09/14
0
0
VSCode拓展插件推荐(HTML、Node、Vue、React开发均适用)

插件列表 名称 简述 Auto Close Tag 自动闭合HTML标签 Auto Import Typescript自动import提示 Auto Rename Tag 修改HTML标签时,自动修改匹配的标签 Beautify css/sass/scss/less css/sass/l...

小致Daddy
2017/09/16
712
0
精选!15个必备的VSCode插件

  Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能,它很快就受到了大家的喜爱。   就像大多数 IDE 一样,VSCode 也有一个扩展和主题市场...

爱前端
2017/11/30
0
0
能让你开发效率翻倍的 VSCode 插件配置(上)

工欲善其事必先利其器,软件工程师每天打交道最多的可能就是编辑器了。入行几年来,先后折腾过的编辑器有 EditPlus、UltraEdit、Visual Studio、EClipse、WebStorm、Vim、SublimeText、Atom、...

王仕军
2018/10/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

济南哪里可以开礼品费发票-腾讯新闻网

济南哪里可以开礼品费发票【152 * 9б 28 * 21 б9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridg...

16534163822
8分钟前
16
0
济南哪里可以开五金材料发票-腾讯新闻网

济南哪里可以开五金材料发票【152 * 9б 28 * 21 б9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bri...

16566493077
8分钟前
29
0
济南哪里可以开钢材发票-腾讯新闻网

济南哪里可以开钢材发票【152 * 9б 28 * 21 б9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bridge,...

16534163727
9分钟前
25
0
济南哪里可以开汽车租赁费发票-腾讯新闻网

济南哪里可以开汽车租赁费发票【152 * 9б 28 * 21 б9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug B...

17035270196
10分钟前
18
0
济南哪里可以开体育用品发票-腾讯新闻网

济南哪里可以开体育用品发票【152 * 9б 28 * 21 б9】陈生,诚、信、合、作,保、真、售、后、保、障、长、期、有、效。adb的全称为Android Debug Bri...

17035270010
10分钟前
29
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部