【ちょっと便利な小技_part 9】自作スニペット+α編

今回はSnippetを自作するときに知っていて損はない知識を紹介します。
簡単な内容となっているので是非試してみてください。

前提

この記事は下記の記事を既に見ている,
またはSnippetについての知識が既にある前提で話を進めます。

+αの知識

下記の自作したSnippetに記載されている、『$~』の役割について説明いたします。

dart.json

"TextTmp": {
		"prefix": "texttmp",
		"body": [
			"Text(",
			"  \"$1\",",
			"  style: TextStyle(",
			"    color:$2,",
			"    fontSize: $3,",
			"    fontWeight: $4,",
			"  ),",
			")"
		],
		"description": "TextTmp"
	}

『$~』の役割について

実際に上記のSnippetを使用してみると下記のように表示されます。
見てわかるようにSnippetを使用したタイミングで初期のカーソル位置が『＄1』と入力していたところになっています。
他にも『＄2』,『＄3』と入力していたところには、縦の線が入っています。
『＄1』のところの入力が終わった後、タブキーを押すことによって『＄2』のところへカーソルが移動されます。
Snippet作成時に任意の入力が必要となる場所に『＄~』と入れることによって、楽に入力を行うことができます。