v-json-fields-extension

This is a plugin designed for better using and acquiring ability of v-json-fields.

What is v-json-fields? A JSON-scheme-driven, data-reactive fields generating library for Vue.

With the help of v-json-fields-extension, you can acquire :

• Hover information(JSON),
• Completion(JSON),
• Definition(JSON),
• V JSON Export(TS),

ability creating and applying both reusableConfig and reusableBlock in your template.json file.

Requirements

1. For all users(JSON editing)

Requirements: v-json-fields

As an extension for v-json-fields, you need to get v-json-fields work in your project. This extension will help you build your template json better.

2. For advanced users(TS editing)

Requirements: ts-node, tsconfig-paths when using path aliases.

v-json-fields-extension use ts-node to execute TS template. Therefore, you need to add ts-node to devDependencies in your project's package.json. If path aliases are introduced, tsconfig-paths will be needed when executing .ts files.

When using TS helpers to build v-json-fields form template, you can apply Export VJSON in explorer context menu to export .ts template and get serialized .json result. Then you can treat the .json file same as you do using JSON editing and upload to your online server.

Snippets

1. v-crc: Create reusable Config

  "configId": {
    "defaultParameters": {},
    "config": {}
  },

2. v-crb: Create reusable block

  "blockId": {
    "defaultParameters": {},
    "fields": []
  },

3. v-urc: Use reusable config. Press Space to get configId completion.

  "mixinConfigs": [
    {
      "id":|tab|
    }
  ],

4. v-urb: Use reusable block. Press Space to get blockId completion.

  {
    "blockId":|tab|
  },

5. v-uf: Use field

  {
    "fieldType": "fieldType",
    "label": ""
  }