vscodeで独自スニペットを作成して快適にする方法
はじめに
vscode にもスニペット機能があります。
この機能を使うことで毎回同じような定型文を簡単に挿入できるようになります。
ファイルのタイプごとに設定する事ができるので、スニペットをたくさん作っても、ごちゃごちゃになることが無いです。
スニペットとは
予め定型文などをスニペットとして登録しておくことで、毎回入力する必要もないですし、コピーアンドペーストで貼り付ける必要もなく、同じ文章やコードを挿入することが出来ます。
スニペット設定の開き方
開き方は、
ファイル＞基本設定＞ユーザースニペット
で「スニペットファイルの選択もしくはスニペットの作成」というテキストボックスとリストが表示されますので、任意のファイルタイプを選択してください。
例えば、markdown を選択すると、markdown.json が作成され、スニペットを記述できる状態になります。
すでに作成済みの場合は、リストの中に、markdown.json が表示されていますので、選択すると編集できる状態になります。
スニペットの挿入
markdown.json に記載したスニペットを呼び出したいときは、.mdファイルを開いて、[Ctrl + スペース]をタイプすることで、使用可能なスニペットと作成したスニペットが一覧で表示されます。
hugo の記事を書くとき用
hugo 用の記事を作成するときは、hugo コマンドではなく vscode のスニペットを使用しています。
"hugo": {
"prefix": "hugo",
"body": [
"+++",
"title = \"$1\"",
"date = \"\"",
"lastmod = \"\"",
"description = \"\"",
"img = \"\"",
"+++"
],
"description": "hugo new"
},
$1はスニペットを挿入したときの最初のカーソル位置になります。
入力する箇所に、$2、$3と順番に割り当てておくと、カーソルキーでカーソルを移動しなくても、TAB キーで移動できるようになります。
hugo イメージリンク用
はじめからマークダウンの image 用スニペットが入っていますが、自分が普段使うように下記のようなスニペットを登録しています。
"img": {
"prefix": "hugo",
"body": [
""
],
},