VSCode用のユーザースニペット編集メモです。
php.jsonを開くには?
ファイル>ユーザー設定>ユーザースニペットの構成>php.jsonを選択します。
{
// Place your snippets for php 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"
// }
//ここに必要なものを追加
}
スニペットサンプル
各言語でのVSCodeスニペットのサンプルの紹介です。
PHP
class & spl_autoload_register
{
"class":{
"prefix": "class",
"body":[
"class ${1:$TM_FILENAME_BASE}",
"{",
"\t$0",
"\\}"
]
},
"autoload":{
"prefix": ["spl_autoload_register", "autoload"],
"body": [
"spl_autoload_register(function (\\$class_name) {",
"\tinclude './${1:folder/}' . \\$class_name . '.php';",
"});",
"$0",
],
},
}
1)ファイル名と同じクラス名をデフォルトで付けるクラス。
2)クラスが存在しなかった場合に、そのクラス名を引数としたコールバックを呼び出す
“spl_autoload_register”のスニペット。
ユーザースニペットの書き方
例としてhtml.json上のphpタグとそのechoタグのスニペットは以下のようになります。
{
"php tag":{
"prefix":"<?php ?>",
"body":[
"<?php",
"$0",
"?>"
],
"description": "php tag"
},
"php echo":{
"prefix": "<?php echo '' ?>",
"body": [
"<?= $1 ?>$0"
],
"description": "php echo (short)"
}
}
- “prefix”:実際に入力するキー(途中まで入力すれば候補に表示される)
- “body”:表示されるスニペット
- “description”:ユーザースニペットの補足説明
スニペットのカーソル位置を指定する
$1, $2のように$に番号を付ける事でタブ(Tab)キーで移動できるカーソル位置の指定,
$0で最後のカーソル位置を指定出来ます。
また同じ$番号を複数使用する事で、同時に複数のカーソルを使用できます。
これはスニペット内のCtrl+Shift+L相当で”for文の$i”等に利用できます。
タブ(Tab)を挿入する
\t
($)のエスケープ
ダブルバックスラッシュ(\\)でエスケープできます。
for文タグを挿入するHTMLドキュメントに組み込むPHPのユーザースニペットのhtml.jsonは以下のようになります。
{
"php for":{
"prefix": "<?php for(): ?>",
"body":[
"<?php for(\\$${1:i}=0; \\$${1:i} < ${2:1}; ++\\$${1:i}): ?>",
"\t$0",
"<? endfor; ?>"
],
"description": ""
}
}
html.jsonとphp.jsonのスニペット
htmlタグを挿入する場合には、文書が.phpファイルでもhtml.json内にスニペットを記述します。
phpタグ内で使用するスニペットはphp.jsonに記述します。
スニペットのタブストップと予測変換干渉の対処
タブストップから次のタブストップへ遷移する際に予測変換を選択してしまい文が崩れる場合の設定です。
ユーザー設定>設定>”editor suggest selection”等と入力して検索”>「never」に設定
デフォルトで候補を選択しなくなる代わりに、スニペットに干渉しなくなります。
※上記の設定は使い勝手がやや悪かった為、
予測変換はEscキーで必要に応じてエスケープした方が良いかもしれません。
参考
Create your own snippets, 2023/5閲覧
How can I create templates for file extensions in Visual Studio Code?, 2023/5閲覧
How do I have a snippet place a variable in the pasted script?, 2023/5閲覧
How to escape dollar sign ($) in emmet?, 2023/5閲覧
コメント