LoginSignup
52

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-11-27

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

最近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を押すだけ。

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
52