vs code中通过设置snippets代码片段快速生成html5，vue模板

按英文的！和h:5都可以快速生成html模板，但是找了半天都找不到如何修改模板设置。只好自己从snippets里重新编写了一个html5的模板，以免自己以后忘了。首先打开 snippets,然后输入以下代码段："h5 sample": {"prefix": "h","body": ["<!DOC

SilenceJude

36749人浏览 · 2018-10-22 15:50:25

SilenceJude · 2018-10-22 15:50:25 发布

一、生成html模板。

Snippets片段在vscode中的的使用方法为：

【文件】——【首选项】——【用户代码片段】——【新建全局用户代码片段】——【输入代码片段的名称】
然后进入代码片段编辑页面，输入上述Snippets，保存后，在对应格式文件中键入关键字后按tab即可。

按英文的！和h:5都可以快速生成html模板，但是找了半天都找不到如何修改模板设置。只好自己从snippets里重新编写了一个html5的模板，以免自己以后忘了。
首先打开 snippets, 在这里插入图片描述
然后输入以下代码段：

  "h5 sample": {
    "prefix": "h",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">\n",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios\">",
      "\t<meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
      "\t<title>Document</title>",
      "\t<link rel=\"stylesheet\" href=\"$1\">",
      "\t<script src=\"$2\"></script>",
      "</head>\n",
      "<body>\n$3",
      "</body>\n",
      "</html>"
    ],
    "description": "The full sample code - html5."
  }

这里的 “prefix”: “h”,指的是你自定义的快捷代码，这里我输入h就会出现快速生成代码提示，也可以自定义其他字段。
在这里插入图片描述

二、生成vue模板

这里同理，我们再创建一个vue的模板。
我就直接放出相关snippets 代码了。

{
	// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
	// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
	// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
	// used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
	// Placeholders with the same ids are connected.
	// Example:
	// "Print to console": {
	// 	"scope": "javascript,typescript",
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"Init vue": {
		"scope": "vue",
		"prefix": "vue",
		"body": [
			"<!-- $1 -->",
			"<template>",
			"\t<div class='$2'>$5</div>",
			"</template>",
			"",
			"<script>",
			"",
			"export default {",
			"\tname: '$3',",
			"\tcomponents: {},",
			"\tdirectives: {},",
			"\tfilters: {},",
			"\tmixins: {},",
			"\tmodel: {},",
			"\tprops: {},",
			"\tdata () {",
			"\t\treturn {",
			"",
			"\t\t}",
			"\t},",
			"\tcomputed: {},",
			"\twatch: {},",
			"\tbeforeCreate () {},",
			"\tcreated () {",
			"",
			"\t},",
			"\tbeforeMount () {},",
			"\tmounted () {",
			"",
			"\t},",
			"\tbeforeUpdate () {},",
			"\tupdated () {},",
			"\tactivated () {},",
			"\tdeactivated () {},",
			"\tbeforeDestroy () {},",
			"\tdestroyed () {},",
			"\t// 方法集合",
			"\tmethods: {",
			"",
			"\t}",
			"}",
			"</script>",
			"<style rel='stylesheet/less' lang='less' scoped>",
			"//@import url($4);",
			"</style>"
		],
		"description": "my vue template"
	}
}

然后找个.vue文件试试，输入vue，然后按tab键即可。
在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^