Uniapp configuration element UI code block

open HbuildX, Tools , Code block settings ,vue Code block

Write in the custom code block on the right

You can log in. element-ui Select the custom code block you need in the component guide , Here I will give some common components sorted out by myself ：

{
    
    //  Be careful ： This document only supports single line comments , also '//' Cannot have any non empty characters before ！！！
    //
    // HBuilderX Use json Extended code block , compatible vscode Code block format for 
    //  This document has been modified , Save to take effect , No need to restart .
    //  This document is used for user customization {1} Code block .
    //  The description of each configuration item is as follows ：
    // 'key' ： Code block display name , The name displayed in the code assistant list , In the following example 'console.log' It's just one. key.
    // 'prefix' ： Trigger character of code block , Just type what letter matches this code block .
    // 'body' ： The contents of the code block . The content has the following special format 
    // $1  Indicates the position of the cursor after the code block is entered . If you need more than one cursor , Configure in multiple places $1, If there is preset data in this position , It is written as ${1:foo1}. Multiple options, i.e. drop-down candidate list, are used ${1:foo1/foo2/foo3}
    // $2  Indicates that after entering the code block, press... Again tab The switching position of the rear cursor tabstops（ After the code block is expanded, press tab You can jump to the next tabstop）
    // $0 Represents the position of the final cursor after code block input （ You can also press enter to jump directly ）.
    //  Use double quotation marks \\' escape 
    //  Line breaks use multiple arrays to represent , One array per row , Enclose... In double quotation marks , Separated by a comma 
    //  Indenting requires \\t Express , You cannot enter indents directly ！
    // 'triggerAssist' ： by true Indicates that the code block is entered into the document immediately after the first tabstop Trigger code prompt on , Pull out the code assistant , The default is false.
    //  Each code block is represented by key Primary key , Multiple code blocks need to be separated by commas .
    //  If json The grammar is illegal , An error message will pop up at the bottom , Please pay attention to the correction .
    //  Example :
    // "console.log": {
    
    // "prefix": "logtwo",
    // "body": [
    // "console.log('$1');",
    // "\tconsole.log('$2');"
    // ],
    // "triggerAssist": false,
    // "description": "Log output to console twice"
    // }
	
	// element-ui Code hinting 
	"eRowCol": {
    
	    "body": [
		"<el-row :gutter=\"20\">",
		  "\t<el-col :span=\"12\">$1</el-col>",
		  "\t<el-col :span=\"12\">$1</el-col>",
		"</el-row>"

	    ],
	    "prefix": "erowcol",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eCard": {
    
	    "body": [
		"<el-card class=\"box-card\">",
		  "\t<div slot=\"header\" class=\"clearfix\">",
			"\t\t<span> Card name </span>",
			"\t\t<el-button style=\"float: right; padding: 3px 0\" type=\"text\"> Operate the button </el-button>",
		  "\t</div>",
		  "\t<div class=\"text item\">$1</div>",
		"</el-card>"
	    ],
	    "prefix": "ecard",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eInput": {
    
	    "body": [
		"<el-input v-model=\"$1\"></el-input>"
	    ],
	    "prefix": "einput",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eSelect": {
    
	    "body": [
		"<el-select v-model=\"form.region\" placeholder=\" Please select the activity area \">",
		  "\t<el-option label=\" Zone one \" value=\"shanghai\"></el-option>",
		  "\t<el-option label=\" Area two \" value=\"beijing\"></el-option>",
		"</el-select>"
	    ],
	    "prefix": "eselect",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eDatePicker": {
    
	    "body": [
		"<el-date-picker type=\"date\" placeholder=\" Select date \" v-model=\"form.date1\" style=\"width: 100%;\"></el-date-picker>"
	    ],
	    "prefix": "edatepicker",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eSwitch": {
    
	    "body": [
		"<el-switch v-model=\"form.delivery\"></el-switch>"
	    ],
	    "prefix": "eswitch",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eCheckboxGroup": {
    
	    "body": [
		"<el-checkbox-group v-model=\"form.type\">",
		  "\t<el-checkbox label=\" food / Restaurant online activities \" name=\"type\"></el-checkbox>",
		  "\t<el-checkbox label=\" Earth pushing activity \" name=\"type\"></el-checkbox>",
		"</el-checkbox-group>"
	    ],
	    "prefix": "echeckboxgroup",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eRadioGroup": {
    
	    "body": [
		"<el-radio-group v-model=\"form.resource\">",
		  "\t<el-radio label=\" Online brands sponsor \"></el-radio>",
		  "\t<el-radio label=\" Offline venues are free \"></el-radio>",
		"</el-radio-group>"
	    ],
	    "prefix": "eradiogroup",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eButton": {
    
	    "body": [
		"<el-button type=\"primary\" @click=\"onSubmit\"> Create... Now </el-button>"
	    ],
	    "prefix": "ebutton",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eForm": {
    
	    "body": [
		"<el-form ref=\"form\" :model=\"form\" label-width=\"80px\">",
		  "\t<el-form-item label=\"label\">",
			"\t\t$1",
		  "\t</el-form-item>",
		"</el-form>"
	    ],
	    "prefix": "efrom",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eFormItem": {
    
	    "body": [
		  "<el-form-item label=\"label\">",
			"\t$1",
		  "</el-form-item>"
	    ],
	    "prefix": "efromitem",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eDialog": {
    
	    "body": [
"<el-dialog title=\" title \" :visible.sync=\"createModel\">",
  "\t$1",
  "\t<div slot=\"footer\" class=\"dialog-footer\">",
	"\t\t<el-button @click=\"createModel = false\"> take   eliminate </el-button>",
	"\t\t<el-button type=\"primary\" @click=\"createModel = false\"> indeed   set </el-button>",
  "\t</div>",
"</el-dialog>"
	    ],
	    "prefix": "edialog",
	    "scope": "source.vue.html",
		"triggerAssist":true
	},
	"eLink": {
    
	    "body": [
	        "<el-link type=\"primary\" href=\"#\">$1</el-link>"
	    ],
	    "prefix": "elink",
	    "scope": "source.vue.html"
	},
	
	
	"eRow": {
    
	    "body": [
	"<el-row :gutter=\"20\">",
	  "\t<el-col :span=\"6\">$1</el-col>",
	  "\t<el-col :span=\"6\">$2</el-col>",
	  "\t<el-col :span=\"6\">$3</el-col>",
	  "\t<el-col :span=\"6\">$4</el-col>",
	"</el-row>"
	    ],
	    "prefix": "erow",
	    "scope": "source.vue.html"
	}
}