Visual Studio Code (VSCode)では、ユーザースニペットを使用してコードの記述を効率化することができます。この記事では、VSCodeでユーザースニペットを設定する方法を紹介します。
ユーザースニペットの設定方法
VSCodeでユーザースニペットを設定するには、以下の2つの方法があります：
・設定したい言語を選択する方法
『設定』を押して『ユーザスニペット』をクリック
言語が一覧表示されるので希望の言語を選択する
・グローバルに設定する場合はglobal.code-snippetsファイルに設定する
Visual Studio Code全体で共通して使えるスニペットを作成することを指します。これを行うと、どのプロジェクトを開いているときでもそのスニペットを使用できるようになります。
クリックして新しいグローバルスニペット専用のファイル名を決めます。
そしたらそのファイルが自動で生成されます。
スニペットの全体構造
{
"php": {
"prefix": "php",
"body": [
"<?php $1 ?>"
],
"description": "Basic PHP template"
}
}
ユーザースニペットの全体構造は以下のようになります：
{
"スニペット識別子": {
"prefix": "トリガーキーワード",
"body": [
"スニペットの内容"
],
"description": "スニペットの説明"
}
}
各フィールドの説明
- “php”: これはスニペットの識別子で、スニペットファイル内でユニークである必要があります。この名前はユーザーが見ることはありませんが、スニペットファイル内でスニペットを識別するために使用されます。
- “prefix”: これはスニペットをトリガーするキーワードです。この場合、ユーザーが
phpと入力してTabキーを押すと、スニペットが展開されます。 - “body”: これはスニペットの実際の内容です。この例では、
<?php $1 ?>というコードが挿入され、$1の位置にカーソルが配置されます。 - “description”: これはスニペットの説明です。スニペット選択時に表示され、スニペットの内容を説明します。
スニペットの例
例えば、次のように他のスニペットを追加することもできます：
{
"php": {
"prefix": "php",
"body": [
"<?php $1 ?>"
],
"description": "Basic PHP template"
},
"phpfunction": {
"prefix": "phpfunc",
"body": [
"<?php",
"function ${1:functionName}(${2:args}) {",
" $0",
"}",
"?>"
],
"description": "PHP Function template"
}
}
この例では、2つのスニペットが定義されています。一つは php というトリガーキーワードでPHPの基本テンプレートを挿入するスニペット、もう一つは phpfunc というトリガーキーワードでPHPの関数テンプレートを挿入するスニペットです。それぞれの識別子は "php" と "phpfunction" です。
まとめ
VSCodeのユーザースニペットを使用することで、コードの記述を効率化し、生産性を向上させることができます。スニペットの設定方法と基本的な構造を理解し、必要に応じて自分の作業フローに合ったスニペットを作成してみてください。