Edited at

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

More than 3 years have passed since last update.

早く調べておくんだった(血涙

最近typescriptやhtmlを書くことが多いので、なんとなくVisual Studio Codeで作業しているのですが、特にBootstrap関係でやたら同じような文字列を書いていることに気づきました。

以前RailsなプロジェクトにおいてRubymineを使って作業していた時は特にテストコードの定型文を吐くのにLive Templatesを使用しており、まあ同じような機能あるだろうということで調査しました。


ユーザー定義スニペット

特にプラグイン等を追加せずに使用できます。


手順

メニュー > Code > Preferences > User Snippets をクリック

すると言語を聞かれるので、今回はhtmlを選択

html.jsonが開くので、例の通りに作ってみる


html.json

...

"Add new row": {
"prefix": "row",
"body": [
"<div class=\"row padding-8\">",
" <div class=\"col-xs-12\">",
" $1",
" </div>",
"</div>"
],
"description": "crate 1row"
}
...

よくある行を作るやつ

\$1は作成後のカーソル位置です。$2を設定するとそこからタブを押した際に更に移動します。

使用法はhtmlファイル編集中に 'row' と打ち、tabを押すだけ。

これで開発効率だいぶ上がりそうですね(ニッコリ