ドローイング空間

3D-CADを中心に、雑多なことをかいています。

Visual Studio Codeで、ユーザー定義スニペットを定義する

広告

Visual Studio Codeは、インテリセンスと呼ばれる強力な入力支援機能が利用できる無料使える汎用テキストエディタです。 その入力支援機能の中の1つに、定型文を挿入するスニペットがあります。 予め用意されているスニペットだけでも十分協力ですが、さらに、ユーザー定義して強化することもできます。

 

実際に、ユーザースニペットを定義してみようと思います。

しかし、Visual Studio Codeのドキュメントは、読んでもよく理解できません。 おそらくもう少し知識が増えれば、当たり前のこととして理解できると信じているのですが、現時点ではムリです。

探してみると、Visual Studio Codeを説明しているプログを見つけたので、 このブログを参考にして、実際にスニペットを作成してみようと思います。

qiita.com

ユーザースニペットを定義します

まず、Visual Studio Code を管理者として実行します。Windowsでは、Visual Studio Codeの設定ファイルは、迷惑ですが管理領域に存在するので、管理者として実行していないと変更が反映されません。 スニペットの場合は、どういった挙動をするのかわかりませんが、無用なトラブルを避けるために、「管理者として実行」します。

Visual Studio Codeを管理者として実行する

メニューバーのファイルメニューから、[基本設定]→[ユーザースニペット]を選択します。

メニューバーのファイルメニューから、[基本設定]→[ユーザースニペット]を選択します。

スニペットの言語の選択が促されます。

スニペットの言語の選択が促されます。

htmlを選択します。

htmlを選択します。

スニペットの定義ファイルhtml.josnが開きます。


{
/*
	 // 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
	 // Example:
	 "Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
*/
}

コメントの訳

ここに、HTMLのための、あなたのスニペットを配置します。 各々のスニペットは、スニペットの名前の下に定義され、接頭辞、ボディと説明を持っています。 接頭辞は、スニペットを起動するために使用されるものです。 そして、ボディは、展開され、そして、挿入されるでしょう。利用できる変数は以下の通りです: タブストップのための$1、$2、変数のための${id}と${id:label}と${1:label}。 同じIDを持つ変数は、結合されています。

例:

ユーザー定義スニペットを追加する

動作確認のために、簡単なスニペットを作成してみたいと思います。 最後の2行「*/」と「}」の間に、コメントを参考にスニペットを挿入します。

「$1」、「$2」(今回は、「$1」のみ使用しています。)は、挿入後のカーソル位置です。 挿入後、タブで、カーソル位置が移動します。


	} */
	"コメントの挿入":  {
		"prefix": "!-",
		"body": [
			"<!-- $1 -->"
		],
		"description": "コメントを挿入する"
	}

}

保存して閉じます。

動作を確認します。

「!-」を入力して、Tabキーを押します。

<!-></!->

emmet入力が機能します。

「!-」を入力して、Ctrl+Spaceを押します。候補が表示されません。

候補が表示されません。

カーソルを文頭に移動して、Ctrl+Spaceを押します。「コメントを挿入する」の項目が表示されます。 「コメントを挿入する」を選択すると目的である「<!-- -->」が表示されます。 つまり、うまく機能していません。prefixは、記号には対応していないと考えていいのだと思います。

おそらく他のやり方が用意されていると思いますが、探せません。

カーソルを文頭に移動して、Ctrl+Spaceを押すと「コメントを挿入する」の項目が表示されます。

ちなみに、Visual Studio Code の emmet入力で、コメントを入力するには、「c」を入力して、Tabキーを押します。

気を取り直して、他のスニペットを考えます。 コードをWebページで、強調表示の色分けを行うprettyprintタブの入力を軽減することを考えます。


	"コード枠を入力": {
		"prefix": "pre",
		"body": [
			"<pre class="prettyprint"><code>",
			"$1",
			"</code></pre>"
		],
		"description": "コード枠を入力"
	}

「pre」を入力して、Tabキーを押します。期待通りには、表示されません。


<pre class=
><code>

</code></pre>

「"」を使用する際は、「\"」を使用する必要があります。

修正します。


	"コード枠を入力": {
		"prefix": "pre",
		"body": [
			"<pre class=\"prettyprint\"><code>",
			"$1",
			"</code></pre>"
		],
		"description": "コード枠を入力"
	}

「pre」を入力して、Tabキーを押します。コードが入力されます。


<pre class="prettyprint"><code>

</code></pre>

うまく使えば、コード入力が、かなり軽減できそうです。

でも問題が発生しました。

「p」を入力した後、Tabキーを押して、 「<p></p>」を入力する入力補助を使っていたのですが、 「pre」が優先的に選択されるので指定できなくなってしまいました。

「pre」が優先的に選択されるので「p」が指定できなくなってしまいました。

emmet入力について

kukekko.hatenablog.com

そこで、「<p></p>」のコードスニペットも登録しました。


	"コード枠を入力": {
		"prefix": "pre",
		"body": [
			"<pre class=\"prettyprint\"><code>",
			"$1",
			"</code></pre>"
		],
		"description": "コード枠を入力"
	},
	"<p></p>": {
		"prefix": "p",
		"body": [
			"<p>$1</p>"
		],
		"description": "<p></p>"
	}	

問題は、解決です。emmet入力と競合しないように気をつける必要があります。

「p」も候補として表示されるようになりました。