本身經常使用的VScode snippet（持續更新）

本身經常使用的VScode snippet（持續更新）

做者：吳業飛 時間：2018年12月4日

---

在VScode裏編輯本身的代碼段（snippet），Ctrl + Shift + p,輸入snippet,首選項：配置用戶代碼片斷。

html.json

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. 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": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"dump": {
		"prefix": "dump",
		"body": [
			"<?php dump($1);?>",
			"$2"
		],
		"description": "Log output to console"
	},
	"foreach": {
		"prefix": "foreach",
		"body": [
			"{foreach name='$1' item='vo' key='k'}$3{/foreach}"
		],
		"description": "thinkPHP5 foreach"
	},
	"swiperHTML": {
		"prefix": "swiperHTML",
		"body": [
		"<div class='swiper-container'>",
			"    <div class='swiper-wrapper'>",
				"        <div class='swiper-slide'>Slide 1</div>",
				"        <div class='swiper-slide'>Slide 2</div>",
				"        <div class='swiper-slide'>Slide 3</div>",
			"    </div>",
			"    <div class='swiper-pagination'></div>",
			"    <div class='swiper-button-prev'></div>",
			"    <div class='swiper-button-next'></div>",
			"    <div class='swiper-scrollbar'></div>",
		"</div>"
		],
		"description": "swiper init html"
	},
	"swiperJS": {
		"prefix": "swiperJS",
		"body": [
			"<script>        ",
			"var mySwiper = new Swiper ('.swiper-container', {",
			  "    direction: 'vertical', // 垂直切換選項",
			  "    loop: true, // 循環模式選項",
			  
			  "    // 若是須要分頁器",
			  "    pagination: {",
				"    el: '.swiper-pagination',",
				"    clickable :true,",
			  "    },",
			  
			  "    // 若是須要前進後退按鈕",
			  "    navigation: {",
				"    nextEl: '.swiper-button-next',",
				"    prevEl: '.swiper-button-prev',",
			  "    },",
			  
			  "    // 若是須要滾動條",
			  "    scrollbar: {",
				"    el: '.swiper-scrollbar',",
			  "    },",
			"})        ",
			"</script>",
		],
		"description": "swiper init JS"
	}
}
複製代碼

---

版權聲明：自由轉載-非商用-非衍生-保持署名