フォローしてみる

勉強会スニペットサンプル

環境構築

3.12勉強会スライド掲載のサンプルです。

スニペットサンプル

VisualStudioCodeのユーザスニペットに登録するJSONのサンプルです。

  • ・css.json
  • ・html.json
  • (※wordpressのテンプレートタグはphp.jsonでなく、html.jsonに記述しないと使えないので注意)

css.json

{
	// 以下をcss.jsonに貼り付け(3~13行目まで)
	"上下左右中央揃え": {
		"prefix": "snip_tblf0",
		"body": [
			"top: 0;",
			"bottom: 0;",
			"left: 0;",
			"right: 0;",
			"margin: auto;",
		],
		"description": "これは説明です。上下左右中央揃え"
	},
}

html.json

{
	// 以下をhtml.jsonに貼り付け(3~26行目まで)
	"ul定形": {
		"prefix": "snip_ul",
		"body": [
			"<ul class=\"$1__list\">",
			"   <li class=\"$1__list__item\">",
			"   </li>",
			"</ul>",
		],
		"description": "ul定形"
	},
	"WordPress Loop": {
		"prefix": "?wploop",
		"body": [
			"<?php",
			"if(have_posts()):",
			"  while(have_posts()): the_post();",
			"?>",
			"<?php",
			"  endwhile;",
			"endif;",
			"?>",
		],
		"description": "WordPressループ"
	},
}

この投稿をシェアする

広告

目次

広告

関連記事