HTML Snippet Extension for Visual Studio Code

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’:

vscode user snippet

Then select HTML as the programming language:

vscode snippet language

A file html.json will be generated under C:\Users\<user name>\AppData\Roaming\Code\User\snippets:

vscode snippet template

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:

vscode dwt extension

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

vscode 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:vscode dwt online

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter:

ext install dwt

install dwt for visual studio code

Re-launch VS Code to make the extension work.

References

Source Code

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