likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 58

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

效果展示

废话不多说，先看看最终的工作成果：

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

看完动图是不是提神了那么一丢丢，让我们开干吧~~ 解放前端生产力，一手打造自己的表单代码生成器

第一步/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（撸码达人），加个简单的说明，其他选项按需选择即可。

来来来，看一下生成的插件项目：

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

这里只需要重点关注两个文件：extension.js、package.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-maker或vformAdmin

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

整个quick-coder插件项目源码已推送，需要的大佬们自取（记得顺手给个Star哟）：GitHub

转载自:https://juejin.cn/post/7012191923435733029
评论
请登录