vscode用户代码片段

设置常用vscode快捷键–用户代码片段
文件=>首选项=>用户片段=>新建或找到对应的html文件

{
	// ---------------------------js
	"scr": {
	  "prefix": "scr",
	  "body": [
		"<script type=\"text/javascript\" >",
		"$0",
		"</script>"
	  ],
	  "description": "<script type=\"text/javascript\"></script>"
	},
	"scr1": {
	  "prefix": "scr1",
	  "body": [
		"<script type=\"text/javascript\" src=\"$0\"></script>"
	  ],
	  "description": "<script type=\"text/javascript\" src=\"\"></script>"
	},
	"scrb": {
	  "prefix": "scrb",
	  "body": [
		"<script type=\"text/babel\">$0</script>"
	  ],
	  "description": "<script type=\"text/babel\" src=\"\"></script>"
	},
	"csl": {
	  // 当前选中的文字或者空字符串
	  "prefix": "$TM_SELECTED_TEXT.log",
	  "body": [
		"console.log($TM_SELECTED_TEXT$0);"
	  ],
	  "description": "console.log()"
	},
	"df": {
	  "prefix": "df",
	  "body": [
		"($0)=>{",
		"  //函数体",
		"}"
	  ],
	  "description": "箭头函数"
	},
	"dfi": {
	  "prefix": "dfi",
	  "body": [
		"($0)=>{}"
	  ],
	  "description": "单箭头函数"
	},
	"dfa": {
	  "prefix": "dfa",
	  "body": [
		"($0)=>{}",
		"()=>{}"
	  ],
	  "description": "双箭头函数"
	},
	"f1": {
	  "prefix": "f1",
	  "body": [
		"for (var i=0; i<xxxxxxx.length; i++ ){",
		"  //content",
		"}"
	  ],
	  "description": "for循环1"
	},
	"f2": {
	  "prefix": "f2",
	  "body": [
		"for (var j=0; j<xxxxxxx.length; j++ ){",
		"  //content",
		"}"
	  ],
	  "description": "for循环2"
	},
	"fori": {
	  "prefix": "fori",
	  "body": [
		"for (let index in arr){",
		"  console.log(arr[index])",
		"}"
	  ],
	  "description": "for-in循环"
	},
	"did": {
	  "prefix": "did",
	  "body": [
		"document.getElementById('$0')"
	  ],
	  "description": "document.getElementById"
	},
	"dq": {
	  "prefix": "dq",
	  "body": [
		"document.querySelector('$0')"
	  ],
	  "description": "document.querySelector"
	},
	"dqa": {
	  "prefix": "dqa",
	  "body": [
		"document.querySelectorAll('$0')"
	  ],
	  "description": "document.querySelectorAll"
	},
	"dtag": {
	  "prefix": "dtag",
	  "body": [
		"document.getElementsByTagName('$0')"
	  ],
	  "description": "document.getElementsByTagName"
	},
	"jw": {
	  "prefix": "jw",
	  "body": [
		"javascript:;"
	  ],
	  "description": "javascript:;"
	},
	"async-function-common": {
	  "prefix": "Async Function Common  Style",
	  "body": [
		"async function ${1:name} () {",
		"$2",
		"}",
	  ],
	  "description": "普通Async函数",
	},
	"async-function-arrow": {
	  "prefix": "Async Function Arrow Style",
	  "body": [
		"const ${1:FuncName} = async () => {",
		"$2",
		"};"
	  ],
	  "description": "箭头Async函数",
	},
	"array-from": {
	  "prefix": "Array From Object Array",
	  "body": "const values = Array.from(${2:array}, ({ ${1:key} }) => ${1:key});",
	  "description": "从二维数组中获取一维数组",
	},
	"array-map": {
	  "prefix": "Array Map Function",
	  "body": "${1:array}.map((item, index) => {$2})",
	  "description": "数组的map方法",
	},
	"array-forEach": {
	  "prefix": "Array ForEach Function",
	  "body": "${1:array}.forEach(item => {\n\tconst _item = item;\n})",
	  "description": "数组的forEach方法",
	},
	"request-get": {
	  "prefix": "Request GET Method",
	  "body": [
		"// Todo",
		"export async function ${1:funcName}() {",
		"\treturn request(`${${2:Api}}`);",
		"}",
	  ],
	  "description": "Get 方法请求",
	},
	"request-post": {
	  "prefix": "Request POST Method",
	  "body": [
		"// Todo",
		"export async function ${1:funcName}(params) {",
		"\treturn request(`${${2:Api}}`, {",
		"\t\tmethod: 'POST',",
		"\t\tbody: {",
		"\t\t\t...params",
		"\t\t}",
		"\t})",
		"}",
	  ],
	  "description": "Post 方法请求",
	},
	// ----------------------正则校验
	"validate Phone": {
	  "prefix": "vPhone",
	  "body": "var reg = /^[1][3,4,5,7,8][0-9]{9}$/",
	  "description": "正则验证手机格式"
	},
	"validate Mail": {
	  "prefix": "vMail",
	  "body": "var reg = /^[1][3,4,5,7,8][0-9]{9}$/",
	  "description": "正则验证邮箱格式"
	},
	"validate Telephone": {
	  "prefix": "vTel",
	  "body": "var reg = /^0\d{2,3}-?\d{7,8}$/",
	  "description": "正则验证固定电话"
	},
	"validate Password": {
	  "prefix": "vPassword",
	  "body": "var reg = /(?!^(\d+|[a-zA-Z]+|[~!@#$%^&*?]+)$)^[\w~!@#$%^&*?]+$/",
	  "description": "正则验证密码，必须大小写英文，可带特殊字符"
	},
	// ---------------------react
	"CreateReactComponent": {
	  "prefix": "MyComponent",
	  "body": [
		"import React,{Component} from 'react'\n",
		"export default class MyComponent$1 extends Component{",
		"  render(){",
		"    return (",
		"      <div></div>",
		"    )",
		"  }",
		"}"
	  ],
	  "description": "React模板"
	},
	"demo": {
	  "prefix": "demo",
	  "body": [
		"function demo (){",
		"console.log($1)",
		"}"
	  ],
	  "description": "测试"
	},
	// ------------------------vue
	"vue": {
	  "prefix": "vue",
	  "body": [
		"<template>\n",
		" <div>\n",
		" </div>\n",
		"</template>\n",
		"<script>",
		"export default {}",
		"</script>\n",
		"<style scoped>\n",
		"</style>"
	  ]
	},
	"vuex": {
	  "prefix": "vuex",
	  "body": [
		"import {} from '@/api'\n",
		"const state = {}",
		"const mutations = {}",
		"const actions = {}",
		"const getters = {}\n",
		"export default{",
		"state,",
		"mutations,",
		"actions,",
		"getters,",
		"}"
	  ],
	  "description": "vuex"
	}
  }