Visual Studio Code不但跨平台，还有良好的扩展性。我们可以在Visual Studio Marketplace上找到各种各样的插件。这里分享下怎样制作一个简单的用于代码填充的插件。
自定义代码片段
键盘快捷键Ctr+Shift+P搜索关键字snippet：
选择HTML：
这个时候在C:\Users\<user name>\AppData\Roaming\Code\User\snippets下会自动创建一个html.json的模版文件：
现在可以在里面写一点东西了。这里是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就会出现代码提示:
插件制作
接下来要做的事，就是把这个html.json文件放到插件里面。官方推荐使用Yeoman:
npm install -g yo generator-code
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
VS Code中使用快捷键Ctrl+P安装插件：
ext install dwt
安装之后重启一下VS Code就可以用了。
参考资料
源码
https://github.com/dynamsoft-dwt/vscode-extension
