解放前端生产力,一手打造自己的表单代码生成器

·  阅读 36974

本文目标:手摸手教你打造一个支持内嵌网页的VS Code插件,实现Vue项目前端表单代码的自动生成,早日实现摸鱼自由。

效果展示

废话不多说,先看看最终的工作成果:

image


看完动图是不是提神了那么一丢丢,让我们开干吧~~ 343665c082dccb3918d3210edc2a1882.jpeg

第一步/Step 1

首先,我们需要一款开源拖拽式设计的可视化设计器,GitHub、码云一通搜索,已经有很多成品了,各种form-create、form-design、vue-form、form-generator等等;

其次,从上述设计器中筛选支持代码生成的,当然如果没有代码生成也可以自己实现,毕竟都开源了不是?

我这里选择的是开源的VForm设计器:VForm GitHub
为啥咧?哈哈。。。看着眼熟呗,功能上多那么一丢丢~~ 相信我,点一下上面链接,你还会回来点赞的

第二步/Step 2

安装VS Code插件开发套件:

npm install -g yo generator-code
复制代码

安装成功后,运行yo code生成新的插件项目:

quick-coder-first.png

起个简单又好听的名字——quick-coder(撸码达人),加个简单的说明,其他选项按需选择即可。

来来来,看一下生成的插件项目:

quick-coder-2.png

这里只需要重点关注两个文件:extension.jspackage.json

extension.js,插件扩展点描述文件
package.json,项目属性、依赖包及插件配置文件

第二步工作告一段落,接下来开始第三步插件的编码实现工作。

第三步/Step 3

修改package.json,以增加插件的启动命令,可以从命令面板和左侧资源管理器启动。

"activationEvents": [
    "onCommand:extension.openVFormMaker"
],
"contributes": {
    "commands": [{
        "command": "extension.openVFormMaker",
        "title": "打开VForm设计器"
    }],
    "menus": {
        "explorer/context": [{
            "command": "extension.openVFormMaker",
            "group": "navigation"
        }]
    }
},
复制代码

修改extension.js的插件启用方法,仅一行:

function activate(context) {
    require('./src/vform-loader')(context)
}

复制代码

截止到此时,我们尚未解释整个代码生成器插件是如何工作的,但现在到了不得不说的时候了。
我们希望,当插件启动的时候打开一个WebView面板,WebView面板通过URL配置参数加载VForm网页,当VForm生成代码时与VS Code通过postMessage通讯,VS Code负责将生成代码保存为本地文件。 实现上述需求的关键代码都在vform-loader.js文件中

这里还有两个小问题需要解答:

  1. WebView能直接加载远程网页吗?
    答案是不能,只能加载本地HTML文件。
  1. 那么问题来了?WebView怎么加载远端网页的HTML呢?
    答案也很简单,就是在本地HTML文件内嵌入iframe,iframe万能——YYDS!

解决了上述几个小case,我们来看看整个插件的灵魂代码。

src\view\index.html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=0,maximum-scale=0,user-scalable=yes,shrink-to-fit=no"
    />
    <title>Quick Coder</title>
  </head>

  <body>
    <iframe id="frame" width="100%" height="100%" frameborder="0"></iframe>
    <script>
      window.onload = function () {
        const vscode = acquireVsCodeApi();
        const cmds = {
          setSrc: function (message) {
            var frame = document.getElementById("frame");
            frame.src = message.data.src;
          },
          writeFile: function (message) {
            vscode.postMessage(message);
          },
          openUrl: function (message) {
            vscode.postMessage(message);
          },
          setStorageItem: function (message) {
            vscode.postMessage(message);
          },
        };

        window.addEventListener("message", (event) => {
          const message = event.data;
          if (message && message.cmd) cmds[message.cmd](message);
        });
      };
    </script>
  </body>
</html>

复制代码

src\vform-loader.js

const vscode = require('vscode')
const fs = require('fs')
const path = require('path')
const open = require('open')
const DB_PATH = path.join(__dirname,'./data/db.json')

function getExtensionFileAbsolutePath(context, relativePath) {
    return path.join(context.extensionPath, relativePath)
}

/**
 * 从某个HTML文件读取能被Webview加载的HTML内容
 * @param {*} context 上下文
 * @param {*} templatePath 相对于插件根目录的html文件相对路径
 */
function getWebViewContent(context, templatePath) {
    const resourcePath = getExtensionFileAbsolutePath(context, templatePath)
    const dirPath = path.dirname(resourcePath)
    let html = fs.readFileSync(resourcePath, 'utf-8')
    // vscode不支持直接加载本地资源,需要替换成其专有路径格式,这里只是简单的将样式和JS的路径替换
    html = html.replace(/(<link.+?href="|<script.+?src="|<img.+?src=")(.+?)"/g, (m, $1, $2) => {
        return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"'
    })
    return html
}

const methods = {
    writeFile: function (message, vscode, dirPath) {
        let { fileName, code } = message.data
        let filePath = path.join(dirPath, fileName)
        fs.writeFileSync(filePath, code)
        vscode.window.showInformationMessage(`文件${fileName}创建成功`)
    },
    openUrl: function (message, vscode, dirPath) {
        open(message.data.url)
    },
    setStorageItem: function(message, vscode, dirPath) {
        const { key, val } = message.data
        const str = fs.readFileSync(DB_PATH).toString()
        let json = {}
        if (str) {
            json = JSON.parse(str)
        }
        json[key] = val
        fs.writeFileSync(DB_PATH, JSON.stringify(json))
    },
}

module.exports = function (context) {
    context.subscriptions.push(vscode.commands.registerCommand('extension.openVFormMaker', (uri) => {
        if (uri) {
            let dirPath = uri.fsPath,
                stat = fs.lstatSync(dirPath)
            if (stat.isFile()) dirPath = path.dirname(dirPath)

            let pclintBar = vscode.window.createStatusBarItem()
            pclintBar.text = `目标文件夹:${dirPath}`
            pclintBar.show()

            const panel = vscode.window.createWebviewPanel(
                'vFormMaker',
                "VForm表单设计器",
                vscode.ViewColumn.One,
                {
                    enableScripts: true, // 启用JS,默认禁用
                    retainContextWhenHidden: true, // webview被隐藏时保持状态,避免被重置
                }
            )
            panel.onDidChangeViewState(e => {
                if (panel.visible) {
                    pclintBar.show()
                } else {
                    pclintBar.hide()
                }
            })
            panel.webview.html = getWebViewContent(context, 'src/view/index.html')
            panel.webview.postMessage({
                cmd: 'setSrc',
                data: {
                    src: vscode.workspace.getConfiguration().get('VFormMaker.url') + '&t=' + new Date(),
                    db: JSON.parse(fs.readFileSync(DB_PATH).toString() || '{}')
                }
            })
            panel.webview.onDidReceiveMessage(message => {
                if (message.cmd && message.data) {
                    let method = methods[message.cmd]
                    if (method) method(message, vscode, dirPath)
                } else {
                    vscode.window.showInformationMessage(`没有与消息对应的方法`)
                }
            }, undefined, context.subscriptions)
            panel.onDidDispose(e => {
                pclintBar.dispose()
            })
        } else {
            vscode.window.showInformationMessage(`无法获取文件夹路径`)
        }
    }))
}
复制代码

OK~灰常好,给看到这里的大佬们鼓掌👏👏👏,即将看到插件运行效果!!

最后修改package.json文件的contributes属性,增加一个URL参数配置,完工!!

"contributes": {
    "configuration": {
        "type": "object",
        "title": "VForm设计器配置",
        "properties": {
            "VFormMaker.url": {
                "type": "string",
                "default": "http://120.92.142.115/?vscode=1",
                "description": "VForm设计器远程URL"
            }
        }
    },
    
复制代码

赶紧在VS Code中按下F5键调试插件,欣赏下自己的工作成果😤😤~~~

第四步/打包发布

安装打包工具vsce

npm install -g vsce
复制代码

在插件项目运行vsce package命令,即可生成.vsix文件(会提示修改README.md文件,增加插件的简介及使用说明)

vsce package
复制代码

注册VS marketplace账号,上传.vsix文件,开放给所有VS Code用户使用:
VS marketplace

后话/Finally

简单回顾一下,我们通过WebView嵌入VForm的远端网页,实现了常见的Vue表单前端代码生成(支持Vue2也支持Vue3哦)的预期需求,因为VForm本身是一个开源项目,且有良好的扩展性,有心的大佬们可以自由扩展VForm的功能,进一步实现el-table等更多组件的前端代码自动生成,早日实现摸鱼自由🍺🍺🍺

最后的最后

觉得自己写插件有点小累的大佬们,可以直接在VS Code扩展中搜索vform-makervformAdmin

最后,再附上全球最大同性交友网的VForm链接:GitHub
国内同步码云:Gitee

整个quick-coder插件项目源码已推送,需要的大佬们自取(记得顺手给个Star哟):GitHub

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改