VSCode插件製做：HTML代碼自動填充

時間 2019-11-11

標籤 vscode 插件製做 html 代碼自動填充欄目 HTML 简体版

原文原文鏈接

Visual Studio Code不但跨平臺，還有良好的擴展性。咱們能夠在Visual Studio Marketplace上找到各類各樣的插件。這裏分享下怎樣製做一個簡單的用於代碼填充的插件。javascript

自定義代碼片斷

鍵盤快捷鍵Ctr+Shift+P搜索關鍵字snippet：html

選擇HTML：java

這個時候在C:\Users\<user name>\AppData\Roaming\Code\User\snippets下會自動建立一個html.json的模版文件：git

如今能夠在裏面寫一點東西了。這裏是Dynamic Web TWAIN的代碼：github

{
    "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就會出現代碼提示:web

插件製做

接下來要作的事，就是把這個html.json文件放到插件裏面。官方推薦使用Yeoman:npm

npm install -g yo generator-code
yo code

這裏有幾個選項，看起來咱們應該選擇最後一項。選擇最後一項會提示你選擇一個包含.tmSnippets或者 .sublime-snippets文件的目錄。那沒有的話怎麼辦呢？能夠不須要yo，手動建立目錄結構：json

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

這裏總共有3個文件：插件logo，代碼片斷，配置文件。要作的事情就是編寫一下配置文件：bash

{
    "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來打包：app

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。