⛳

VSCodeでスニペットを活用しZennの記事執筆を楽にする

2023/01/05に公開

VS Code

Zenn

snippets

tech

はじめに

Zennの記事を執筆する際、VSCodeで記述をしています。
しかし、インフォメーションを挿入する際やコードブロックを追加する際に一々手入力していて面倒だと感じました。
そこでこれらをスニペットとして登録してすぐに入力できるようにしようと思い立った次第です。

VSCodeでMarkdownのスニペットを有効にする

デフォルトでは無効になっているので有効に設定を変更します。
そうしないと折角自分で作成しても使うことができません。
下記手順で有効にできます。

File>Preference>Settings
Settingsビューの右上に Open Settings(JSON)のアイコンがあるのでクリックして、 settings.jsonを開く
以下のコードを追加し保存するとMarkdownファイルでのスニペットが有効になります ^[1]
その他必要な設定も行うと捗りますので各自追加してください。

"[markdown]": {
"editor.quickSuggestions": true,
"editor.snippetSuggestions": "top"
}

Zennで使われるMarkdown記法をスニペットに登録する

これでスニペットは有効になりましたから、実際にスニペットの登録しましょう。
まず以下の手順でスニペットを記述する'markdown.json'を開きます。

File>Preference>Configure User Snippets
言語の検索ウィンドウが立ち上がるのでmarkdown.jsonと入力して選択

するとmarkdown.jsonが開くので追加していきます。
登録はそれぞれ以下のテンプレを埋める形で登録していきます。

"Print to console": {
"prefix": "",
"body": [
    ""
],
"description": ""
}

なお記述方法については以下の記事が大いに参考になりましたのでご参照ください。

個人的に$1や$2を利用して入力後のカーソル位置を変更できるのは大変便利でした。
タブを押すと1から設定した順番にカーソル位置を変更できます。

最後に私が設定した内容も共有します。
ご参考にどうぞ。

"Markdown Zenn Message": {
    "prefix": "message",
    "body": [
        ":::message",
        "$1" ,
        ":::"
    ],
    "description": "Zenn Original : Messge Block"
},

"Markdown Zenn Message Alert": {
    "prefix": "alert",
    "body": [
        ":::message alert",
        "$1" ,
        ":::"
    ],
    "description": "Zenn Original : Messge Alert Block"
},

"Markdown Zenn Toggle": {
    "prefix": "toggle",
    "body": [
        ":::details $1",
        "$2" ,
        ":::"
    ],
    "description": "Zenn Original : Toggle"
},

"Markdown Zenn Table": {
    "prefix": "table",
    "body": [
        "|$1|$4|",
        "|----|----|" ,
        "|$2|$5|",
        "|$3|$6|"
    ],
    "description": "table"
},

"Markdown Code Block": {
    "prefix": "code",
    "body": [
        "```:$2",
        "$1" ,
        "```"
    ],
    "description": "code block"
},

"Markdown footnote": {
    "prefix": "footnote",
    "body": [
        "[^$1]",
        "",
        "[^$1]:$2" ,
    ],
    "description": "footnote"
},

"Markdown Zenn Math": {
    "prefix": "math",
    "body": [
        "$$",
        "$1" ,
        "$$"
    ],
    "description": "Zenn Original : Math"
},

"Markdown Image Basic": {
    "prefix": "image",
    "body": [
        "![$2]($1)",
    ],
    "description": "Image Basick"
},

"Markdown Image caption": {
    "prefix": "image",
    "body": [
        "![$2]($1)",
        "*$3*",
    ],
    "description": "Image with caption"
}

脚注

この設定では、①タイプ中に補完候補を出す②スニペットのサジェストを最初に出す、の2点が設定されます。 ↩︎

はじめに

VSCodeでMarkdownのスニペットを有効にする

Zennで使われるMarkdown記法をスニペットに登録する

Discussion