├── src ├── data │ └── db.json ├── view │ └── index.html └── vform-loader.js ├── .gitignore ├── .vscodeignore ├── .vscode ├── extensions.json └── launch.json ├── jsconfig.json ├── CHANGELOG.md ├── test ├── suite │ ├── extension.test.js │ └── index.js └── runTest.js ├── .eslintrc.json ├── extension.js ├── README.md ├── package.json └── vsc-extension-quickstart.md /src/data/db.json: -------------------------------------------------------------------------------- 1 | {} -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .vscode-test/ 3 | *.vsix 4 | -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | .vscode/** 2 | .vscode-test/** 3 | test/** 4 | .gitignore 5 | .yarnrc 6 | vsc-extension-quickstart.md 7 | **/jsconfig.json 8 | **/*.map 9 | **/.eslintrc.json 10 | -------------------------------------------------------------------------------- /.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | // See https://go.microsoft.com/fwlink/?LinkId=733558 3 | // for the documentation about the extensions.json format 4 | "recommendations": [ 5 | "dbaeumer.vscode-eslint" 6 | ] 7 | } -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "commonjs", 4 | "target": "es6", 5 | "checkJs": false, /* Typecheck .js files. */ 6 | "lib": [ 7 | "es6" 8 | ] 9 | }, 10 | "exclude": [ 11 | "node_modules" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Change Log 2 | 3 | All notable changes to the "quick-coder" extension will be documented in this file. 4 | 5 | Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how to structure this file. 6 | 7 | ## [Unreleased] 8 | 9 | - Initial release -------------------------------------------------------------------------------- /test/suite/extension.test.js: -------------------------------------------------------------------------------- 1 | const assert = require('assert'); 2 | 3 | // You can import and use all API from the 'vscode' module 4 | // as well as import your extension to test it 5 | const vscode = require('vscode'); 6 | // const myExtension = require('../extension'); 7 | 8 | suite('Extension Test Suite', () => { 9 | vscode.window.showInformationMessage('Start all tests.'); 10 | 11 | test('Sample test', () => { 12 | assert.strictEqual(-1, [1, 2, 3].indexOf(5)); 13 | assert.strictEqual(-1, [1, 2, 3].indexOf(0)); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": false, 4 | "commonjs": true, 5 | "es6": true, 6 | "node": true, 7 | "mocha": true 8 | }, 9 | "parserOptions": { 10 | "ecmaVersion": 2018, 11 | "ecmaFeatures": { 12 | "jsx": true 13 | }, 14 | "sourceType": "module" 15 | }, 16 | "rules": { 17 | "no-const-assign": "warn", 18 | "no-this-before-super": "warn", 19 | "no-undef": "warn", 20 | "no-unreachable": "warn", 21 | "no-unused-vars": "warn", 22 | "constructor-super": "warn", 23 | "valid-typeof": "warn" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /extension.js: -------------------------------------------------------------------------------- 1 | // The module 'vscode' contains the VS Code extensibility API 2 | // Import the module and reference it with the alias vscode in your code below 3 | const vscode = require('vscode'); 4 | 5 | // this method is called when your extension is activated 6 | // your extension is activated the very first time the command is executed 7 | 8 | /** 9 | * @param {vscode.ExtensionContext} context 10 | */ 11 | function activate(context) { 12 | require('./src/vform-loader')(context) 13 | } 14 | 15 | // this method is called when your extension is deactivated 16 | function deactivate() {} 17 | 18 | module.exports = { 19 | activate, 20 | deactivate 21 | } 22 | -------------------------------------------------------------------------------- /test/runTest.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | const { runTests } = require('vscode-test'); 4 | 5 | async function main() { 6 | try { 7 | // The folder containing the Extension Manifest package.json 8 | // Passed to `--extensionDevelopmentPath` 9 | const extensionDevelopmentPath = path.resolve(__dirname, '../'); 10 | 11 | // The path to the extension test script 12 | // Passed to --extensionTestsPath 13 | const extensionTestsPath = path.resolve(__dirname, './suite/index'); 14 | 15 | // Download VS Code, unzip it and run the integration test 16 | await runTests({ extensionDevelopmentPath, extensionTestsPath }); 17 | } catch (err) { 18 | console.error('Failed to run tests'); 19 | process.exit(1); 20 | } 21 | } 22 | 23 | main(); 24 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | // A launch configuration that launches the extension inside a new window 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | { 6 | "version": "0.2.0", 7 | "configurations": [ 8 | { 9 | "name": "Run Extension", 10 | "type": "extensionHost", 11 | "request": "launch", 12 | "args": [ 13 | "--extensionDevelopmentPath=${workspaceFolder}" 14 | ] 15 | }, 16 | { 17 | "name": "Extension Tests", 18 | "type": "extensionHost", 19 | "request": "launch", 20 | "args": [ 21 | "--extensionDevelopmentPath=${workspaceFolder}", 22 | "--extensionTestsPath=${workspaceFolder}/test/suite/index" 23 | ] 24 | } 25 | ] 26 | } 27 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # quick-coder README 2 | 3 | ##### A sample project template for VS Code plugin. 4 | 5 | 一个简单的VS Code插件模板工程，支持WebView加载远程网页。 6 | 7 | **Enjoy!** 8 | 9 | 10 | ### VForm资源链接 11 |
12 | 13 | ##### VForm，一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。 14 | 15 | 文档官网：http://www.vform666.com/ 16 | 17 | 在线演示：http://demo.vform666.com/ 18 | 19 | VS Code插件：http://www.vform666.com/pages/plugin/ 20 | 21 | Github仓库：https://github.com/vform666/variant-form 22 | 23 | Gitee备份仓库：https://gitee.com/vdpadmin/variant-form 24 | 25 | 技术交流群：微信搜索“vformAdmin”，或者扫如下二维码加群 26 | 27 | ![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vx-qrcode-242.png) -------------------------------------------------------------------------------- /test/suite/index.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const Mocha = require('mocha'); 3 | const glob = require('glob'); 4 | 5 | function run() { 6 | // Create the mocha test 7 | const mocha = new Mocha({ 8 | ui: 'tdd', 9 | color: true 10 | }); 11 | 12 | const testsRoot = path.resolve(__dirname, '..'); 13 | 14 | return new Promise((c, e) => { 15 | glob('**/**.test.js', { cwd: testsRoot }, (err, files) => { 16 | if (err) { 17 | return e(err); 18 | } 19 | 20 | // Add files to the test suite 21 | files.forEach(f => mocha.addFile(path.resolve(testsRoot, f))); 22 | 23 | try { 24 | // Run the mocha test 25 | mocha.run(failures => { 26 | if (failures > 0) { 27 | e(new Error(`${failures} tests failed.`)); 28 | } else { 29 | c(); 30 | } 31 | }); 32 | } catch (err) { 33 | console.error(err); 34 | e(err); 35 | } 36 | }); 37 | }); 38 | } 39 | 40 | module.exports = { 41 | run 42 | }; 43 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quick-coder", 3 | "displayName": "quick-coder", 4 | "description": "A powerful code generator for Vue", 5 | "version": "0.0.2", 6 | "engines": { 7 | "vscode": "^1.0.0" 8 | }, 9 | "categories": [ 10 | "Other" 11 | ], 12 | "author": { 13 | "name": "vformAdmin" 14 | }, 15 | "publisher": "vformAdmin", 16 | "homepage": "http://www.vform666.com", 17 | "repository": { 18 | "type": "git", 19 | "url": "https://github.com/vform666/quick-coder" 20 | }, 21 | "activationEvents": [ 22 | "onCommand:extension.openVFormMaker" 23 | ], 24 | "main": "./extension.js", 25 | "contributes": { 26 | "configuration": { 27 | "type": "object", 28 | "title": "VForm设计器配置", 29 | "properties": { 30 | "VFormMaker.url": { 31 | "type": "string", 32 | "default": "http://120.92.142.115/?vscode=1", 33 | "description": "VForm设计器远程URL" 34 | } 35 | } 36 | }, 37 | "commands": [ 38 | { 39 | "command": "extension.openVFormMaker", 40 | "title": "打开VForm设计器" 41 | } 42 | ], 43 | "menus": { 44 | "explorer/context": [ 45 | { 46 | "command": "extension.openVFormMaker", 47 | "group": "navigation" 48 | } 49 | ] 50 | } 51 | }, 52 | "scripts": { 53 | "lint": "eslint .", 54 | "pretest": "npm run lint", 55 | "test": "node ./test/runTest.js" 56 | }, 57 | "devDependencies": { 58 | "@types/vscode": "^1.0.0", 59 | "@types/glob": "^7.1.3", 60 | "@types/mocha": "^8.2.2", 61 | "@types/node": "14.x", 62 | "eslint": "^7.27.0", 63 | "glob": "^7.1.7", 64 | "mocha": "^8.4.0", 65 | "typescript": "^4.3.2", 66 | "vscode-test": "^1.5.2" 67 | }, 68 | "dependencies": { 69 | "open": "^8.2.1" 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /vsc-extension-quickstart.md: -------------------------------------------------------------------------------- 1 | # Welcome to your VS Code Extension 2 | 3 | ## What's in the folder 4 | 5 | * This folder contains all of the files necessary for your extension. 6 | * `package.json` - this is the manifest file in which you declare your extension and command. 7 | * The sample plugin registers a command and defines its title and command name. With this information VS Code can show the command in the command palette. It doesn’t yet need to load the plugin. 8 | * `extension.js` - this is the main file where you will provide the implementation of your command. 9 | * The file exports one function, `activate`, which is called the very first time your extension is activated (in this case by executing the command). Inside the `activate` function we call `registerCommand`. 10 | * We pass the function containing the implementation of the command as the second parameter to `registerCommand`. 11 | 12 | ## Get up and running straight away 13 | 14 | * Press `F5` to open a new window with your extension loaded. 15 | * Run your command from the command palette by pressing (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and typing `Hello World`. 16 | * Set breakpoints in your code inside `extension.js` to debug your extension. 17 | * Find output from your extension in the debug console. 18 | 19 | ## Make changes 20 | 21 | * You can relaunch the extension from the debug toolbar after changing code in `extension.js`. 22 | * You can also reload (`Ctrl+R` or `Cmd+R` on Mac) the VS Code window with your extension to load your changes. 23 | 24 | ## Explore the API 25 | 26 | * You can open the full set of our API when you open the file `node_modules/@types/vscode/index.d.ts`. 27 | 28 | ## Run tests 29 | 30 | * Open the debug viewlet (`Ctrl+Shift+D` or `Cmd+Shift+D` on Mac) and from the launch configuration dropdown pick `Extension Tests`. 31 | * Press `F5` to run the tests in a new window with your extension loaded. 32 | * See the output of the test result in the debug console. 33 | * Make changes to `src/test/suite/extension.test.js` or create new test files inside the `test/suite` folder. 34 | * The provided test runner will only consider files matching the name pattern `**.test.ts`. 35 | * You can create folders inside the `test` folder to structure your tests any way you want. 36 | ## Go further 37 | 38 | * [Publish your extension](https://code.visualstudio.com/api/working-with-extensions/publishing-extension) on the VSCode extension marketplace. 39 | * Automate builds by setting up [Continuous Integration](https://code.visualstudio.com/api/working-with-extensions/continuous-integration). 40 | -------------------------------------------------------------------------------- /src/view/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | Quick Coder 10 | 24 | 94 | 95 | 96 | 97 | 101 | 102 | 131 | 132 | 133 | -------------------------------------------------------------------------------- /src/vform-loader.js: -------------------------------------------------------------------------------- 1 | const vscode = require('vscode') 2 | const fs = require('fs') 3 | const path = require('path') 4 | const open = require('open') 5 | const DB_PATH = path.join(__dirname,'./data/db.json') 6 | 7 | function getExtensionFileAbsolutePath(context, relativePath) { 8 | return path.join(context.extensionPath, relativePath) 9 | } 10 | 11 | /** 12 | * 从某个HTML文件读取能被Webview加载的HTML内容 13 | * @param {*} context 上下文 14 | * @param {*} templatePath 相对于插件根目录的html文件相对路径 15 | */ 16 | function getWebViewContent(context, templatePath) { 17 | const resourcePath = getExtensionFileAbsolutePath(context, templatePath) 18 | const dirPath = path.dirname(resourcePath) 19 | let html = fs.readFileSync(resourcePath, 'utf-8') 20 | // vscode不支持直接加载本地资源，需要替换成其专有路径格式，这里只是简单的将样式和JS的路径替换 21 | html = html.replace(/( { 22 | return $1 + vscode.Uri.file(path.resolve(dirPath, $2)).with({ scheme: 'vscode-resource' }).toString() + '"' 23 | }) 24 | return html 25 | } 26 | 27 | const methods = { 28 | writeFile: function (message, vscode, dirPath) { 29 | let { fileName, code } = message.data 30 | let filePath = path.join(dirPath, fileName) 31 | fs.writeFileSync(filePath, code) 32 | vscode.window.showInformationMessage(`文件${fileName}创建成功`) 33 | }, 34 | openUrl: function (message, vscode, dirPath) { 35 | //vscode.window.showInformationMessage(message.data.url) 36 | open(message.data.url) 37 | }, 38 | setStorageItem: function(message, vscode, dirPath) { 39 | const { key, val } = message.data 40 | const str = fs.readFileSync(DB_PATH).toString() 41 | let json = {} 42 | if (str) { 43 | json = JSON.parse(str) 44 | } 45 | json[key] = val 46 | fs.writeFileSync(DB_PATH, JSON.stringify(json)) 47 | }, 48 | } 49 | 50 | module.exports = function (context) { 51 | context.subscriptions.push(vscode.commands.registerCommand('extension.openVFormMaker', (uri) => { 52 | if (uri) { 53 | let dirPath = uri.fsPath, 54 | stat = fs.lstatSync(dirPath) 55 | if (stat.isFile()) dirPath = path.dirname(dirPath) 56 | 57 | let pclintBar = vscode.window.createStatusBarItem() 58 | pclintBar.text = `目标文件夹：${dirPath}` 59 | pclintBar.show() 60 | 61 | const panel = vscode.window.createWebviewPanel( 62 | 'vFormMaker', 63 | "VForm表单设计器", 64 | vscode.ViewColumn.One, 65 | { 66 | enableScripts: true, // 启用JS，默认禁用 67 | retainContextWhenHidden: true, // webview被隐藏时保持状态，避免被重置 68 | } 69 | ) 70 | panel.onDidChangeViewState(e => { 71 | if (panel.visible) { 72 | pclintBar.show() 73 | } else { 74 | pclintBar.hide() 75 | } 76 | }) 77 | panel.webview.html = getWebViewContent(context, 'src/view/index.html') 78 | panel.webview.postMessage({ 79 | cmd: 'setSrc', 80 | data: { 81 | src: vscode.workspace.getConfiguration().get('VFormMaker.url') + '&t=' + new Date(), 82 | db: JSON.parse(fs.readFileSync(DB_PATH).toString() || '{}') 83 | } 84 | }) 85 | panel.webview.onDidReceiveMessage(message => { 86 | if (message.cmd && message.data) { 87 | //vscode.window.showInformationMessage(message.cmd) 88 | 89 | let method = methods[message.cmd] 90 | if (method) method(message, vscode, dirPath) 91 | } else { 92 | vscode.window.showInformationMessage(`没有与消息对应的方法`) 93 | } 94 | }, undefined, context.subscriptions) 95 | panel.onDidDispose(e => { 96 | pclintBar.dispose() 97 | }) 98 | } else { 99 | vscode.window.showInformationMessage(`无法获取文件夹路径`) 100 | } 101 | })) 102 | } --------------------------------------------------------------------------------