Visual Studio Code – a source code editor for Windows, Linux and macOS released by Microsoft – is getting more extensible and customizable. It is interesting to build an extension yourself. In this article, I will share how to create a simple HTML snippet extension for VS Code.
Snippet for Visual Studio Code
Press Ctr+Shift+P to search for ‘snippet’:
Then select HTML as the programming language:
A file html.json will be generated under C:\Users\<user name>\AppData\Roaming\Code\User\snippets:
Let’s write something. Here is the code snippet of 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."
}
}
After saving the file, create an HTML file and use the prefix dwt to list the code snippets:
Extension for Visual Studio Code
To distribute your code snippet to other developers, you can package it into an extension. Then publish it to the Visual Studio Marketplace.
Yo Code – Extension Generator
To get started with a new extension, you can use Yeoman:
npm install -g yo generator-code yo code
Should we use the option New Code Snippets? The option lets you point to a folder containing .tmSnippets or .sublime-snippets files. If you don’t have these files, you can manually create the folders and files as follows:
. ├── images └── dwt.jpg // The extension logo ├── snippets │ └── html.json // The JSON file with the snippets └── package.json // extension's manifest
What’s in the manifest file?
{
"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"
}]
}
}
VISX File
Package the extension into a .vsix file with vsce:
npm install -g vsce vsce package
Before publishing the extension, we can manually install the .vsix file for test:
code --install-extension extension.vsix
The extension will be install under C:\Users\<user name>\.vscode\extensions\Dynamsoft.dwt-0.0.4.
How to Publish Extension to Marketplace
Create a new Personal Access Token: log in to Visual Studio Team Services account > Security > Add.
Create a new publisher:
vsce create-publisher (publisher name)
Log in to a publisher and publish the extension to Marketplace:
vsce login (publisher name) vsce publish -p <token>
Extension Installation
After successfully publishing the extension, you can instantly find it in the Marketplace. Here is the extension with Dynamic Web TWAIN code snippets:
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter:
ext install dwt
Re-launch VS Code to make the extension work.
References
Source Code
https://github.com/dynamsoft-dwt/vscode-extension
The post HTML Snippet Extension for Visual Studio Code appeared first on Code Pool.