Vscode Plug-in production: HTML code automatically populated __html

Visual Studio code not only spans the platform, but also has good scalability. We can find a variety of plug-ins on the visual Studio marketplace. Here to share how to make a simple plug-in for code filling. Customizing Code Snippets

Keyboard shortcuts ctr+shift+p search keyword snippet:

Select HTML:

This is the time to automatically create a html.json template file under c:\users\<user name>\appdata\roaming\code\user\snippets :

Now you can write something in it. Here is the code for 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> "]," descr
    Iption ":" Include Dynamic Web TWAIN JavaScript Library. }, "Scan module": {"prefix": "DWT scan module", "Body": ["<input type=\" button\ "Valu"]
            E=\ "scan\" onclick=\ "acquireimage ();"/> "," <div id=\ "Dwtcontrolcontainer\" ></div>\n ", "<script type=\" text/javascript\ ">", "function Acquireimage () {", "\tvar dwobject = Dyn Amsoft.
            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 Scann ing module. "}," full sample ": {" prefix ":" The DWT full sample "," The Body ": [" <! DOCTYPE Html>\n 
Now create a new HTML file. Enter the prefix inside the dwt will appear code hints:

Plug-in production

The next thing to do is to put the Html.json file into the plugin. Official recommended use of Yeoman:

npm install-g yo generator-code
yo Code
 

Here are a few options, and it looks like we should choose the last one. Selecting the last item prompts you to select a directory that contains either. tmsnippets or. sublime-snippets files. What if it's not? You can manually create the directory structure without yo

.
 
├──images     
 
    └──dwt.jpg              //The extension logo                         
 
├──snippets                   
 
│   └──html.json           //The JSON file with th E Snippets
 
└──package.json            //extension ' s manifest
 
There are a total of 3 files: Plug-in logo, code snippets, configuration files. The thing to do is to write the configuration file:

{"Name": "DWT", "displayName": "Dynamic Web Twain", "description": "Dynamic Web Twain is a browser-based docu ment scanning SDK specifically designed for Web applications. 
    With just a few lines's JavaScript code, can develop robust applications to scan documents, "version": "0.0.4", "publisher": "Dynamsoft", "icon": "Images/dwt.jpg", "categories": ["Snippets"], "Galleryban Ner ": {" color ":" #f5f3f4 "," theme ":" Light "}," homepage ":" Http://www.dynamsoft.com/Products/Web Twain_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"], "contribute S ': {"snippets": [{"Language": "HTML", "path": "./Snippets/html.json "}]}} 
 
Plug-in Packaging 
Next, use VSCE to pack:

NPM install-g vsce
VSCE Package
 
This time, a. visx file is generated. We can install directly:

Code--install-extension Extension.vsix
 
The plugin is installed in c:\users\<user name>\.vscode\extensions\dynamsoft.dwt-0.0.4. After installation, it can be tested in VS code to see if it works. Publishing Plug-ins

Log on to Visual Studio team Services. Select Account > Security > Add to create Personal Access Token.

To create a new publisher:

Vsce Create-publisher (publisher name)
 
Use the token you just created to publish your plug-in:

VSCE Login (publisher name)
Vsce publish-p <token>
 
Installing Plug-ins 
Here is the plugin I do well:

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


In VS code, use the shortcut key ctrl+p to install the plugin:

Ext Install DWT
 

After installation, restart the VS code to be used. reference materials Adding Snippets to Visual Studio code vsce–publishing Tool Reference Installing Extensions source code

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