またまたブログの書き心地改善 今回はhtmlで直接編集

2018年9月2日

直接htmlで書くために、Visual Studio Codeの設定をいじくった。
スニペットでサクサク書いていきたいわけだけど、コードの貼り付けに使うpreタグとかをもっと使いやすくするために
スニペットを登録した。

スニペットの登録内容

ユーザスニペットの構成を開く

Ctrl+Shift+Pを押してユーザスニペットと入力する。
すると、その中に「基本設定:ユーザスニペットの構成」が出てくるので、それを選択する。
今回は、HTMLのスニペットを追加したいので、HTMLを選択する。
するとhtml.jsonが開く。

html.jsonを編集する

vscodeのドキュメントを参考に設定した。
出来上がったのが以下

        "pre php": {
            "prefix":"prephp",
            "body": [
                "
",
                "<?php",
                "?>",
                "<\/pre>"
            ]
        },

登録方法と注意
スニペットの登録では

スニペットの名前を入力する
        ここでは、pre phpというのがスニペットの名前
トリガー名の設定
        上記の例でいうと、prephpです。コード上で打つとbody部の内容が反映される
展開されるコード
        トリガー名を打った時にでる内容です
説明
        上記例では使っていないけど、登録するスニペットの説明を記述できるようだ。

        "description"を使用する。

あと、スニペットを使った時にカーソルを合わせるために${1:title}というのを設定した。
それ以外にも、注意しないといけないのは、body内、つまりスニペットで反映させたい内容の中では

直接タグとかをエスケープシーケンスで指定すること。これは、ブログのエディタでhtml形式で直接貼り付ける際に、

エスケープシーケンスを使わないと想定した通りの結果にならないためです。
出たエラーと解消方法
ここでhtml.jsonでコメントアウトされている説明と設定サンプルを見て設定していくといくつかエラーが出た。

ダブルコーテーションで囲わず怒られる
"pre php": {
この部分を
pre php: {
としたらエラーとなった。
各行にカンマがないと怒られる
        json形式ということを忘れており、カンマをいれてなかったので怒られた。