Help us understand the problem. What is going on with this article?

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした