vscode 常用代码片段整理

目录

1、js

2、react

3、vue

---

使用方法：

1.   js部分在.js文件中生效；
2.  react部分在.jsx文件中生效；
3.  vue部分在.vue文件中生效；
4. prefix 代码简写字符，body代表生成代码的全部，$1,$2代表代码生成后，光标自动所在的位置，按顺序，按tab键可以依次进行设置；

     以console.log为例，例如：

          输入 ccg, 按tab键，自动生成console.log(xx, '=====xx')

1、js

{
	"console.log": {
		"prefix": "ccg",
		"body": [
			"console.log($1, '=====$2')",
		]
	},
	"debugger": {
		"prefix": "ddg",
		"body": [
			"console.log($1, '=====$2')",
			"debugger"
		]
	},
	"if": {
		"prefix": "iif",
		"body": [
			"if ($1) {",
			"  $2",
			"}"
		]
	},
	"else if": {
		"prefix": "eef",
		"body": [
			"else if ($1) {",
			"  $2",
			"}"
		]
	},
	"else": {
		"prefix": "eee",
		"body": [
			"else {",
			"  $2",
			"}"
		]
	},
	"map": {
		"prefix": "mmp",
		"body": [
			"$1.map((item, idx) => {",
			"  $2",
			"  return $3",
			"})"
		]
	},
	"forEach": {
		"prefix": "ffh",
		"body": [
			"$1.forEach((item, idx) => {",
			"  $2",
			"})"
		]
	},
	"find": {
		"prefix": "ffd",
		"body": [
			"const $1 = $2.find(item => $3)"
		]
	},
	"switch": {
		"prefix": "ssh",
		"body": [
			"switch($1) {",
			"  case $2:",
			"    return $3",
			"  case $4:",
			"    return $5",
			"  case $6:",
			"    return $7",
			"  case $8:",
			"    return $9",
			"  default:",
			"    return null",
			"}"
		]
	},
	"import": {
		"prefix": "iit",
		"body": [
			"import $1 from '$2'"
		]
	},
	"const": {
		"prefix": "cct",
		"body": [
			"const $1 = $2"
		]
	},
	"let": {
		"prefix": "llt",
		"body": [
			"let $1 = $2"
		]
	},
	// "function": {
	// 	"prefix": "ffn",
	// 	"body": [
	// 		"const $1 = ($2) => {",
	// 		"  $3",
	// 		"  return $4",
	// 		"}"
	// 	]
	// },
	// "className": {
	// 	"prefix": "cname",
	// 	"body": [
	// 		"className={$1}"
	// 	]
	// },
	// "onClick": {
	// 	"prefix": "ook",
	// 	"body": [
	// 		"onClick={$1}"
	// 	]
	// },
	// "useEffect": {
	// 	"prefix": "uuk",
	// 	"body": [
	// 		"useEffect(() => {",
	// 		"  $1",
	// 		"}, [$2])"
	// 	]
	// },
	// "useState": {
	// 	"prefix": "uue",
	// 	"body": [
	// 		"const [$1, set$2$1] = useState($3)"
	// 	]
	// },
	// "index.jsx": {
	// 	"prefix": "iix",
	// 	"body": [
	// 		"import React from 'react'",
	// 		"",
	// 		"const $1 = () => (",
	// 		"  <div className={$1}>",
	// 		"    $3",
	// 		"  </div>",
	// 		")",
	// 		"",
	// 		"export default $1",
	// 	]
	// },
}

2、react

{
	"console.log": {
		"prefix": "ccg",
		"body": [
			"console.log($1, '=====$2')",
		]
	},
	"debugger": {
		"prefix": "ddg",
		"body": [
			"console.log($1, '=====$2')",
			"debugger"
		]
	},
	"if": {
		"prefix": "iif",
		"body": [
			"if ($1) {",
			"  $2",
			"}"
		]
	},
	"else if": {
		"prefix": "eef",
		"body": [
			"else if ($1) {",
			"  $2",
			"}"
		]
	},
	"else": {
		"prefix": "eee",
		"body": [
			"else {",
			"  $2",
			"}"
		]
	},
	"map": {
		"prefix": "mmp",
		"body": [
			"$1.map((item, idx) => {",
			"  $2",
			"  return $3",
			"})"
		]
	},
	"forEach": {
		"prefix": "ffh",
		"body": [
			"$1.forEach((item, idx) => {",
			"  $2",
			"})"
		]
	},
	"find": {
		"prefix": "ffd",
		"body": [
			"const $1 = $2.find(item => $3)"
		]
	},
	"switch": {
		"prefix": "ssh",
		"body": [
			"switch($1) {",
			"  case $2:",
			"    return $3",
			"  case $4:",
			"    return $5",
			"  case $6:",
			"    return $7",
			"  case $8:",
			"    return $9",
			"  default:",
			"    return null",
			"}"
		]
	},
	"function": {
		"prefix": "ffn",
		"body": [
			"const $1 = ($2) => {",
			"  $3",
			"  return $4",
			"}"
		]
	},
	"import": {
		"prefix": "iit",
		"body": [
			"import $1 from '$2'"
		]
	},
	"const": {
		"prefix": "cct",
		"body": [
			"const $1 = $2"
		]
	},
	"let": {
		"prefix": "llt",
		"body": [
			"let $1 = $2"
		]
	},
	"className": {
		"prefix": "cname",
		"body": [
			"className={$1}"
		]
	},
	"onClick": {
		"prefix": "ook",
		"body": [
			"onClick={$1}"
		]
	},
	"useEffect": {
		"prefix": "uuk",
		"body": [
			"useEffect(() => {",
			"  $1",
			"}, [$2])"
		]
	},
	"useState": {
		"prefix": "uue",
		"body": [
			"const [$1, set$2$1] = useState($3)"
		]
	},
	"index.jsx": {
		"prefix": "react",
		"body": [
			"import React from 'react'\n",
			"const $1 = () => {",
			"  return (",
			"    <div className={$1}>",
			"      $3",
			"    </div>",
			"  )",
			"}\n",
			"export default $1",
		]
	},
}

3、vue

{
	"index.vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $1",
			"  </div>",
			"</template>\n",
			"<script>",
			"export default {",
			"  name: $2,",
			"  components: {},",
			"  props: {},",
			"  data() {",
			"    return {}",
			"  },",
			"  created() {},",
			"  mounted() {},",
			"  methods: {}",
			"};",
			"</script>\n",
			"<style scoped lang=\"less\">\n",
			"</style>\n",
		],
		"description": "Create vue template"
	},
	"function": {
		"prefix": "ffn",
		"body": [
			"$1 () {",
			"  $2",
			"}"
		],
	},
	"@click": {
		"prefix": "cck",
		"body": [
			"@click=\"$1\"",
		],
	},
	"@v-for": {
		"prefix": "vvr",
		"body": [
			"v-for=\"(item, idx) in $1\" :key=\"idx\"",
		],
	},
	"@v-if": {
		"prefix": "vvf",
		"body": [
			"v-if=\"$1\"",
		],
	},
	"class": {
		"prefix": "ccs",
		"body": [
			"class=\"$1\"",
		],
	},
	"watch": {
		"prefix": "wwh",
		"body": [
			"watch: {",
			"  $1 () {",
			"    $2",
			"  }",
			"},",
		],
	},
	"computed": {
		"prefix": "ccd",
		"body": [
			"computed: {",
			"  $1 () {",
			"    return $2",
			"  }",
			"},",
		],
	},
	"props": {
		"prefix": "pps",
		"body": [
			"props: {",
			"  $1: {",
			"    type: $2",
			"    default: $3",
			"  }",
			"},",
		],
	},
}